React DFP Documentation

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

 shouldRefresh

Use the property shouldRefresh to have grained control of what ad slots will refresh when calling DFPManager.refresh().

This property takes a function that returns a boolean as argument. DFPManager.refresh() will check what ads should be refreshed calling it:

  1. when it returns true: the ad is refreshed (default if you don't pass this prop).
  2. when false: the ad is not refreshed.

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

export default class RefreshableAds extends Component {
  componentDidMount() {
    this.interval = window.setInterval(
      () => { DFPManager.refresh(); },
      15000,
    );
  }

  componentWillUnmount() {
    window.clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <DFPSlotsProvider dfpNetworkId="9999">
          <div>
            <AdSlot
              sizes={[[728, 90], [300, 250]]}
              adUnit="test/non-refreshable"
              shouldRefresh={() => false}
            />
          </div>
          <div />
          <AdSlot sizes={[[300, 250]]} adUnit="test/refreshable" />
        </DFPSlotsProvider>
      </div>
    );
  }
}

Notes:

  1. Line 21: Declare a toplevel <DFPSlotProvider>. This instance provides two things: 1) Basic configuration params that are shared among all the ads in the page and 2) Takes care of initializing ads as soon as the component gets mounted.
  2. Lines 23-27: We define a non-refreshable ad. This will not be refreshed when calling DFPManager.refresh();. Notice that the prop shouldRefresh receives a function that gets evaluated syncrhonously; this function is called by DFPManager.refresh() each time this last one is executed, the component is only refreshed when this fcn returns true.
  3. Line 30: define a refreshable ad-slot using the <AdSlot> component.
  4. Lines 8-11: setup an interval loop that refreshes the ads rendered in this page every 15 seconds.
  5. Lines 15: clear internal loop before unmounting this component.