This guide shows you how to use Google Mobile Ads SDK for React Native to load and display ads from maio using [mediation](https://developers.google.com/admob/react-native/mediation.md.txt), covering waterfall integrations. It covers how to add maio to an ad unit's mediation configuration, and how to integrate the maio SDK and adapter into a React Native app. The dashboard interface for maio uses Japanese text for its labels, buttons, and descriptions, and the screenshots in this guide have not been translated. However, in descriptions and instructions here, labels and buttons are referred to by their English language equivalents. "URL スキーム," for example, is "URL Scheme,". ## Supported integrations and ad formats The mediation adapter for maio has the following capabilities: | Integration || |---|---| | Bidding | | | Waterfall | Yes | | App Open | | | Banner | | | Interstitial | Yes | | Rewarded | Yes | | Rewarded Interstitial | | | Native | | ## Prerequisites Before you continue, verify the following: - Latest Google Mobile Ads SDK for React Native version. - React Native framework version 0.85.0 or later. - To deploy on Android - Android API level 24 or later. - To deploy on iOS - iOS deployment target of 15.0 or later. - A working React Native project configured with Google Mobile Ads SDK for React Native. See [Set up Google Mobile Ads SDK for React Native](https://developers.google.com/admob/react-native/quick-start.md.txt) for details. - Make sure you have downloaded and extracted the `adapters` folder from the [`gma-sdk-react-native`](https://drive.google.com/corp/drive/folders/1s5j2kx0yyYxLsdLNyBrhNJvkzmaUgOwD) folder. If you don't have the `adapters` folder, follow steps one, two, and three in [Install Google Mobile Ads SDK for React Native](https://developers.google.com/admob/react-native/quick-start.md.txt#install). - [Set up AdMob Mediation](https://developers.google.com/admob/react-native/mediation.md.txt). ## Step 1: Set up configurations in maio UI First, [sign up](https://docs.google.com/forms/d/e/1FAIpQLScSrlf8JTwTdvJjaLjc3v4z8PfunngKALSBdRf3EfyctdMY3Q/viewform) or [log in](https://maio.jp/publisher/login) to your maio account. Click the **Application management** button on the left sidebar and click on **New app**. ![](https://developers.google.com/static/admob/images/mediation/maio/new-app.png) Select the tab corresponding to your preferred **Ad Type**. ### Interstitial Enter the **Name** of your app, select the platform and provide your **App URL** . Select **Video interstitial** as the **Ad Type** , and then click **Update**. ### Android ![](https://developers.google.com/static/admob/images/mediation/maio/interstitial_Android.png) ### iOS ![](https://developers.google.com/static/admob/images/mediation/maio/interstitial_iOS.png) **Note:** Interstitial ads from maio are skippable by default. ### Rewarded Enter the **Name** of your app, select the platform and provide your **App URL** . Select **Video Rewards** as the **Ad Type** , and then click **Update**. ### Android ![](https://developers.google.com/static/admob/images/mediation/maio/rewarded_Android.png) ### iOS ![](https://developers.google.com/static/admob/images/mediation/maio/rewarded_iOS.png) **Note:** Rewarded Video ads from maio are **NOT** skippable by default. In the **Application Management** page, make a note of the **Media ID**. It's needed to set up your AdMob ad unit in the next section. ### Android ![](https://developers.google.com/static/admob/images/mediation/maio/media_id_Android.png) ### iOS ![](https://developers.google.com/static/admob/images/mediation/maio/media_id_iOS.png) In the **Zone Management** page, make a note of the **Zone ID**. It will also be needed to set up your AdMob ad unit in the next section. ### Android ![](https://developers.google.com/static/admob/images/mediation/maio/zone_id_Android.png) ### iOS ![](https://developers.google.com/static/admob/images/mediation/maio/zone_id_iOS.png) (Waterfall only) In addition to **Media ID** and **Zone ID** , you will need **API ID** and **API KEY** to set up your ad unit ID for mediation. In **Reporting API page** , make a note of **API ID** and **API KEY** .
![](https://developers.google.com/static/admob/images/mediation/maio/api_id_key.png) > [!NOTE] > **Note:** (Waterfall only) If this is your first time setting up your maio account, you may need to contact maio's support team in order for your **API ID** and **API KEY** to be issued to you. ## Step 2: Set up maio demand in AdMob UI ### Configure mediation settings for your ad unit ### Android For instructions, see step 2 in the guide for [Android](https://developers.google.com/admob/android/mediation/maio.md.txt#step-2). ### iOS For instructions, see step 2 in the guide for [iOS](https://developers.google.com/admob/ios/mediation/maio.md.txt#step-2). ## Step 3: Import the maio SDK and adapter > [!NOTE] > **Note:** Failure to integrate the compatible maio and Google Mobile Ads SDK versions might lead to build issues. In your project's root directory, install the Google Mobile Ads SDK for React Native mediation adapter for maio. Complete the following: 1. Copy the Google Mobile Ads SDK for React Native adapter tar file from the `gma-sdk-react-native/adapters/maio/` directory into your project's `local_packages/` directory. If you don't have the `adapters` folder, see [Prerequisites](https://developers.google.com/admob/react-native/mediation/maio.md.txt#prerequisites). ```bash mkdir -p local_packages cp EXTRACT_DIR/gma-sdk-react-native/adapters/maio/gma-mediation-maio-0.1.0.tgz local_packages/ ``` Replace EXTRACT_DIR with the path to the directory where you extracted the archive. 2. Install the adapter package using your preferred package manager: ### npm ```bash npm install ./local_packages/gma-mediation-maio-0.1.0.tgz ``` ### yarn ```bash yarn add ./local_packages/gma-mediation-maio-0.1.0.tgz ``` 3. If you're building for Android, add the following repository to the `build.gradle` file in your project's `android` directory: ```groovy repositories { google() mavenCentral() maven { url = uri("https://imobile-maio.github.io/maven") } } ``` ## Step 4: Add required code ### Android No additional code is required for maio integration. ### iOS ### SKAdNetwork integration Follow [maio's documentation](https://github.com/imobile-maio/maio-iOS-SDK#skadnetworkid) to add the SKAdNetwork identifiers to your project's `Info.plist` file. ## Step 5: Test your implementation ### Enable test ads Make sure you [register your test device](https://developers.google.com/admob/react-native/test-ads.md.txt#enable_test_devices) for AdMob. Publishers using version 7.26.0 or higher of Google Mobile Ads SDK for React Native will automatically receive test ads from maio on phones and tablets registered as [test devices](https://developers.google.com/admob/react-native/test-ads.md.txt#enable_test_devices) when making requests. > [!IMPORTANT] > **Important:** Disable test mode for AdMob and maio before releasing your app. ### Verify test ads To verify that you are receiving test ads from maio, enable [single ad source testing](https://developers.google.com/admob/react-native/ad-inspector#single_ad_source_testing) in ad inspector using the **maio (Waterfall)** ad source(s). ## Error codes If the adapter fails to receive an ad from maio, publishers can check the underlying error from the ad response using [`ResponseInfo`](https://developers.google.com/admob/react-native/response-info.md.txt) under the following classes: ### Android | Format | Class name | |---|---| | Interstitial | jp.maio.sdk.android.mediation.admob.adapter.Interstitial | | Rewarded | jp.maio.sdk.android.mediation.admob.adapter.Rewarded | ### iOS | Format | Class name | |---|---| | Interstitial | GADMMaioInterstitialAdapter | | Rewarded | GADMMaioRewardedAdapter | Here are the codes and accompanying messages thrown by the maio adapter when an ad fails to load: ### Android | Error code | Reason | |---|---| | 0-10 | maio returned an SDK-specific error. See [code](https://github.com/googleads/googleads-mobile-android-mediation/blob/cd4c87f4e61adcf1bacc69da8c1f69d972105672/ThirdPartyAdapters/maio/maio/src/main/java/com/google/ads/mediation/maio/MaioMediationAdapter.java#L64-L78) and maio's [documentation](https://github.com/imobile-maio/maio-Android-SDK/wiki/API-Reference-(EN)#failnotificationreason-enum-1) for more details. | | 101 | Maio does not have an ad available. | | 102 | Invalid server parameters (e.g. missing Placement ID). | | 103 | Context used to load an ad was not an \`Activity\` instance. | ### iOS | Error code | Reason | |---|---| | 0-10 | maio returned an SDK-specific error. See maio's [code](https://github.com/imobile-maio/maio-iOS-SDK/blob/master/Maio.xcframework/ios-arm64_armv7/Maio.framework/Headers/MaioDelegate.h) for more details. | | 101 | maio doesn't yet have an ad available. | | 102 | Invalid server parameters (e.g. missing Placement ID). | | 103 | The maio adapter does not support the ad format being requested. | | 104 | An ad is already loaded for this network configuration. | #### Version 0.1.0 - Initial release. - Supports [maio Android adapter version 2.0.9.1](https://github.com/googleads/googleads-mobile-android-mediation/blob/main/ThirdPartyAdapters/maio/CHANGELOG.md#version-2091). - Supports [maio iOS adapter version 2.2.1.2.1](https://github.com/googleads/googleads-mobile-ios-mediation/blob/main/adapters/Maio/CHANGELOG.md#version-22121).