This guide shows you how to use Google Mobile Ads SDK for React Native to load and display ads from Chartboost using [mediation](https://developers.google.com/admob/react-native/mediation.md.txt), covering waterfall integrations. It covers how to add Chartboost to an ad unit's mediation configuration, and how to integrate the Chartboost SDK and adapter into a React Native app. ## Supported integrations and ad formats The AdMob mediation adapter for Chartboost has the following capabilities: | Integration || |---|---| | Bidding | | | Waterfall | Yes | | App Open | | | Banner | Yes | | 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 13.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 Chartboost UI [Sign up](https://platform.chartboost.com/signup) for a Chartboost account and [log in](https://platform.chartboost.com/login) once your account is verified. Then, navigate to the **Apps management** tab. ![Chartboost apps dashboard](https://developers.google.com/static/admob/images/mediation/chartboost/chartboost_dashboard_apps.png) Click the **Add new app** button to create your app. ![Apps Management](https://developers.google.com/static/admob/images/mediation/chartboost/apps_management.png) Fill out the rest of the form and click the **Add App** button to finalize your app. ![New app form](https://developers.google.com/static/admob/images/mediation/chartboost/new_app_form.png) After your app is created, you will be directed to its dashboard. Take note of the **App ID** and **App Signature** of your app. > [!NOTE] > **Note:** You can go to your app's dashboard by navigating to the **Apps management** tab shown earlier and selecting your app. ### Android ![App settings](https://developers.google.com/static/admob/images/mediation/chartboost/app_settings_Android.png) ### iOS ![App settings](https://developers.google.com/static/admob/images/mediation/chartboost/app_settings_iOS.png) AdMob requires the Chartboost **User ID** and **User Signature** for setting up your AdMob ad unit ID. You can find these parameters by clicking **Chartboost mediation** on the Chartboost UI. ![Chartboost mediation dashboard](https://developers.google.com/static/admob/images/mediation/chartboost/chartboost_dashboard_mediation.png) Navigate to the **Resources \> API Explorer** tab and take note of your **User ID** and **User Signature** located under the **Authentication** section. ![Chartboost api explorer](https://developers.google.com/static/admob/images/mediation/chartboost/api_explorer.png) ### Update your app-ads.txt [Authorized Sellers for Apps app-ads.txt](https://iabtechlab.com/wp-content/uploads/2019/03/app-ads.txt-v1.0-final-.pdf) is an IAB Tech Lab initiative that helps ensure your app ad inventory is only sold through channels you've identified as authorized. To prevent a significant loss in ad revenue, you'll need to implement an `app-ads.txt` file. If you haven't done so already, [set up an app-ads.txt file for your app](https://support.google.com/admob/answer/9363762). To implement `app-ads.txt` for Chartboost, see [app-ads.txt](https://docs.chartboost.com/en/monetization/publishing/app-ads-txt/). ### Turn on test mode You can enable test mode on your app by navigating to the **Apps management** tab from the Chartboost UI, selecting your app from the list and clicking on **Edit app settings**. ### Android ![Edit app settings](https://developers.google.com/static/admob/images/mediation/chartboost/app_settings_edit_Android.png) ### iOS ![Edit app settings](https://developers.google.com/static/admob/images/mediation/chartboost/app_settings_edit_iOS.png) From your app's settings, you can toggle **Test mode** on your app. ![Chartboost test mode](https://developers.google.com/static/admob/images/mediation/chartboost/test_mode.png) Once test mode is enabled, you can request ads using the ad unit ID created earlier and receive a Chartboost test ad. After you are able to receive Chartboost test ads, your app will be placed on Chartboost's [Publisher App Review](https://docs.chartboost.com/en/monetization/publishing/publisher-app-review/). In order for monetization on Chartboost to work, the publisher app review will need to be approved by Chartboost. ## Step 2: Set up Chartboost 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/chartboost.md.txt#step-2). ### iOS For instructions, see step 2 in the guide for [iOS](https://developers.google.com/admob/ios/mediation/chartboost.md.txt#step-2). ### Add Chartboost to GDPR and US state regulations ad partners list > [!IMPORTANT] > **Important:** Verify that you have **Account Management** permission to complete the configuration for EU Consent and GDPR, US State regulations, and User Messaging Platform. See [Manage user access to your > account](https://support.google.com/admob/answer/2784628) for details. Follow the steps in [European regulations settings](https://support.google.com/admob/answer/10113004#adding_ad_partners_to_published_gdpr_messages) and [US state regulations settings](https://support.google.com/admob/answer/14125907) to add **Chartboost** to the European and US state regulations ad partners list in the AdMob UI. ## Step 3: Import the Chartboost SDK and adapter > [!NOTE] > **Note:** Failure to integrate the compatible Chartboost and Google Mobile Ads SDK for React Native versions might lead to build issues. In your project's root directory, install the Google Mobile Ads SDK for React Native mediation adapter for Chartboost. Complete the following: 1. Copy the Google Mobile Ads SDK for React Native adapter tar file from the `gma-sdk-react-native/adapters/chartboost/` 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/chartboost.md.txt#prerequisites). ```bash mkdir -p local_packages cp EXTRACT_DIR/gma-sdk-react-native/adapters/chartboost/gma-mediation-chartboost-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-chartboost-0.1.0.tgz ``` ### yarn ```bash yarn add ./local_packages/gma-mediation-chartboost-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://cboost.jfrog.io/artifactory/chartboost-ads/") } } ``` ## Step 4: Implement privacy settings on Chartboost SDK ### EU consent and GDPR To [comply with the Google EU User Consent Policy](https://www.google.com/about/company/consentstaging.html), you must make certain disclosures to your users in the European Economic Area (EEA), the UK, and Switzerland, and obtain their consent for the use of cookies or other local storage where legally required, and for the collection, sharing, and use of personal data for ads personalization. This policy reflects the requirements of the EU ePrivacy Directive and the General Data Protection Regulation (GDPR). You are responsible for verifying that consent is propagated to each ad source in your mediation chain. Chartboost React Native adapter version 0.1.0 and later supports passing GDPR consent signals from [UMP SDK](https://developers.google.com/admob/react-native/privacy.md.txt) and consent management platforms that integrate with [Google's Additional Consent specification](https://support.google.com/admob/answer/9681920) to Chartboost SDK. For more information, see SDK Privacy methods for [Android](https://docs.chartboost.com/en/monetization/integrate/android/sdk-privacy-methods/) and [iOS](https://docs.chartboost.com/en/monetization/integrate/ios/sdk-privacy-methods/). ### US states privacy laws [US states privacy laws](https://support.google.com/admob/answer/9561022) require giving users the right to opt out of the "sale" of their "personal information" (as the law defines those terms), with the opt-out offered through a prominent "Do Not Sell My Personal Information" link on the "selling" party's homepage. The [US states privacy laws compliance guide](https://developers.google.com/admob/react-native/privacy/us-states) offers the ability to enable [restricted data processing](https://privacy.google.com/businesses/rdp/) for Google ad serving, but Google is unable to apply this setting to each ad network in your mediation chain. Therefore, you must identify each ad network in your mediation chain that may participate in the sale of personal information and follow guidance from each of those networks to ensure compliance. The following sample code sets data use consent to `OptInSale`. If you choose to call this method, it is recommended that you do so prior to requesting ads using Google Mobile Ads SDK for React Native. ```javascript import { ChartboostCCPAConsent, ChartboostMediation, } from '@google/gma-mediation-chartboost'; // ... ChartboostMediation.addCCPADataUseConsent(ChartboostCCPAConsent.OPT_IN_SALE); ``` ## Step 5: Add required code ### Android No additional code is required for Chartboost integration. ### iOS ### SKAdNetwork integration Follow [Chartboost's documentation](https://docs.chartboost.com/en/monetization/integrate/ios/upgrading-the-sdk/#enable-skadnetwork) to add the SKAdNetwork identifiers to your project's `Info.plist` file. ## Step 6: 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 and [enable test mode](https://developers.google.com/admob/react-native/mediation/chartboost.md.txt#turn-on-test-mode) in Chartboost UI. > [!IMPORTANT] > **Important:** Disable test mode for AdMob and Chartboost before releasing your app. ### Verify test ads To verify that you are receiving test ads from Chartboost, enable [single ad source testing](https://developers.google.com/admob/react-native/ad-inspector#single_ad_source_testing) in ad inspector using the **Chartboost (Waterfall)** ad source(s). ## Optional Steps ### Android #### Permissions For optimal performance, Chartboost recommends adding the following optional permissions to your app's `AndroidManifest.xml` file: ```xml ``` ### iOS No additional steps are required for iOS integration. ## Error codes If the adapter fails to receive an ad from Chartboost, 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 ```java com.google.ads.mediation.chartboost.ChartboostAdapter com.google.ads.mediation.chartboost.ChartboostMediationAdapter ``` ### iOS ```objective-c GADMAdapterChartboost GADMediationAdapterChartboost ``` Here are the codes and accompanying messages thrown by the Chartboost adapter when an ad fails to load: ### Android | Error code | Reason | |---|---| | 0-99 | Chartboost SDK returned an error. | | 101 | The requested ad size does not match a Chartboost supported banner size. | | 102 | Chartboost can only load 1 ad per location at a time. | | 103 | Chartboost server parameters configured in the AdMob UI are missing/invalid. | | 104 | The Chartboost interstitial or rewarded ad is not ready to be shown. | ### iOS | Error code | Reason | |---|---| | 101 | Chartboost server parameters configured in the AdMob UI are missing/invalid. | | 102 | The Chartboost SDK returned an initialization error. | | 103 | The Chartboost ad is not cached at show time. | | 104 | The requested ad size does not match a Chartboost supported banner size. | | 105 | Device's OS version is lower than Chartboost SDK's minimum supported OS version. | | 200-299 | Chartboost SDK cache errors. See [code](https://github.com/googleads/googleads-mobile-ios-mediation/blob/main/adapters/Chartboost/ChartboostAdapter/GADMChartboostError.m#L18-L41) for more details. | | 300-399 | Chartboost SDK show errors. See [code](https://github.com/googleads/googleads-mobile-ios-mediation/blob/main/adapters/Chartboost/ChartboostAdapter/GADMChartboostError.m#L49-L74) for more details. | | 400-499 | Chartboost SDK click errors. See [code](https://github.com/googleads/googleads-mobile-ios-mediation/blob/main/adapters/Chartboost/ChartboostAdapter/GADMChartboostError.m#L76-L95) for more details. | #### Version 0.1.0 - Initial release. - Supports [Chartboost Android adapter version 9.12.0.0](https://github.com/googleads/googleads-mobile-android-mediation/blob/main/ThirdPartyAdapters/chartboost/CHANGELOG.md#version-91200). - Supports [Chartboost iOS adapter version 9.12.0.1](https://github.com/googleads/googleads-mobile-ios-mediation/blob/main/adapters/Chartboost/CHANGELOG.md#version-91201).