AMP and Advertising

In this topic, you will learn how to display advertising with a Brightcove Player that uses AMP. You will also learn how to use client-side consent with the Brightcove Player/AMP configuration.

Implementing Advertising in an AMP player

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. If you need to include article-specific values in your ad server calls, you can pass custom data through to a player plugin as described later in this document.

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.

To reiterate, advertising must be implemented in the player's configuration, either using Studio or the Player Management API.

If you wish to use ad configuration URLs that utilize an ad macro such as {pageVariable.adId}, you must alter the player's configuration. You can use a custom parameter like:

  data-param-ad-id="preonlybumper"

This does not make the value automatically available to the ad macro {pageVariable.adId}. To make the ad-id/adId property available to the ad URL, you must use Brightcove Player's query_string_to_window configuration option. This option controls the population of the global namespace (window) variables from query string parameters. To add all query string parameters to the global namespace, add the following to your player configuration:

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

Note the queryStringsParams name is the "variable" in which the parameters will be stored, and you can change the name as you choose.

If for some reason you prefer to only assign limited parameters to the global namespace you can do so. For instance, to make only the data-param-ad-id="..." available to the plugin, you add the following to the player configuration:

"query_string_to_window": {
  "globals": [
    "adId"
  ]
}

For specific instructions on updating a player configuration, see Player Configurations - Update a Player Configuration from the Player Management API reference.

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"

attribute to the amp-brightcove element. This will cause the player load to be delayed until the user has accepted or rejected consent. On subsequent pages where the consent is known, the player will load normally without a delay.

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 will be automatically added to the ad server URL, as shown here:

For other changes to the ad server URL, the consent state will be 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');
    }
});