Adding AdMob to PWABuilder

[cschnacker]

Tell us about your feature idea

Love the pwabuilder app! I am looking at ways to monetize the apps created for all platforms. Would love to be able to incorporate google admob links into the pwabuild files. I would appreciate if you would look into this.

Do you have an implementation or a solution in mind?

As part of pwabuild process, allow the entry of admob parameters into the build process so completed package includes all the required admob links and information.

Have you considered any alternatives?

Alternative would be to use Cordova to generate packages that incorporate admob. Other ad platforms such as propeller adds may be simply added to html code. Prefer to stay with the pwabuilder application for simplicity and Google Admob generated higher quality ads for users.

[ghost]

Thanks for submitting a new feature request! I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future.

[nmetulev]

Hi @cschnacker, thank you for creating this issue. It sounds like this is something that could already be added by the developer after we generate the source, and your ask is to automate it so it's included if the developer selects it as an option?

Either way, this is not something we can prioritize at the moment, but we are open to yourself or someone from the community submitting a PR adding the feature.

[cschnacker]

Thanks for the quick response, Nikola. I have done some research on this and I do not believe it is possible to use pwabuilder and insert admob into the application. As mentioned in my post, I believe the only way is having access to all the build components in an application like Cordova. It would be neat if pwabuilder would be able to provide this access also.

Cris

[jgw96]

@cschnacker , if you click the "Include Source Code" option in the Android packaging modal, are you able to achieve what you need? This option gives you the whole Android Studio source when you generate a package.

[cschnacker]

Thanks, Justin, I will check it out. Any such capabilities also for the Windows Packages as well as others?

Cris

[jgw96]

@cschnacker we don't have similar for the Windows packages, but that is because if we did, it would just be an msix file. PWAs in the Microsoft Store are "true" PWAs in that they are running just like a PWA installed from Edge, with no wrapper like TWAs .

[crosschainer]

I would love to see this in the Builder. My usecase would be showing interstitial ads triggered by JS in the PWA. for example on click show interstitial from admob.

I tried adding a Interface class for it with a showInterstitial function and using .addJavascriptInterface on a webView but im no native android or java developer. so i was stuck at getting the webview, since i cant find a get function to get the webView instance

@jgw96 can you help? this is how far i came

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Setting an orientation crashes the app due to the transparent background on Android 8.0
    // Oreo and below. We only set the orientation on Oreo and above. This only affects the
    // splash screen and Chrome will still respect the orientation.
    // See https://github.com/GoogleChromeLabs/bubblewrap/issues/496 for details.
    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.O) {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
    } else {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
    }

    // Initialize the Mobile Ads SDK.
    MobileAds.initialize(this, new OnInitializationCompleteListener() {
        @Override
        public void onInitializationComplete(InitializationStatus initializationStatus) {
            // Request an interstitial ad.
            AdRequest adRequest = new AdRequest.Builder().build();

            InterstitialAd.load(LauncherActivity.this, "xxx", adRequest,
                    new InterstitialAdLoadCallback() {
                        @Override
                        public void onAdLoaded(@NonNull InterstitialAd interstitialAd) {
                            // The mInterstitialAd reference will be null until
                            // an ad is loaded.
                            mInterstitialAd = interstitialAd;
                            Log.i(TAG, "onAdLoaded");
                        }

                        @Override
                        public void onAdFailedToLoad(@NonNull LoadAdError loadAdError) {
                            // Handle the error
                            Log.d(TAG, loadAdError.toString());
                            mInterstitialAd = null;
                        }
                    });
        }
    });

    webView = ???

    // Expose the JavaScript interface to the web content with the name "AdMobInterface"
    webView.addJavascriptInterface(new AdMobInterface(mInterstitialAd), "AdMobInterface");

}

public class AdMobInterface {

    private InterstitialAd mInterstitialAd;

    public AdMobInterface(InterstitialAd interstitialAd) {
        this.mInterstitialAd = interstitialAd;
    }

    @JavascriptInterface
    public void showInterstitialAd() {
        // Code to show the interstitial ad
        if (mInterstitialAd != null) {
            mInterstitialAd.show(LauncherActivity.this);
        }
    }
}