React DFP Documentation

  ·  Build Status Npm Downloads Minizipped size GitHub license Dependencies
Minizipped size
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
import React, { Component } from 'react';
import { DFPSlotsProvider, AdSlot } from 'react-dfp';


export default class Example extends Component {
  render() {
    return (
      <DFPSlotsProvider
        dfpNetworkId="9999"
        targetingArguments={{ customKw: 'basic example' }}
        sizeMapping={[
          { viewport: [1024, 768], sizes: [[728, 90], [300, 250]] },
          { viewport: [900, 768], sizes: [[300, 250]] },
        ]}
      >
        <div className="primary-ads">
          <AdSlot sizes={[[728, 90], [300, 250]]} adUnit="homepage/1" />
        </div>
        <div className="secondary-ads">
          <AdSlot slotId="test-id" sizes={[[320, 50], [300, 50]]} adUnit="homepage/mobile" />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 8-15: configure default / global properties using the <DFPSlotProvider>.
  2. Line 17: define an ad-slot using the <AdSlot> component.
  3. Line 20: define a second ad-slot using the <AdSlot> component. We use the propertyslotId to define a custom id for dom element that contains the ad (a div with id="test-id").