React DFP Documentation

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

 reload

Use the reload(...slotId) method to manually reload arbitrary ad slots in the page.

This method can be called not passing any parameter at all, one or multiple parameters:

  • No parameters: All the ads in the page are reloaded.
  • One or more slotIds: In this case only those ads pointed by the provided slotIds are reloaded.

About the reload process: The ads are reloaded by following the steps described below:

  1. Destroy ad slots.
  2. Initialize ad slots again using the same parameters already passed via <AdSlot> and DFPManager.

Note: 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:

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


export default class Example extends Component {

  componentDidMount() {
    setTimeout(() => {
      DFPManager.reload('test1', 'test2');
    }, 5000);
  }

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

Notes:

  1. Lines 17, 20, 23: we define three ad slots using the&nsp;<AdSlot> component.
  2. Lines 15: Given that we declare a <DFPSlotsProvider>  component, the ad slots are loaded as soon as the component is mounted.
  3. Lines 8-10: We tie a callback to a timer that expires 5 seconds after the component is mounted (and its ads initialized); this function uses the method DFPManager.reload(...) to arbitrary reload the ad slots: 'test1', 'test2'.