Show Prebid Ads on AMP Pages

This page has instructions for showing ads on AMP pages using Prebid.js.

Through this implementation, Prebid Server fetches demand and returns key-value targeting to the AMP runtime using the AMP Real Time Config (RTC) protocol.

For more information about AMP RTC, see:

For ad ops setup instructions, see Setting up Prebid for AMP in DFP.

Prerequisites

To set up Prebid to serve ads into your AMP pages, you’ll need:

  • An account with a Prebid Server instance
  • One or more Prebid Server Stored Bid Requests. A Stored Bid Request is a partial OpenRTB JSON request which:
    • Specifies properties like timeout and price granularity
    • Contains a list of demand partners and their respective parameters
  • An AMP page containing at least one amp-ad element for an AMP ad network that supports Fast Fetch and AMP RTC

Implementation

Prebid Server Stored Request

You will have to create at least one Stored Request for Prebid Server. Valid Stored Requests for AMP pages must contain an imp array with exactly one element. It is not necessary to include a tmax field in the Stored Request, as Prebid Server will always use the smaller of the AMP default timeout (1000ms) and the value passed via the timeoutMillis field of the amp-ad.rtc-config attribute (explained in the next section).

An example Stored Request is given below:

    {
        "id": "some-request-id",
        "site": {
            "page": "prebid.org"
        },
        "ext": {
            "prebid": {
                "targeting": {
                    "pricegranularity": {  // This is equivalent to the deprecated "pricegranularity": "medium"
                        "precision": 2,
                        "ranges": [{
                            "max": 20.00,
                            "increment": 0.10
                        }]
                    }
                }
            }
        },
        "imp": [
            {
                "id": "some-impression-id",
                "banner": {
                    "format": [
                        {
                            "w": 300,
                            "h": 250
                        }
                    ]
                },
                "ext": {
                    "appnexus": {
                        // Insert parameters here
                    },
                    "rubicon": {
                        // Insert parameters here
                    }
                }
            }
        ]
    }

AMP content page

The amp-ad elements in the page body need to be set up as shown below, especially the following attributes:

  • data-slot: Identifies the ad slot for the auction.
  • rtc-config: Used to pass JSON configuration data to Prebid Server, which handles the communication with AMP RTC.
    • vendors is an object that defines any vendors that will be receiving RTC callouts (including Prebid Server) up to a maximum of five. The list of supported RTC vendors is maintained in callout-vendors.js.
    • timeoutMillis is an optional integer that defines the timeout in milliseconds for each individual RTC callout. The configured timeout must be greater than 0 and less than 1000ms. If omitted, the timeout value defaults to 1000ms.
    <amp-ad width="300" height="250"
            type="doubleclick"
            data-slot="/19968336/universal_creative"
            rtc-config='{"vendors": {"prebidappnexus": {"PLACEMENT_ID": "12345679"}}, "timeoutMillis": 500}'>
    </amp-ad>

HTML Creative

This is the creative that your Ad Ops team needs to upload to the ad server (it’s also documented at Setting up Prebid for AMP in DFP).

You can always get the latest version of the creative code below from the AMP example creative file in our GitHub repo.

    <script src = "https://cdn.jsdelivr.net/npm/prebid-universal-creative@0.3.0/dist/creative.js"></script>
    <script>
    var adId = "%%PATTERN:hb_adid%%";
    var cacheHost = "%%PATTERN:hb_cache_host%%";
    var cachePath = "%%PATTERN:hb_cache_path%%";
    var uuid = "%%PATTERN:hb_cache_id%%";
    var mediaType = "%%PATTERN:hb_format%%";
    var pubUrl = "%%PATTERN:url%%";
    var size = "%%PATTERN:hb_size%%";

    try {
        pbjs.renderAd(document, adId, {
            cacheHost: cacheHost,
            cachePath: cachePath,
            uuid: uuid,
            mediaType: mediaType,
            pubUrl: pubUrl,
            size: size
        });
    } catch (e) {
        console.log(e);
    }
    </script>

User Sync

To properly sync user IDs with Prebid Server, the amp-iframe pixel below should be added to your AMP pages. As of now, only image pixels (those returned with “type”: “redirect”) are supported.

Iframes must be either 600px away from the top or not within the first 75% of the viewport when scrolled to the top – whichever is smaller. For more information on this, see amp-iframe

    <amp-iframe width="1" title="User Sync"
                            height="1"
                            sandbox="allow-scripts"
                            frameborder="0"
                            src="https://acdn.adnxs.com/prebid/amp/user-sync/load-cookie.html">
    </amp-iframe>