React DFP Documentation

  ·  Build Status Npm Downloads Minizipped size GitHub license Dependencies
Minizipped size

 getGoogletag

Use the method DFPManager.getGoogletag() to get the current instance of the gpt api interface object (googletag).

This method returns a promise that resolves when the googletag instance is ready for usage.

Having access to the googlegpt api might be useful in some edge cases, or when you want to make use new options that are still not supported by react-dfp .

Example:

ADS GO HERE...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Component } from 'react';
import { DFPSlotsProvider, AdSlot, DFPManager } from 'react-dfp';


export default class Example extends Component {
  componentDidMount() {
    window.setTimeout(() => {
      DFPManager.getGoogletag().then((googletag) => {
        googletag.cmd.push(() => {
          googletag.pubads().refresh();
        });
      });
    }, 15000);
  }

  render() {
    return (
      <DFPSlotsProvider dfpNetworkId="9999">
        <div className="desktop-ads">
          <AdSlot sizes={[[728, 90], [300, 250]]} adUnit="homepage/1" />
        </div>
        <div className="mobile-ads">
          <AdSlot dfpNetworkId="1999" sizes={[[320, 50], [300, 50]]} adUnit="homepage/mobile" />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 18: configure a global dfpNetworkId via <DFPSlotProvider>.
  2. Line 20,23: we define two ad-slots using the <AdSlot> component.
  3. Lines 7-13: 15 seconds after the page loads, we use the methodDPFManager.getGoogletag() to get the current instance of the googletag api object, and then we use it to refresh the ads in the page.