How to add Ads Mediation Adapters for AdMob using Expo Plugins?

By on •

Ad Mediation is a feature that optimizes ad revenue by enabling multiple Ad Networks to display ads in your app. The react-native-google-mobile-ads package supports Mediation, but integrating additional networks requires extra configuration. This guide will show you how to add Mediation Adapters to an Expo app, using Unity Ads as an example.

Configure react-native-google-mobile-ads

Start by installing the react-native-google-mobile-ads package:

$ npx expo install react-native-google-mobile-ads

Next, update your app.json (or app.config.js / app.config.ts) configuration file, as shown below:

{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
        }
      ]
    ]
  }
}

Then, initialize Google Mobile Ads SDK. This needs to be done only once, at the application launch:

import mobileAds from "react-native-google-mobile-ads";

mobileAds()
  .initialize()
  .then(adapterStatuses => {
    console.log({ adapterStatuses });
  });

This step ensures all Mediation Adapters are initialized. Be sure to wait for the initialization before preloading ads from Mediation partners.

Configure Mediation in Google AdMob

Follow the official AdMob guides to set up Mediation:

Create a Mediation Adapter Expo Plugin

Adding a Mediation Adapter requires incorporating custom native packages. To do this, we will create a custom Expo Plugin and modify the Podfile and Gradle dependencies.

Install required packages

Install the expo-build-properties and expo-android-app-gradle-dependencies packages with the following command:

$ npx expo install expo-build-properties expo-android-app-gradle-dependencies

Then, add it to your app.json configuration file, as shown below:

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ],
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
        }
      ]
    ]
  }
}

Create a custom Expo plugin

To encapsulate all the requirements for Unity Ads mediation, we will ceate a plugins/withUnityAds.js file with the following content:

const { withBuildProperties } = require("expo-build-properties");
const withAppGradleDependencies = require("expo-android-app-gradle-dependencies");

const withUnityAds = (config) => {
  // Adds extra Pod, as specified in:
  // https://developers.google.com/admob/ios/mediation/unity#step_3_import_the_unity_ads_sdk_and_adapter
  config = withBuildProperties(config, {
    ios: {
      extraPods: [
        { name: "GoogleMobileAdsMediationUnity" },
      ],
    },
  });

  // Adds extra Gradle dependencies, as specified in:
  // https://developers.google.com/admob/android/mediation/unity#android_studio_integration_recommended
  config = withAppGradleDependencies(config, {
    dependencies: [
      "com.unity3d.ads:unity-ads:4.12.4",
      "com.google.ads.mediation:unity:4.12.5.0",
    ],
  });

  return config;
};

module.exports = withUnityAds;

Then, add your plugin to the plugins list in the app.json configuration file:

{
  "expo": {
    "plugins": [
      "./plugins/withUnityAds",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ],
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
        }
      ]
    ]
  }
}

With this done, you should see dependencies correctly added.

Expected results in android/app/build.gradle

dependencies {
    ...

+    // START expo-android-app-gradle-dependencies
+    implementation("com.unity3d.ads:unity-ads:4.12.4")
+    implementation("com.google.ads.mediation:unity:4.12.5.0")
+    // END expo-android-app-gradle-dependencies
}

Expected results in ios/Podfile.lock

+  - GoogleMobileAdsMediationUnity (4.12.5.0):
+    - Google-Mobile-Ads-SDK (~> 11.0)
+    - UnityAds (= 4.12.5)

Update the SKAdNetwork list

The Google Mobile Ads SDK supports conversion tracking using Apple’s SKAdNetwork, which lets Google and participating third-party buyers attribute an app install even when the IDFA is unavailable. Update the list of identifiers in app.json to include Unity Ads identifiers:

{
  "expo": {
    "plugins": [
      // ...
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "skAdNetworkItems": [
            "cstr6suwn9.skadnetwork",
            "4fzdc2evr5.skadnetwork",
            // ...
            "3rd42ekr43.skadnetwork",
            "3qcr597p9d.skadnetwork"
          ]
        }
      ]
    ]
  }
}

Refer to these resources for the latest identifiers:

Remember to periodically update the list to ensure the ad network identifiers are up-to-date.

Test your Mediation setup

To verify if your Mediation Partner is serving ads, enable the Ad Inspector by adding the following code:

import mobileAds from "react-native-google-mobile-ads";

mobileAds()
  .initialize()
  .then(adapterStatuses => {
    mobileAds().openDebugMenu();
  });

You can use the “Single ad source test” feature in the Ad Inspector to select your Mediation Partner from the list. Then, request a new ad and verify if the Mediation Partner correctly fills it. Make sure that your test device is registered in the Mediation Partner’s dashboard.