Skip to content
ajacquemin edited this page Jul 9, 2019 · 2 revisions

Contents

AdvertisingProvider

The AdvertisingProvider component acts as a wrapper around a React layout that contains AdvertisingSlot components, which display the ads.

It handles all the interaction with the DFP ad server and is required for the advertising slots to work.

Props

Name Type Required Default Description
active Boolean true If set to false, the advertising provider is deactivated and no ads will be served
shouldRefresh Boolean false If set to true, will refresh if config is edited
config AdvertisingConfigPropType Yes, if active Refer to section Configuration for details
plugins Array Refer to section Plugins for details

Usage

import React from "react";
import { AdvertisingProvider } from "react-prebid";

export default ({ children }) => <AdvertisingProvider active={false}>{children}</AdvertisingProvider>;

Refer to the Usage page for a more elaborate example.

AdvertisingSlot

Each AdvertisingSlot component provides a div element which is filled with an ad from the DFP ad server.

Props

Name Type Required Default Description
id String Yes The div element's ID, used by DFP to render ads, references Configuration#id
style Object Use this for styling the slot using CSS properties, e.g. to add a background color
className String Use this for specifying a CSS class for styling the slot
customEventHandlers Object Refer to section Custom Events for details

Usage

import React from "react";
import { AdvertisingSlot } from "react-prebid";

export default () => <AdvertisingSlot id="my-id" />;

Refer to the Usage page for a more elaborate example.

connectToAdServer

This utility function allows you to create your own advertising slot component instead of using the provided AdvertisingSlot component, giving you more freedom in your implementation.

You can pass any React component to the function to create a React component that is connected to the ad server.

The React component you pass to the function needs to have an activate property, which is a function to be called, for example, when the component mounts. Calling activate causes the DFP ad server to fill the slot with an ad.

The activate prop is created and passed to your component when you wrap it using connectToAdServer.

Usage

Refer to the source code of the AdvertisingSlot component for a reference implementation.

Here is a minimal example:

import React, { Component } from 'react';
import { connectToAdServer } from 'react-prebid';

class MyAdSlot extends Component {
    componentDidMount() {
        this.props.activate('my-ad-id');
    }
    render() {
        return <div id="my-ad-id" />;
    }
}

export default connectToAdServer(MyAdSlot);

Usage | Configuration

Clone this wiki locally