React DFP Documentation

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

 renderOutOfThePage

Use the property renderOutOfThePage to configure whether a given <AdSlot> should be rendered out of the page or not.

This property is disabled by default. For details about the out-of-page creatives please refer to the official dfp documentation:link.

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

Notes:

  1. Lines 8: configure a global dfpNetworkId via <DFPSlotProvider>.
  2. Line 10: we define another ad slot using the <AdSlot> component.
  3. Line 13: we define an ad-slot using the <AdSlot> component. In this case, we configure the slot to render out-of-page using the property: 'renderOutOfThePage'.