Skip to content

Usage with Prebid

Jump to bottom
Joan Manrubia Martínez edited this page Sep 19, 2022 · 3 revisions

On this page, we'll explain the basic usage of react-advertising with Google Publisher Tags (GPT) and Prebid. If you are not using Prebid, refer to the Usage page instead.

Contents

Demo

You can find the complete code of this tutorial online on CodeSandbox.

Screenshot of demo on CodeSandbox.io

Installing the Package

Assuming you already have an application that uses React, install the react-advertising package as a production dependency with npm:

npm install --save react-advertising

Note: Your React version should be at least version 16.3. Older versions of React are not supported.

Including External Libraries

You need to load two external libraries, gpt.js and prebid.js, just the same way you would do with a “classic”, non-React web page.

Note: The Prebid library should at least be version 1.0; older versions of Prebid are not supported.

The script tags that load and initialize these libraries need to be included in your static HTML code.

Example for including the snippets in an HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <script async src="//securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      var googletag = googletag || {};
      googletag.cmd = googletag.cmd || [];
    </script>
    <script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
    <script>
      var pbjs = pbjs || {};
      pbjs.que = pbjs.que || [];
    </script>
  </head>
  <body>
    <!-- rest of your HTML code goes here -->
  </body>
</html>

Important: This example uses a test version of Prebid.js hosted on a CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Prebid.js download page to make sure only the necessary bidder adapters are included.

Adding the Provider

The basic handling of initializing your ad slots and managing the bidding process is done by an AdvertisingProvider component.

You pass your ad slot configuration to this provider, which then initializes Prebid when the page is loaded.

The provider should wrap your main page content, which contains the ad slots.

Example:

import React from 'react';
import { AdvertisingProvider } from 'react-advertising';

const config = {
  slots: [
    {
      path: '/19968336/header-bid-tag-0',
      id: 'div-gpt-ad-1460505748561-0',
      sizes: [[300, 250], [300, 600]],
      bids: [
        {
          bidder: 'appnexus',
          params: {
            placementId: '10433394'
          }
        }
      ]
    },
    {
      path: '/19968336/header-bid-tag-1',
      id: 'div-gpt-ad-1460505661639-0',
      sizes: [[728, 90], [970, 90]],
      bids: [
        {
          bidder: 'appnexus',
          params: {
            placementId: '10433394'
          }
        }
      ]
    }
  ]
};

function MyPage() {
  return (
    <div>
      <AdvertisingProvider config={config}>
        <h1>Hello World</h1>
      </AdvertisingProvider>
    </div>
  );
);

The configuration in this example is taken from the Prebid example page. It configures two ad slots, one that shows a Prebid ad from bidder “appnexus”, the other showing a “house ad” as a fallback when no bids have come back in time.

For details on how to set up the configuration, refer to the documentation's Configuration section.

Note: If you use react-router, you can use one provider per route with different configurations per route (i.e. per page).

Adding the Slots

Finally, with the provider in place, you can add slot components that display the ads from the ad server.

This library includes a component AdvertisingSlot that you can use to put div elements on your page that are filled with creatives from the ad server.

The final code example:

import React from 'react';
import { AdvertisingProvider, AdvertisingSlot } from 'react-advertising';

const config = {
  slots: [
    {
      path: '/19968336/header-bid-tag-0',
      id: 'div-gpt-ad-1460505748561-0',
      sizes: [[300, 250], [300, 600]],
      bids: [
        {
          bidder: 'appnexus',
          params: {
            placementId: '10433394'
          }
        }
      ]
    },
    {
      path: '/19968336/header-bid-tag-1',
      id: 'div-gpt-ad-1460505661639-0',
      sizes: [[728, 90], [970, 90]],
      bids: [
        {
          bidder: 'appnexus',
          params: {
            placementId: '10433394'
          }
        }
      ]
    }
  ]
};

function MyPage() {
  return (
    <div>
      <AdvertisingProvider config={config}>
        <h1>Hello World</h1>
        <h2>Slot 1</h2>
        <AdvertisingSlot id="div-gpt-ad-1460505748561-0" />
        <h2>Slot 2</h2>
        <AdvertisingSlot id="div-gpt-ad-1460505661639-0" />
      </AdvertisingProvider>
    </div>
  );
);

Note: The critical part about the ad slot is the id prop – it corresponds to the IDs in your configuration and is used by the script from the ad server to find your container div in the page's DOM.

You can also add CSS classes to the AdvertisingSlot component (using the className prop) or inline styles (using the style prop).

← Usage | Usage with Amazon TAM →

Clone this wiki locally