React DFP Documentation

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

 Basic Example

Using react-dfp to serve google dfp ads should should be pretty straightforward in most the cases. The library is composed of two main react components and a javascript library:

  1. DFPSlotsProvider
  2. AdSlot
  3. DFPManager

You will find that these two components are really easy to show. Below, there is an example of how to build and serve ads in your site using them.

Just keep in mind the following two concepts:

- DFPSlotsProvider: this component is only meant to configure global options, it follows the context provider pattern ( see this link for details ), you should only declare and mount one instance of this component per page (tipically as higher as possible on the tree so all the nodes can access the context variables.)

- AdSlot: this component is meant to define ad slots in your application.

- DFPManager: this library makes an abstraction of the gpt library and also takes care of pulling the gpt javascripts when needed. Its API is designed to support both: react-dfp/AdSlot/DFPSlotProvider components and also any custom call/invocation that your application may do (for instance, see the refreshable ads example ). Of course, for most of the cases the two components listed above will suffice and, likely, you will not have to deal with this library at all.

Example:

ADS GO HERE...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react';
import { DFPSlotsProvider, AdSlot } from 'react-dfp';


export default class Example extends Component {
  render() {
    return (
      <DFPSlotsProvider dfpNetworkId="9999">
        <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. Lines 8 configure default / global properties using the <DFPSlotProvider>.
  2. Line 10: define an ad-slot using the <AdSlot> component.
  3. Line 13: define another ad-slot using the <AdSlot> component.