React DFP Documentation

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

 disableInitialLoad

Use this property to prevent ads from loading on initial page load.

As detailed in the gpt documentation (link below), if this option is enabled, ads can be loaded with manual calls to DFPManager.refresh().

For more information refer to the gpt official documentation:link.

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


export default () => {
  useEffect(
    () => {
      setTimeout(() => DFPManager.refresh(), 3000);
    },
    [],
  );
  return (
    <DFPSlotsProvider dfpNetworkId="9999" disableInitialLoad>
      <div className="desktop-ads">
        <AdSlot sizes={[[728, 90], [300, 250]]} adUnit="homepage/1" />
      </div>
      <div className="mobile-ads">
        <AdSlot sizes={[[320, 50], [300, 50]]} adUnit="homepage/mobile" />
      </div>
    </DFPSlotsProvider>
  );
};

Notes:

  1. Line 13: configure default / global properties using the<DFPSlotProvider>. Notice we pass the propertydisableInitialLoad so ads should not load on initial page load.
  2. Lines 15 and 18: we define two ad-slots using the<AdSlot> component.
  3. Line 8: we manually load ads by calling  DFPManager.refresh() three seconds after the ad slots were created.