React DFP Documentation

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

 onSlotRender

The property onSlotRender allows your app to execute custom js-code when creative code is inserted into a given ad slot.

As opposed to many of the other AdSlot props, this property is only supported by this component. The prop accepts a callback function that will be called when the event 'SlotRenderEndedEvent' is fired.

When executing your callback function, react-dfp passes an argument, which is just a plain js 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 'SlotRenderEndedEvent' 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"
            onSlotRender={eventData => console.log('slot 1 rendered!.', eventData)} // eslint-disable-line no-console
          />
        </div>
        <div className="mobile-ads">
          <AdSlot
            sizes={[[320, 50], [300, 50]]}
            adUnit="homepage/mobile"
            onSlotRender={eventData => console.log('slot 2 rendered!.', eventData)}
          />
        </div>
      </DFPSlotsProvider>
    );
  }
}

Notes:

  1. Lines 8-15: configure default / global properties using the <DFPSlotProvider>.
  2. Line 13: define an ad-slot using the <AdSlot> component, configure a function that prints text to the console right after the slot gets rendered.
  3. Line 20: define a second ad-slot using the <AdSlot> component; we use the propertyonSlotRender to configure a function that is executed when the ad is rendered.