React DFP Documentation

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

 autoReload

Use the property autoReload when the ad slots need to be reloaded as response of updating props passed to the <DFPManager> component.

This property takes a shape, which is composed of a set of keys/props that take boolean values. Ads will be reloaded when any of the props configured with a  true is updated.

  1. dfpNetworkId: false.
  2. personalizedAds: false.
  3. singleRequest: false.
  4. adUnit: false.
  5. sizeMapping: false.
  6. adSenseAttributes: false.
  7. targetingArguments: false.
  8. collapseEmptyDivs: false.
  9. lazyLoad: false.

Notes:

  1. The described behavior will only work when the property: autoLoad, is enabled.
  2. Keep in mind that  reloading is not the same than refreshing ads , this is very important, if you want to address any refreshing behavior please see the following sections:
  3. Under the hood the <DFPSlotsProvided>  calls the method DFPManager.reload(...) to reload the ads; if you want to learn more details about the reload function you can check its documentation: here.

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
31
32
33
34
35
import React, { Component } from 'react';
import { DFPSlotsProvider, AdSlot } from 'react-dfp';

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { lazyLoad: false };
  }

  componentDidMount() {
    setTimeout(() => this.setState({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    }), 3000);
  }

  render() {
    return (
      <DFPSlotsProvider
        lazyLoad={this.state.lazyLoad}
        autoReload={{ lazyLoad: true }}
        singleRequest={false}
        dfpNetworkId="9999"
      >
        <div className="desktop-ads">
          <AdSlot sizes={[[728, 90]]} adUnit="sports" />
        </div>
        <AdSlot sizes={['fluid']} adUnit="news" />
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 7: we configure the default value for the propertylazyLoad.
  2. Lines 29, 31: we declare two ad-slots using the <AdSlot> component.
  3. Lines 22, 27: Configure the global dfp parameter using the <DFPSlotsProvider> component. We use the propertyautoReload to tell to react-dfp that the ads must be reloaded when the value passed for the property lazyLoad changes. Also notice that the initial value for the property lazyLoad is false (we use the component state for this).
  4. Lines 11, 19: we configure a timer to trigger 3 seconds after the ads loaded that updates the value passed to prop lazyLoad. Given our current setup all the ads will be reloaded (destroyed and created again) when the <DFPSlotsProvider> component is rendered again.