AMP and Advertising

Introduction

Advertising including prerolls, works in players used in AMP. The ad plugin and its configuration just needs to be included in the player's configuration. For a basic set up using a static ad tag follow the steps in the Basic setup with static ad tag section in this document.

Often you'll want to use macros to add dynamic information to the ad calls. For information using this technique, see the Using macros in ad calls section in this document.

In AMP you can use client-side consent, providing users with additional control over their online experience. See the AMP-consent and Advertising section in this document for more information.

Note that AMP is very strict in what can be added to a valid AMP page, as detailed in the AMP Using a Video Cloud Video document. For example, you CANNOT use the standard practice of adding an id to the amp-brightcove tag then use a script block to configure, for instance, the IMA3 plugin. So advertising must be implemented in the player's configuration, either using Studio or the Player Management API.

Basic setup with static ad tag

To configure a player with a static ad tag you must do the following:

1. Create the player.
2. Configure advertising using a static ad tag as shown in steps 1-15 of the Step-by-Step: Implementing Advertising document.
3. Configure your player to use AMP as shown in the first half of the AMP Using a Video Cloud Video document.

Once you place your AMP player code on a page the ad(s) play along with your video.

Using macros in ad calls

If you need to include article-specific values in your ad server calls, you can pass custom data through to a player plugin. Macros for video metadata such as {mediainfo.tags} can be used as normal. (For the full list of video metadata macros see the Ad macros and the serverUrl of the Advertising with the IMA3 Plugin document.) However to use {pageVariable.*} macros, some additional steps are needed for AMP, since the AMP player is in an iframe.

First, configure the player to parse query parameters, using the Brightcove Player's query_string_to_window configuration option. To add all query string parameters to the global namespace, add the following to your player configuration:

    "query_string_to_window": {
      "target": "qsParams"
    }

Note the qsParams name is the object in which the parameters are stored. You can change the name as you choose, in which case you change the name used in the macros later.

Next, to pass data, add as many data-param-* parameters as needed to the <amp-brightcove> embed code. For example:

data-param-ad-id="prerollonly"
data-param-site-section="celebrity"
data-param-post-id="A12345"

Now, within the player's iframe, that extra data is available as camel-cased properties of the target object:

window.qsParams.adId
window.qsParams.siteSection
window.qsParams.postId

These can be used in {pageVariable.*} macros in the ad configuration (carriage returns added for readability):

https://ads.example.com/ad?ad={pageVariable.qsParams.adId}
    &video={mediainfo.id}&article={pageVariable.qsParams.postId}
    &section={pageVariable.qsParams.siteSection}

For specific instructions on using the Player Management API to update a player configuration, see Player Configurations - Update a Player Configuration.

AMP-consent and Advertising

In AMP you can use client-side consent, providing users with additional control over their online experience. If your AMP page is managing user consent with AMP-consent, and you are using advertising in the player, you may then want to adapt the player's ad request depending on that consent. Do so by adding a

data-block-on-consent="_till_responded"

Ad configurations

The simplest scenario to implement advertising and AMP is to use Brightcove Player's standard IMA advertising integration with Google Ad Manager, which expects npa=1 to be added to the ad request if consent is unknown or not given. To do this, add

"imaAddNpa": true

to the options of the player's AMP Support Plugin, and this is automatically added to the ad server URL, as shown here:

For other changes to the ad server URL, the consent state are set on the player's iframe with three query parameters:

• ampInitialConsentState: Whether consent is accepted, rejected, unknown
• ampConsentSharedData: A JSON string of data from the consent vendor
• ampInitialConsentValue: The consent string from the consent vendor

The consent state is an integer as defined in AMP:

• SUFFICIENT: 1
• INSUFFICIENT: 2
• UNKNOWN_NOT_REQUIRED: 3
• UNKNOWN: 4

To update the player configuration to make the player iframe's query parameters available as simple Javascript variables, add the following to the player configuration in the JSON editor:

"query_string_to_window": {"target": "queryStringParams"}

For assistance, here is a screenshot of the UI:

Then you can use the consent query parameters in the ad server request, either using macros or by configuring the severURL to be a function.

Macro example

"adserverURL": "https://ads.example.com/ad?consent={pageVariable.queryStringParams.ampInitialConsentState}&consentString={pageVariable.queryStringParams.ampInitialConsentValue}"

Function example

Configure the player without an ad server URL using the following:

videojs.registerPlugin('setAdUrl', function() {
  this.ima3.settings.serverUrl = function(callback) {
    if (window.queryStringParams.ampInitialConsentState === '1') {
      // Sufficient consent
      callback('https://ads.example.com/adwithconsent?string={pageVariable.queryStringParams.ampInitialConsentValue}');
    } else {
      // Use a different ad
      callback('https://ads.example.com/basicad');
    }
});