React DFP Documentation

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

 configureLazyLoad

Use the method configureLazyLoad(enable, [config]) to lazy load the ads in your pages. This technique improves both: page load time and ads viewability.

This function takes the following parameters:

  1. enable: a boolean that tells whether to enable or not the lazy loading behavior.
  2. config (default null): an optional object with attributes meant to configure the lazy loading behavior. Accepted attributes are: fetchMarginPercent (number), renderMarginPercent (number) and mobileScaling (number). Please see the gpt documentation for details about these attributes.

The example showed below is just an implementation of the example provided by the google gpt docs (but, of course using react-dfp's DFPManager):  link.

Important note: although this method will be always available and is meant for'public usage',
<DFPSlotProvider lazyLoad /> is the recomended way to approach this behavior, please use that one one if possible.

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


export default class Example extends Component {
  componentDidMount() {
    DFPManager.configureLazyLoad(true, {
      fetchMarginPercent: 500,
      renderMarginPercent: 200,
      mobileScaling: 2.0,
    });
    DFPManager.load();
  }

  render() {
    return (
      <div>
        <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>
      </div>
    );
  }
}

Notes:

  1. Lines 19, 22 and 25: we declare three ad-slots using the <AdSlot> component.
  2. Lines 7-12: we manually enable the lazy loading feature and configure the expected behavior using the method )
    DFPManager.configureLazyLoad(bool, [config])
    (see documentation above to get details about each attribute we pass in the config object,  then we initialize ads using the method
    DFPManager.load([id])