React DFP Documentation

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

 sizeMapping

Use the property sizeMapping to define a set of alternative sizes that are applied to each adSlot according the browser viewport size. This prop is specially useful when building responsive ads.

As demonstrated in the following example, both components support this feature:

  1. DFPSlotsProvider
  2. AdSlot

You can find more details about the sizemappings in official gpt documentation:  link and link;

Example:

ADS GO HERE...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { Component } from 'react';
import { DFPSlotsProvider, AdSlot } from 'react-dfp';


export default class Example extends Component {
  render() {
    return (
      <DFPSlotsProvider
        dfpNetworkId="9999"
        sizeMapping={[{ viewport: [1024, 768], sizes: [[728, 90], [300, 250]] },
          { viewport: [900, 768], sizes: [[300, 250]] }]}
      >
        <div className="desktop-ads">
          <AdSlot adUnit="homepage/1" sizes={[[728, 90], [300, 250]]} />
        </div>
        <div className="mobile-ads">
          <AdSlot
            adUnit="homepage/2"
            sizes={[[728, 90], [300, 250], [210, 60]]}
            sizeMapping={[{ viewport: [1024, 768], sizes: [[728, 90], [300, 250]] },
              { viewport: [900, 768], sizes: [[300, 250], [210, 60]] }]}
          />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 8-11: setup global config via <DFPSlotProvider>; we define the default sizeMappings for the ads in our: 300x250 when the viewport is between 0x0 and 900x768 and 728x90 and 300x250 when the viewport is between 900x768 and 1024x768.
  2. Line 14: we define an ad-slot using the <AdSlot> component. This box picks the global adSense config passed via <DFPSlotProvider>
  3. Line 17-20: a second ad slot with custom sizeMappings (allow ads of 300x250 and 210x60 when viewport is between 0x0 and 900x768, and allow ads of 728x90 and 300x250 when the viewport is between 900x768 and 1024x768).