MAUI Blazor Hybrid Admob

Question

I have a MAUI Blazor Hybrid mobile application and I want to add Admob ads. I found a way to do so in XAML: https://www.mauiexpert.it/admob-for-maui-made-easy/

but I would like to wrap such functionality into Blazor component so it is easily reusable across my Blazor pages.

Yes, theoretically I can use Google AdSense but from what I read AdMob gives better PPC than AdSense.

Is there a way how to achieve this ?

Answer 1

After some research I came to this conclusion.

Option #1

Google allows showing Ads in WebView just for one specific usecase and its when you have a website which contains Adsense ads and you just want to show that website inside your app in WebView control.

Src: https://developers.google.com/ad-manager/mobile-ads-sdk/android/webview

For that specific case you would register your webview. Install Nuget package: Xamarin.GooglePlayServices.Ads and inside MainPage.xaml.cs put:

#if ANDROID
using Android.Gms.Ads;
#endif

using Microsoft.AspNetCore.Components.WebView;
using Microsoft.AspNetCore.Components.WebView.Maui;

namespace SatisFIT.Client.App;

public partial class MainPage : ContentPage {
    public MainPage() {
        InitializeComponent();

        blazorWebView.BlazorWebViewInitialized += BlazorWebViewOnBlazorWebViewInitialized;
    }

    private void BlazorWebViewOnBlazorWebViewInitialized(object? sender, BlazorWebViewInitializedEventArgs e) {
#if ANDROID
        MobileAds.RegisterWebView(e.WebView);
#endif
    }

after that you put meta-data tag mentioned in the google doc to AndroidManifest.xml <application> tag like:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true">
    <!-- Bypass APPLICATION_ID check for WebView API for Ads -->
    <meta-data
        android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
        android:value="webview"/>
</application>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

</manifest>

But as I mentioned already we cant use it just for embedding HTML of adsense ad and wrapping it into simple component.

There is potential workaround. But Google would probably disable your advertising account if they find out. The workaround would be to create your custom WebView control, then register that control with e.WebView.SetWebViewClient(new CustomWebViewClient()); inside method BlazorWebViewOnBlazorWebViewInitialized and implement there request interception. So when adsense JS would like to call https://googleads.g.doubleclick.net you intercept this request, then inside it's GET parameters you replace(2x) your local url: 0.0.0.0 to url of you website where do you have adsense allowed and theoretically u receive response with the ad.

Option #2

• I wasnt able to make it work
• H5 gaming api what is basically also mix of AdSense and Admob
• it uses WebView registering like option #1 but has a little bit different capabilities

Option #3

There is probably no other way how to achieve wrapping ad into Blazor component in Blazor Hybrid bacause you cant embed XAML into blazor and thats why the only way how to show google ad in your MAUI Blazor app is by using admob library: Plugin.MauiMTAdmob

With this we can create XAML ad and we can place it under or over our BlazorWebView component so it can overlap a part of it.