React DFP Documentation

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

 sizes

Use the sizes prop to configure an array of sizes that a given adSlot must support. As demostrated in the following example, each size is defined with a list following this format: [width, height]. This property also supports named sizes (example 'fluid').

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 dfpNetworkId="1999" sizes={[[300, 250], [300, 600], 'fluid']} adUnit="homepage/mobile" />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 8: configure a global dfpNetworkId via <DFPSlotProvider>.
  2. Line 10: we define an ad-slot using the <AdSlot> component. We configure this slot to support the following sizes: 728x90 and 300x250.
  3. Line 13: we define another ad slot, in this case the slot supports the following sizes: 300x250, 300x600 and 'fluid'.