Combined CCPA & TCFv2 AMP Implementation

Overview

This document provides guidance on how to integrate the Sourcepoint CMP (Consent Management Platform) with your AMP (Accelerated Mobile Pages) inventory for the IAB's Transparency and Consent Framework version 2.0 for GDPR and the IAB's framework for CCPA. To perform this integration you should have some level of technical knowledge and access to update the AMP website code.

The process for setting messages, scenarios, partitions and campaigns is the same as the process for setting up any consent messaging campaign. However, the process for setting up the properties, vendor lists and privacy managers may differ.

Setting Up AMP Properties

‌The process for setting up an AMP property is generally the same as the process for setting up a property for any other messaging campaign. It is recommended that you set up an alternate property to deliver messages on AMP pages. This will allow you to set up separate vendor lists for AMP pages. Examples of an AMP property name for the site www.example.com would be www.amp.example.com and amp.example.com.

‌For more information on how to create a new property, please visit the Creating Properties article.

We recommend that you create separate properties for CCPA and GDPR TCFv2. For example, you could create a CCPA-specific AMP property called amp.site.ccpa and a TCFv2-specific AMP property called amp.site.tcfv2.

Setting Up Messages

Messages for AMP are created using the Sourcepoint's new Message Builder 2 product. For more information on creating a message using Message Builder 2, please visit the "How to Create a Message Version" in version 2 of the messaging section.

The steps for setting up a partition and campaign are nearly the same as the steps for creating partitions and campaigns for any messaging campaign. Please see the sections listed below for more information.

Setting Up Scenarios

Setting up a scenario for AMP is a little different than other consent campaigns. This difference is because the AMP component will determine on its own whether consent has been previous given by the user. The scenario within a consent campaign for AMP, therefore, should not include a consent gate.

Please be aware that Consent Gate scenario steps should not be used for AMP implementations.

You can learn more about setting up a scenario by reading the How to Create A Scenario article.

If you are using the <amp-geo> component, do not add geo restrictions to the scenarios you are using with amp campaigns.

Setting Up A Partition and Campaign

The steps for setting up a partition and campaign are nearly the same as the steps for creating partitions and campaigns as for other messaging campaigns. Please see the sections listed below for more information.

Setting Up Vendor Lists And Privacy Managers

There is one minor difference in setting up a vendor list for AMP pages. For AMP pages, you should not create any consent or reject actions in vendor lists. AMP does not allow Javascript to be run in the AMP context, so consent and reject actions will not work.

Setting up the CNAME DNS Record

‌In order for the AMP consent to be persistently recorded for people using Safari, we need to set the consent preferences in the first-party space. To accomplish this, you need to set up a CNAME DNS record to include in the <amp-consent> configuration.

Please read the Setting Up the CNAME DNS Record for Single CNAME article on setting up a CNAME record for this solution.

Integrating Sourcepoint CMP Code Into Your AMP Website for TCF Version 2.0 & CCPA

After you've created properties in the Sourcepoint user interface, you can integrate the Sourcepoint CMP into your AMP website by using the amp-consent component, and inserting the proper attributes in the amp-consent component tags.

Required Scripts

Provides the ability to collect and store a user's consent through a UI control. Also provides the ability to block other AMP components based on the user's consent. For more on amp-consent, please click here.

<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

amp-geo

Provides an approximate country-level geolocation interface. For more on amp-geo, please click here.

<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>

Implementation

‌The example code below is for an example campaign running in the Sourcepoint account. It uses a CNAME record of sp-cdn.example.com with the respective accountId, siteHref / propertyHref,siteId / propertyId and privacyManagerId values for that account. If you swap your subdomain for the values related to your account you will be able to display messages.

You MUST use your own CNAME record in order for the solution to work properly.

<amp-geo layout="nodisplay">
<script type="application/json">
{
"ISOCountryGroups": {
"eea": ["preset-eea", "unknown"],
"ccpa": ["preset-us-ca"]
}
}
</script>
</amp-geo>
<amp-consent id='consent' layout='nodisplay' type='SourcePoint'>
<script type="application/json">
{
"consentInstanceId": "sourcepoint",
"consentRequired": false,
"geoOverride": {
"ccpa": {
"consentRequired": "remote",
"checkConsentHref": "https://sp-cdn.sp-demo.com/ccpa/consent/amp",
"promptUISrc": "https://cdn.privacy-mgmt.com/amp/index.html?authId=CLIENT_ID",
"postPromptUI": "ccpa-consent-ui",
"uiConfig": {"overlay":true},
"clientConfig": {
"accountId": 1319,
"siteHref": "https://amp.property.ccpa",
"siteId": 10538,
"isCCPA": true,
"stageCampaign": false,
"privacyManagerId": "5f71e02e4fd2395b2852abc0",
"getDnsMsgMms": true,
"alwaysDisplayDns": false,
"showNoticeUntilAction": true
}
},
"eea": {
"consentRequired": "remote",
"checkConsentHref": "https://sp-cdn.example.com/wrapper/tcfv2/v1/amp-v2",
"promptUISrc": "https://cdn.privacy-mgmt.com/amp/index.html?authId=CLIENT_ID",
"postPromptUI": "eea-consent-ui",
"uiConfig": {"overlay":true},
"clientConfig": {
"accountId": 1319,
"mmsDomain": "https://cdn.privacy-mgmt.com",
"propertyHref": "https://amp.property.tcfv2",
"propertyId": 9386,
"privacyManagerId": 310876,
"isTCFV2": true,
"pmTab": "purposes",
"stageCampaign": false
}
}
}
}
</script>
<div id="ccpa-consent-ui">
<button on="tap:consent.prompt(consent=SourcePoint)">Do Not Sell My Info</button>
</div>
<div id="eea-consent-ui">
<button on="tap:consent.prompt(consent=SourcePoint)">Privacy Settings</button>
</div>
</amp-consent>

