React DFP Documentation

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

 lazyLoad

Use the property lazyLoad to lazy load the ads in your pages. This technique improves both: page load time and ads viewability. Accepted values for this prop are:

  1. false (default): Lazy load is disabled.
  2. true: lazy loading is enabled, this means that ad slots will not render until they approach user's viewport.
  3. object: additional options to customize lazy the loading behavior. Accepted attributes are: fetchMarginPercent (number), renderMarginPercent (number) and mobileScaling (number). Please see the gpt documentation for details.

The example showed below is just an implementation of the example provided by the google gpt docs (but, of course using react-dfp):  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
23
24
import React, { Component } from 'react';
import { DFPSlotsProvider, AdSlot } from 'react-dfp';

export default class Example extends Component {
  render() {
    return (
      <DFPSlotsProvider
        lazyLoad={{ fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 }}
        singleRequest={false}
        dfpNetworkId="9999"
      >
        <div className="desktop-ads">
          <AdSlot sizes={[[728, 90]]} adUnit="sports" />
        </div>
        <div style={{ height: '300vh' }} />
        <AdSlot sizes={['fluid']} adUnit="news" />
        <div style={{ height: '900vh' }} />
        <div className="mobile-ads">
          <AdSlot sizes={[[160, 600]]} adUnit="weather" />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 8-11 configure default / global properties using the<DFPSlotProvider>. We use the property lazyLoad to enable lazy loading ads and to pass configurations to customize the behavior (see documentation above for details).
  2. Lines 13,16,19: declare three ad-slots using the <AdSlot> component.