Integration of Google Publisher Tag - react

Integrating Google Publisher Tags (GPT) from Google Ad Manager (GAM) into a React Native application involves setting up GAM, integrating the GPT library, defining ad units, and testing ad delivery. Here's a step-by-step guide to help you integrate GPT and test ad delivery in your React Native application:

Step 1: Set Up Google Ad Manager (GAM)

  1. Create a Google Ad Manager account if you don't have one:
  2. Set up an application in GAM and create ad units as described in previous sections.

Step 2: Integrate Google Publisher Tags (GPT) Library

  1. Install the react-native-google-ima package using npm:
    npm install react-native-google-ima --save
  2. Link the module using react-native link react-native-google-ima or auto-linking (React Native 0.60+).

Step 3: Configure GPT in Your React Native App

  1. Import the necessary modules in your JavaScript/TypeScript file where you want to display ads:
    import {
    } from 'react-native-google-ima';
  2. Initialize GPT with your Ad Manager ad unit ID and ad size:
    const adUnitID = '/YOUR/AD_UNIT_ID';
  3. Load and display the ad:
        onAdLoaded={() => {
            // Ad has loaded
        onAdFailedToLoad={(error) => {
            console.error('Ad failed to load', error);
        }} />

Step 4: Test Ad Delivery

  1. Use Google's test ad unit IDs for testing. Replace "YOUR/AD_UNIT_ID" with the appropriate test ad unit ID:
    • Test banner ad: /6499/example/banner
    • Test interstitial ad: /6499/example/interstitial
  2. Make sure you are not using real ad unit IDs during testing to prevent serving live ads.
  3. Run your React Native app on an emulator or a real device to test the ad delivery. Ensure you have an active internet connection.

Additional Steps

  • Implement GPT ad event listeners to handle ad lifecycle events, such as ad loaded, ad clicked, etc.
  • Test different ad formats, sizes, and targeting options using the GPT library.

Please refer to the react-native-google-ima GitHub repository for more detailed information, guides, and code examples on setting up Google Publisher Tags (GPT) with React Native.

© 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.