React DFP Documentation

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

 adUnit

Use the adUnit property to configure all the valid adUnitPaths in your ad slots. This property is accepted by both:

  1. the DFPSlotsProvider component
  2. or the AdSlot component

In this prop you should pass a string, that later, when ads are rendered, will be used in combination to your network id (see dfpNetworkId prop) to generate the final adUnitPaths for your slots.

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" adUnit="default/unit/1">
        <div className="desktop-ads">
          <AdSlot sizes={[[728, 90], [300, 250]]} />
        </div>
        <div className="mobile-ads">
          <AdSlot sizes={[[320, 50], [300, 50]]} adUnit="default/unit/2" />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 8: configure a global dfpNetworkId via <DFPSlotProvider>. In this line we define the fallback/default adUnit that all ads in the page will use (excepting those that define their own adUnit prop).
  2. Line 10: we define an ad-slot using the <AdSlot> component, this slot picks the default ad-unit "default/unit/1" defined via<DFPSlotsProvider>. If your carefully in the google debugger this slot's path is "9999/default/unit/1".
  3. Line 13: we define a new ad-slot, this time with a custom adUnit: "default/unit/2".