CCPA Parameters Descriptions

Below are the definitions for the parameters you need to deliver a CCPA AMP solution:

  • consentRequired - This tells the AMP consent component to use code from a remote source. This should always be set to "remote".

  • consentInstanceId - This tells the AMP consent component to use the Sourcepoint code. This should always be set to "sourcepoint".

  • checkConsentHref - This is the URL that will check the user's consent. The path for this URL will leverage the CNAME record from the "Setting up the CNAME DNS Records" section of the document. The format of the URL path is https://{CNAME SUBDOMAIN}/ccpa/consent/amp where {CNAME SUBDOMAIN} would be replaced by the CNAME subdomain record created.

  • promptUISrc - This is the URL that will return the post prompt user interface where user's can change their consent. The path should always be set to "https://{CNAME SUBDOMAIN}/amp/index.html" where {CNAME SUBDOMAIN} would be replaced by the CNAME subdomain record previously created.

Please include the ?authId=CLIENT_ID url parameter in the promptUISrc entry. This will allow consent preferences to be saved when your users arrive from a search.

  • postPromptUI - This is the page element that should be displayed to users to provide them with the ability to change their consent after they initially consent.

  • uiConfig - An optional parameter that adds a light black overlay to the site behind the message experience. Can be used to deter end-user scrolling without engaging with your consent experience.

  • accountId - This corresponds with your Sourcepoint account ID.

  • siteHref - This is the property created in the Sourcepoint UI that contains the message, scenario, partition and campaign. The property name should be preceded by the "https://" protocol. For example, a property defined as "amp.property.ccpa" in the UI should have a propertyHref parameter of "https://amp.property.ccpa".

  • isCCPA - This should always be set to true and pull in the CCPA library for AMP.

  • stageCampaign - In production environments this should be set to true. It can be used to test alternate campaigns without affecting production campaigns.

  • privacyManagerId - The ID of the privacy manager to be associated with the postPromptUI element. The ID of the privacy manager can be obtained from the Privacy Manager create window (see screenshot below).

  • getDnsMsgMms - Should be set to true if you want to display a notice to a user.

  • alwaysDisplayDns - This should be set to false.

  • showNoticeUntilAction - If this parameter is not there or set to false, it will only show the message once. If the user does not take an action it opts the user in. If you set this parameter to true, it will continue showing the message until they make an explicit consent decision.

GDPR Parameters Descriptions

Below are the definitions for the parameters you need to deliver a TCF v2 AMP solution:

  • consentRequired - This tells the AMP consent component to use code from a remote source. This should always be set to "remote"

  • consentInstanceId - This tells the AMP consent component to use the Sourcepoint code. This should always be set to "sourcepoint".

  • checkConsentHref - This URL that will check the user's consent. The path for this URL will leverage the CNAME record from the "Setting up the CNAME DNS Records" section of the document. The format of the URL path is https://{CNAME SUBDOMAIN}/wrapper/tcfv2/v1/amp where {CNAME SUBDOMAIN} would be replaced by the CNAME subdomain record created.

  • promptUISrc - This is the URL that will return the post prompt user interface where user's can change their consent. The path should always be set to "https://{CNAME SUBDOMAIN}/amp/index.html" where {CNAME SUBDOMAIN} would be replaced by the CNAME subdomain record previously created.

  • postPromptUI - This is the page element that should be displayed to users to provide them with the ability to change their consent after they initially consent.

  • uiConfig - An optional parameter that adds a light black overlay to the site behind the message experience.

  • accountId - This corresponds with your Sourcepoint account ID.

  • mmsDomain - This is the domain that will communicate with the Sourcepoint messaging service. The format for the path of this parameter is https://{CNAME SUBDOMAIN} where {CNAME SUBDOMAIN} would be replaced by the CNAME subdomain record previously created.

  • propertyHref - This is the property created in the Sourcepoint UI that contains the message, scenario, partition and campaign. The property name should be preceded by the "https://" protocol. For example, a property defined as "amp.property.tcfv2" in the UI should have a propertyHref parameter of "https://amp.property.tcfv2".

  • propertyId - The ID of the property on which the message is supposed to be served. You can get the property from the address bar at the end of the URL.

Please include the ?authId=CLIENT_ID url parameter in the promptUISrc entry. This will allow consent preferences to be saved when your users arrive from a search.

  • privacyManagerId - The ID of the privacy manager to be associated with the postPromptUI element. The ID of the privacy manager can be obtained from the Privacy Manager create window (see screenshot below).

Working with Non-IAB Vendors and Elements on Site

Non-IAB vendors are handled by adding the data-on-block-consent attribute to any tag. Below is an example of a tag for Google Analytics. For more on basic blocking behaviors, click here.

<amp-analytics data-block-on-consent type="googleanalytics"> </amp-analytics>

Creating the postPrompt UI

The postPrompt UI is the button or link that a user can click to the resurface the privacy manager after a consent choice has been made. The UI is constructed from available AMP HTML elements directly on the page. After the user has interacted with the consent message, the postPromptUI will be displayed.

The elements for the postPrompt UI need to placed within the <amp-consent> component.

When utilizing a combined CCPA and TCFv2 implementation, you should create separate buttons:

CCPA Button

<div id="ccpa-consent-ui">
<button on="tap:consent.prompt(consent=SourcePoint)">Do Not Sell My Info</button>
</div>

TCFv2 Button

<div id="eea-consent-ui">
<button on="tap:consent.prompt(consent=SourcePoint)">Privacy Settings</button>
</div>