Skip to content

Usage with Amazon TAM

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

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

Contents

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 apstag.js, just the same way you would do with a “classic”, non-React web page.

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>
    <link rel="dns-prefetch" href="https://c.amazon-adsystem.com">
    <link rel="preconnect" href="https://c.amazon-adsystem.com" crossorigin>
    <script async src="https://c.amazon-adsystem.com/aax2/apstag.js"></script>
    <script>
    window.apstag = window.apstag || {
      init: function() {
        apstag._Q.push(["i", arguments, (new Date).getTime()])
      },
      fetchBids: function() {
        apstag._Q.push(["f", arguments, (new Date).getTime()])
      },
      setDisplayBids: function() {},
      _Q: []
    };
    </script>
  </head>
  <body>
    <!-- rest of your HTML code goes here -->
  </body>
</html>

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 apstag 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 = {
  aps: {
    pubID: "yourPubId",
    bidTimeout: 2e3,
    deals: true
  },
  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 configures two ad slots, one that shows a Amazon TAM 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 with Prebid | Internet Explorer 11 Compatibility →

Clone this wiki locally