React-ad-manager NPM

Demo

Installation

Install the library using your favorite package manager:

    npm install react-ad-manager

or using:

    yarn add react-ad-manager

Getting Started

First add the Google Publisher Tags script on your application

import { AdScript } from 'react-ad-manager'
;<head>
  <AdScript />
</head>

or using:

<head>
  <script
    async
    src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'
  ></script>
</head>

then, create the Ad component for define ad slot

    import { Ad } from react-ad-manager

    <Ad
        adUnit='/6355419/Travel/Europe'
        name='div-name'
        size={[300, 250]}
    />

Ad Props

    import { Ad } from react-ad-manager

    <Ad
        adUnit='/6355419/Travel/Europe'
        name='div-name'
        size={[
            [[1024, 768], [[750, 200], [728, 90]]],
            [[640, 480], [[300, 250]]],
        ]}
        target={[['color', 'red']]}
        refreshTimer={5000}
        type='INTERSTITIAL'
        eventImpressionViewable={(e) => console.log(e.slot)}
        eventSlotOnload={(e) => console.log(e.slot)}
        eventSlotRenderEnded={(e) => console.log(e.slot)}
        eventSlotRequested={(e) => console.log(e.slot)}
        eventSlotResponseReceived={(e) => console.log(e.slot)}
        eventSlotVisibilityChanged={(e) => console.log(e.slot)}
    />

`adUnit`

Ad unit path loaded from Google Ad Manager.

type: string
required: true

`name`

Name used in div id

type: string
required: true

`size`

Size is defined by single, multi, fluid or responsive. See more information at Ad sizes - Google Developers .

type: SingleSize | MultiSize | FluidSize | ResponsiveSize
required: true

SingleSize: number, number MultiSize: Array<number, number> FluidSize: 'fluid' Responsive: Array<[ number, number, Array<number, number> ]>

`target`

Configure targets in slot-level

type: Array<string, string | Array\>
required: false

`refreshTimer`

The refreshTimer prop defines how often the ad are updated. It activates a function where the ads are updated in a loop and while displayed on the screen. The prop is set in milliseconds.

type: number | string
required: false

`type`

Define Out-of-page formats supported by Google Tag Manger. See more information at Enum Types - Google Developers.

type: string
required: false
value: 'INTERSTITIAL' | 'TOP_ANCHOR' | 'BOTTOM_ANCHOR' | undefined

`eventSlotOnload`

This event is fired when the ad is displayed. When rendering ads in sync rendering mode SlotOnloadEvent won't be fired.

type: callback(event)
required: false

`eventSlotVisibilityChanged`

This event is fired whenever the on-screen percentage of an ad slot's area changes.

type: callback(event)
required: false

`eventSlotRenderEnded`

This event is fired when the ad unit is injected into a slot. This event will occur before the ad are fetched, so the ad may not be visible yet.

type: callback(event)
required: false

`eventSlotRequested`

This event is fired when an ad has been requested for a particular slot.

type: callback(event)
required: false

`eventSlotResponseReceived`

This event is fired when an ad response has been received for a particular slot.

type: callback(event)
required: false

Global Props

It is possible set global props using the component <AdConfig>:

    import { AdScript, AdConfig } from react-ad-manager
    <head>
        <AdScript />

        <AdConfig
            networkCode={1}
            target={[['global', 'true']]}
            collapseEmptyDivs={true}
            eventImpressionViewable={(e) => console.log(e.slot)}
            eventSlotOnload={(e) => console.log(e.slot)}
            eventSlotRenderEnded={(e) => console.log(e.slot)}
            eventSlotRequested={(e) => console.log(e.slot)}
            eventSlotResponseReceived={(e) => console.log(e.slot)}
            eventSlotVisibilityChanged={(e) => console.log(e.slot)}
        />
    </head>