GAM setup react

Setting up Google Ad Manager (GAM) for a React Native app involves integrating the GAM SDK into your React Native project, creating ad units, setting up line items and creatives, and displaying ads within your app. Here's a step-by-step guide to help you set up GAM for React Native:

Step 1: Create a Google Ad Manager Account

If you don't have a Google Ad Manager account, you'll need to create one by visiting https://admanager.google.com and signing up.

Step 2: Set Up an Application in Google Ad Manager

  1. Log in to your Google Ad Manager account.
  2. Click on "Inventory" in the left sidebar.
  3. Under "Ad units," click "Ad units."
  4. Click the "+ New ad unit" button.
  5. Fill in the ad unit details, including the name, ad type (e.g., banner, interstitial), size, and targeting options.
  6. Save the ad unit and take note of the ad unit ID.

Step 3: Step 3: Integrate the GAM SDK into Your React Native App

  1. Install the Google Mobile Ads SDK for React Native using npm:
    npm install react-native-google-mobile-ads --save
  2. Link the module using react-native link or auto-linking (React Native 0.60+).

Step 4: Initialize the GAM SDK in Your App

In your app's entry file (e.g., index.js or App.js), import and initialize the GAM SDK:

import { AppRegistry } from 'react-native';
import { GoogleMobileAds } from 'react-native-google-mobile-ads';

GoogleMobileAds.initialize();

Step 5: Request and Display Ads

  1. Create a banner or interstitial ad component in your React Native app:
    import { BannerAd, TestIds, AdEventType } from 'react-native-google-mobile-ads';
    
    
    <BannerAd
        unitId={TestIds.BANNER}
        size={BannerAdSize.BANNER}
        onAdEvent={(event) => {
            if (event.type === AdEventType.LOADED) {
                // Ad has loaded
            }
        }
    } />
  2. Replace unitId with the actual ad unit ID you obtained from GAM.

Additional Steps

  • Customize the ad appearance and behavior using the provided component properties and event listeners.
  • For interstitial ads, use the InterstitialAd component to create and display interstitial ads with appropriate event listeners.
  • Implement ad event listeners to handle ad lifecycle events, such as ad loaded, ad failed to load, ad clicked, etc.

Please refer to the react-native-google-mobile-ads GitHub repository for more detailed information, guides, and code examples on setting up Google Ad Manager with React Native. You can also check our github example.

© 2024 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.