AMP implementation (GDPR TCF and CCPA)

  Note: Please be aware that currently an end-user can only have one consent profile. This means that if an end-user has a consent profile for GDPR and then visits your AMP property while visiting the United States, their consent profile will be overridden with their CCPA consent selections and vice versa.

Sourcepoint offers messaging capabilities for multiple regulatory frameworks for your AMP property. These messages are surfaced to your end-users in accordance with the campaigns (and scenarios) that you configure for the AMP property. In this article, we will cover how to implement GDPR TCF and CCPA on your AMP property.

Implementation of the combined GDPR & CCPA AMP script relies on the <amp-geo> component, for the relevant article click here.

More information on geo-targeting options can be found on the official AMP documentation page, click here and here.

  Note: Please be advised that the configuration of your AMP property (property, vendor list, messages, etc...) in the Sourcepoint portal needs to follow prescribed guidelines specific to AMP. In addition to this implementation article, please review our AMP configuration guidelines article.


Implementation code snippet for AMP property

In this section, we will cover the various elements that you may find in the GDPR TCF and CCPA implementation code for your AMP property. The GDPR TCF and CCPA implementation code can be divided into three distinct sections:

AMP headers

The following scripts should be copied into the header of the AMP property without modification:

<script async="" src="https://cdn.ampproject.org/v0.js"></script>
<!-- required for the amp-consent component -->
<script async="" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
<!-- required to sync auth_id with publishers domain and Google.com domain -->
<script async="" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<!-- required to utilize the amp-geo component -->
<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>

<amp-analytics> component

The following code should be inserted near the top of the body of the AMP property without modification. This component allows an end-user’s consent selections to persist across AMP pages hosted on a google domain and your organization's domain. 

<amp-analytics type="googleanalytics">
   <script type=application/json>
      {
         "linkers":{"authId":{"ids":{"_a":"CLIENT_ID(AMP-CONSENT)"},"enabled":true,"proxyOnly":false}},"cookies":{"enabled":true,"authId":{"value":"LINKER_PARAM(authId, _a)"}}
      }
   </script>
</amp-analytics>

<amp-geo> component

The <amp-geo> component allows your organization to define the countries/regions where GDPR TCF and CCPA should apply, respectively. You will need to configure separate ISOCountryGroups for each regulatory framework which will be leveraged later in your <amp-consent> component. 

  Note: Click here for more information on restricting consent collection to specific regions.

<amp-geo layout="nodisplay">
   <script type="application/json">
      {
         "ISOCountryGroups": {
            "eea": ["preset-eea", "unknown"],
            "ccpa": ["preset-us-ca"]
         }
      }
   </script> 
</amp-geo> 

<amp-consent> component

The amp-consent component is where you will include the specific account and property details for your organization. Within the component you will need to update certain placeholders with the correct values.

  Note: Unlike implementing GDPR TCF or CCPA individually on an AMP property, when implementing both regulatory frameworks onto your AMP property you will need to utilize the geoOverride parameter within the <amp-consent> component  to leverage your ISOCountryGroups.

General parameters GDPR TCF parameters CCPA parameters
The following parameters should be included in the <amp-consent> component outside of geoOverride:

 

Parameter Description
consentInstanceId

Parameter tells the <amp-consent> component to use Sourcepoint code. This parameter should always be set to sourcepoint.

