React DFP Documentation

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

 onSlotVisibilityChanged

Use the property onSlotVisibilityChanged to pass a custom callback that will be fired whenever the on-screen percentage of the AdSlot area changes.

When executing your callback, react-dfp will pass also an object with the following format: { slotId, event }:

  1. slotId: id of the current ad slot.
  2. event: gpt event data (see docs in links listed below).

You can find more information about the event "SlotVisibilityChangedEvent" in the 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
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"
            onSlotVisibilityChanged={dfpEventData => console.log('Slot 1: visibility changed.', dfpEventData)}
          />
        </div>
        <div className="mobile-ads">
          <AdSlot
            sizes={[[320, 50], [300, 50]]}
            adUnit="homepage/mobile"
            onSlotVisibilityChanged={dfpEventData => console.log('Slot 2: visibility changed.', dfpEventData)}
          />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 8-15: configure default / global properties using the <DFPSlotProvider>.
  2. Line 13: we define an ad-slot using the <AdSlot> component, and using the prop onSlotVisiblityChanged we configure an callback that will be execute everytime that the event SlotVisibilityChangedEventis fired for this slot.
  3. Line 20: we define a second ad-slot using the <AdSlot>  component, we use the prop onSlotVisiblityChanged we configure an callback that will be execute everytime that the event SlotVisibilityChangedEvent is fired for this slot.