React DFP Documentation

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

 autoLoad

The autoLoad autoload property is used to have control of the initializations of the ads when using the<DFPSlotsProvider>. When enabled (default), the ads are initialized in the page as soon as the <DFPSlotsProvider>component is mounted.

In some cases you'll want to postpone ads renderization until some event ocurrs (reacting to any posible user interaction, or timeout, etc).

This property is typically used in combination with the methodDFPManager.load(), that you can use to manually initialize the ads in your page.

Example:

ADS GO HERE...
Main ad Slot
Secondary Ad:

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

export default class RefreshableAds extends Component {
  componentDidMount() {
    setTimeout(() => DFPManager.load(), 10000);
  }

  render() {
    return (
      <div>
        <DFPSlotsProvider dfpNetworkId="9999" adUnit="adunit" autoLoad={false}>
          <div>
            <div> Main ad Slot </div>
            <div>
              <AdSlot sizes={[[728, 90], [300, 250]]} />
            </div>
            <div> Secondary Ad:</div>
            <AdSlot sizes={[[300, 250]]} />
          </div>
        </DFPSlotsProvider>
      </div>
    );
  }
}

Notes:

  1. Line 14: Declare a toplevel <DFPSlotProvider> element. We set the property autoload to false. This means that the ads will no load in the page until we explicitly invoke the methodDFPManager.load().
  2. Lines 18 and 22: we define two ad slots.
  3. Line 8: we use the setTimeout javascript function to trigger an invokation to DFPManager.load() 10 seconds after the component is mounted.