React DFP Documentation

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

 dfpNetworkId

Use the property dfpNetworkId to configure the dfp id you'd like to use in your app. There are two possible ways in which you can configure this prop:

  1. via the <DFPSlotsProvider /> component
  2. or via <AdSlot />

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={[[320, 50], [300, 50]]} 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, given that we don't pass the prop, this ad picks the dfpNetworkId provided via <DFPSlotProvider>
  3. Line 13: we define another ad-slot, this time we set a different dfp-id using the property dfpNetworkId.