React DFP Documentation

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

 load

Use the load(...slotId) method to manually initialize the ads in your page. The behavior of this method is the following:

  1. Pull and load the google gpt javascripts (in case that this has not been done yet).
  2. When not passing any arguments this method will initialize all the ads in the page.
  3. You can also pass any arbitrary number of slot Ids (strings), in that case this method will only initialize the pointed slots.

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
29
30
import React, { Component } from 'react';
import { AdSlot, DFPManager } from 'react-dfp';


export default class Example extends Component {
  componentDidMount() {
    setTimeout(() => {
      DFPManager.load('test1', 'test2');
    }, 5000);
    setTimeout(() => {
      DFPManager.load();
    }, 15000);
  }

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

Notes:

  1. Lines 19,22, 25: we define three ad slots using the <AdSlot>component.
  2. Lines 7-9: manually load ad slots 'test1' and 'test2' 5 seconds after the page loads. Notice that we pass this ids when calling DFPManager.load(...args) .
  3. Lines 10-12: Ten seconds after (that's fifteen after the page loads), we initialize the rest of the available ads in the page, in this case only 'test3'. Notice that this is the default behavior when not passing any arguments to  DFPManager.load(...args).