React DFP Documentation

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

 collapseEmptyDivs

You can use this property to collapse container divs when their ads are not filled.

This property is disabled by default, means that the ads are not getting collapsed unless you explicitly pass it.

For more information refere to the gpt official 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" collapseEmptyDivs>
        <div className="desktop-ads">
          <AdSlot sizes={[[728, 90], [300, 250]]} adUnit="homepage/1" />
        </div>
        <div className="mobile-ads">
          <AdSlot sizes={[[320, 50], [300, 50]]} adUnit="homepage/mobile" />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 8 configure default / global properties using the<DFPSlotProvider>. We set the property collapseEmptyDivsso divs will collapsed when the ads are not rendered.
  2. Line 10 and 13: we define two ad-slots using the <AdSlot> component.