@callosum/react-native-google-ad-manager

    2.0.2 • Public • Published

    react-native-google-ad-manager

    This library integrates Banners for Google Ad Manager. To create issues and PRs please refer to the main repository here.

    Getting started

    For React Native versions < 0.60 use version 0.+ of this library and checkout the corresponding README file.

    $ npm install @callosum/react-native-google-ad-manager --save

    Integration

    Learn how to set up GAM for your app.

    iOS

    Swift

    • Under Build Settings section Build Options set Always Embed Swift Started Libraries to true

    GAM

    • Activate as Ad Manager app by editing your Info.plist
    ...
    + <key>GADIsAdManagerApp</key>
    + <true/>
    ...
    • Add transport security rules in Info.plist
    ...
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoadsForMedia</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
    </dict>
    ...
    

    Android

    • Activate as Ad Manager app
    <manifest>
      <application>
        ...
    +   <meta-data android:name="com.google.android.gms.ads.AD_MANAGER_APP" android:value="true"/>
        ...
      </application>
    </manifest>

    Usage

    Automatic Banner

    This banner component automatically fetches an ad and adds the view when the ad is sucessfully loaded. It also takes care of the cleanup on unmount.

    Props

    type GAMAutomaticBanner = {
      adId: String,
      onAdFailedToLoad: function<error>,
      onAdLoaded: function<object: { height, width }>,
      onAdRequest: function<>,
      adSizes: Array<Array<width, height>>,
      testDeviceIds: Array<string>,
      style: styles,
    }
    

    Example

    import { GAMAutomaticBanner } from '@callosum/react-native-google-ad-manager';
    
    const AdBanner = () => (
      <GAMAutomaticBanner
        adId="/6499/example/banner"
        adSizes={[[320, 50]]}
        testDeviceIds={[RNGAMBanner.simulatorTestId]}
        style={{ height: 50, width: 320 }}
      />
    )

    Banner

    This is a banner component that gives your more access to pure functionality in order to implement dynamic solutions like lazy loading and more performant integrations for repeating units in lists. It implements the same props as the automatic banner.

    Additionally, you have the following methos available:

    loadBanner()

    This loads an ad but does not add it to the view hierarchy.

    destroyBanner()

    This destroys the created / loaded ad.

    addBannerView()

    This adds the native view to the view hierarchy.

    removeBannerView()

    This removes the native view from the view hierarchy.

    Example

    import { useRef } from "react";
    import { RNGAMBanner } from "@callosum/react-native-google-ad-manager";
    
    const AdBanner = () => {
      const _ref = useRef(null);
    
      useEffect(() => {
        _ref.current.loadBanner()
    
        return () => {
          _ref.current.removeBannerView()
          _ref.current.destroyBanner()
        }
      }, [])
    
      return (
        <RNGAMBanner
          adId="/6499/example/banner"
          adSizes={[[300, 250]]}
          testDeviceIds={[RNGAMBanner.simulatorTestId]}
          onAdLoaded={({ height, width }) => {
            _ref.current.addBannerView()
          }}
          onAdFailedToLoad={error => {
            console.log(error)
          }}
          ref={_ref}
          style={{ height: 300, width: 250 }}
        />
      );
    };

    API

    Constants

    Key Values
    simulatorTestId platform specific simulator id
    sizes BANNER, MEDIUM_RECTANGLE

    Install

    npm i @callosum/react-native-google-ad-manager

    DownloadsWeekly Downloads

    38

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    567 kB

    Total Files

    40

    Last publish

    Collaborators

    • eltrusto
    • jobeso