<script type="application/json">
   {
      "consentInstanceId": "Sourcepoint",
      "geoOverride": {
         "ccpa": {
            "consentRequired": "remote",
            "checkConsentHref": "https://{CNAME DOMAIN}/ccpa/consent/amp",
            "promptUISrc": "https://{CNAME DOMAIN}/amp/index.html?authId=CLIENT_ID",
            "postPromptUI": "ccpa-consent-ui",
            "uiConfig": {"overlay":true},
            "clientConfig": {
               "accountId": {__SP_ACCOUNT_ID__},
               "siteHref": {__SP_SITE_HREF__},
               "siteId": {__SP_SITE_ID__},
               "isCCPA": true,
               "stageCampaign": false,
               "privacyManagerId": {__SP_PRIVACY_MANAGER_ID__},
               "getDnsMsgMms": true,
               "alwaysDisplayDns": false,
               "showNoticeUntilAction": true,
               "targetingParams": {    "{__KEY__}": "{__VALUE__}"  }
            }
         },
         "eea": {
            "consentRequired": "remote",
            "checkConsentHref": "https://{CNAME DOMAIN}/wrapper/tcfv2/v1/amp-v2?authId=CLIENT_ID",
            "promptUISrc": "https://{CNAME DOMAIN}/amp/index.html?authId=CLIENT_ID",
            "mmsDomain": "https://{CNAME DOMAIN}",
            "postPromptUI": "eea-consent-ui",
            "uiConfig": {"overlay":true},
            "cookies": {
               "enabled": true,
               "AMP-CONSENT": {    "value": "LINKER_PARAM(authId, _a)" }
            },
            "clientConfig": {
               "accountId": {__SP_ACCOUNT_ID__},
               "propertyHref": {__SP_PROPERTY_HREF__},
               "propertyId": {__SP_PROPERTY_ID__},
               "privacyManagerId": {__SP_PRIVACY_MANAGER_ID__},
               "isTCFV2": true,
               "pmTab": "purposes",
               "stageCampaign": false,
               "targetingParams": {    "{__KEY__}": "{__VALUE__}"  }
            }
         }
      }
   }
</script>

Implementation code example

The following is a code example using a property from a demo account and the default domain from Sourcepoint.

<!doctype html>
<html amp lang="en">
   <head>
      <meta charset="utf-8">
      <title>Hello, AMPs</title>
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <!-- required for the amp-consent component -->
      <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
      <!-- required for geo-targeting -->
      <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
      <!-- required to sync auth_id with publishers domain and Google.com domain --> <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head> <body> <h1>Welcome to the mobile web CCPA TCF</h1>
<amp-analytics type="googleanalytics">
<script type=application/json>
{
"linkers":{"authId":{"ids":{"_a":"CLIENT_ID(AMP-CONSENT)"},"enabled":true,"proxyOnly":false}},"cookies":{"enabled":true,"authId":{"value":"LINKER_PARAM(authId, _a)"}}
}
</script>
</amp-analytics> <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", "geoOverride": { "ccpa": { "consentRequired": "remote", "checkConsentHref": "https://sp-cdn.sp-demo.com/ccpa/consent/amp", "promptUISrc": "https://sp-cdn.sp-demo.com/amp/index.html?authId=CLIENT_ID", "postPromptUI": "ccpa-consent-ui", "uiConfig": {"overlay":true}, "clientConfig": { "accountId": 1732, "siteHref": "https://amp.newscriptdemo.com", "siteId": 19118, "isCCPA": true, "stageCampaign": false, "privacyManagerId": "613a397d7bb7502c6f4548e5", "getDnsMsgMms": true, "alwaysDisplayDns": false, "showNoticeUntilAction": true, "targetingParams": { "color": "blue" } } }, "eea": { "consentRequired": "remote", "checkConsentHref": "https://sp-cdn.sp-demo.com/wrapper/tcfv2/v1/amp-v2?authId=CLIENT_ID", "promptUISrc": "https://sp-cdn.sp-demo.com/amp/index.html?authId=CLIENT_ID", "mmsDomain": "https://sp-cdn.sp-demo.com", "postPromptUI": "eea-consent-ui", "uiConfig": {"overlay":true}, "cookies": { "enabled": true, "AMP-CONSENT": { "value": "LINKER_PARAM(authId, _a)" } }, "clientConfig": { "accountId": 1732, "propertyHref": "https://amp.newscriptdemo.com", "propertyId": 19118, "privacyManagerId": 547514, "isTCFV2": true, "pmTab": "purposes", "stageCampaign": false, "targetingParams": { "color": "red" } } } } } </script> </amp-consent> <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> </body> </html>
Was this article helpful?
0 out of 0 found this helpful