Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@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

111

Version

2.0.2

License

MIT

Unpacked Size

567 kB

Total Files

40

Last publish

Collaborators

  • avatar
  • avatar