AMP implementation: GDPR and U.S. Privacy (Legacy)

January 04, 2024 18:31

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 or U.S. Privacy (Legacy) or both on your AMP property.

Implementation code snippet for AMP property
Implementation code example

Implementation of the combined GDPR & U.S. Privacy (Legacy) 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 U.S. Privacy (Legacy) implementation code for your AMP property. The GDPR TCF and U.S. Privacy (Legacy) implementation code can be divided into three distinct sections:

AMP headers
<amp-analytics> component
<amp-geo> component
<amp-consent> component

AMP headers

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

<!-- 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>

`<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 U.S. Privacy (Legacy) 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: Implementing GDPR or U.S. Privacy (Legacy) or both regulatory frameworks for your AMP property you will need to utilize the geoOverride parameter within the <amp-consent> component to leverage your ISOCountryGroups.

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`.
`accountId`	Replace the `{__SP_ACCOUNT_ID__}` placeholder with your Sourcepoint account ID.
`stageCampaign`	A parameter that accepts a boolean value. When set to `true`, the implementation will display a U.S. Privacy (Legacy) or GDPR TCF messaging campaign configured for the stage environment.
`propertyHref`	Property created in the Sourcepoint analytics dashboard that contains the message, scenario, partition set, and campaign. Replace the `{__SP_PROPERTY_HREF__}` placeholder with the property name, preceded by the `https://` protocol. For example, a property defined as `amp.property.tcfv2` in the UI should have a propertyHref value of `https://amp.property.tcfv2`.
`promptUISrc`	URL that will return the post prompt user interface where end-user's can change their consent. The path should always be set to `https://{CNAME DOMAIN}/amp/unified/index.html?authId=CLIENT_ID&source_url=SOURCE_URL` where {CNAME DOMAIN} would be replaced by the CNAME domain record previously created.
`initialHeight`	A value between 1 - 100 that represents the percentage of the screen that the first layer message should cover on the page.
`authId`	Allows your organization to identify user in AMP.

The following should be included within geoOverride under eea. You may omit this section if your implementation is for U.S. Privacy (Legacy) only.

Parameter	Description
`consentRequired`	Parameter tells the `<amp-consent>` component to use code from a remote source. This parameter should always be set to `remote`.
`checkConsentHref`	URL that will check the end-user's consent. The path for this URL will leverage the CNAME record. The format of the URL path is `https://{CNAME DOMAIN}/wrapper/tcfv2/v1/amp-v2?authId=CLIENT_ID` where {CNAME DOMAIN} would be replaced by the CNAME domain record created.
`postPromptUI`	The page element that should be displayed to end-users to provide them with the ability to change their consent after they initially consent. Click here for more information.
`cookies`	Required to store and persist consent across pages. This object should always be defined exactly as in the example without modification.
`privacy ManagerId`	Replace the `{__SP_PRIVACY_MANAGER_ID__}` placeholder with the the privacy manager ID, found in the Sourcepoint analytics dashboard and the privacy manager builder for your campaign.
`pmTab`	Determines which tab is opened by default when the privacy manager is accessed. The value for the parameter can either be `vendors` or `purposes`.
`targetingParams`	An optional configuration that allows a developer to set arbitrary key/value pairs. These key/value pairs are sent to Sourcepoint servers where they can be used to take a decision within the scenario builder. `targetingParams: { key1: valueA, key2: valueB }`

The following should be included within geoOverride under ccpa. You may omit this section if your implementation is for GDPR only.

Parameter	Description
`consentRequired`	Parameter tells the `<amp-consent>` component to use code from a remote source. This parameter should always be set to `remote`.
`checkConsent Href`	URL that will check the end-user's consent. The path for this URL will leverage the CNAME record. The format of the URL path is `https://{CNAME DOMAIN}/wrapper/tcfv2/v1/amp-v2?authId=CLIENT_ID` where {CNAME DOMAIN} would be replaced by the CNAME domain record created.
`postPromptUI`	The page element that should be displayed to end-users to provide them with the ability to change their consent after they initially consent.
`cookies`	Required to store and persist consent across pages. This object should always be defined exactly as in the example without modification.
`isCCPA`	Parameter tells the `<amp-consent>` component that the implementation is set to U.S. Privacy (Legacy) regulations.
`targetingParams`	An optional configuration that allows a developer to set arbitrary key/value pairs. These key/value pairs are sent to Sourcepoint servers where they can be used to take a decision within the scenario builder. `targetingParams: { key1: valueA, key2: valueB }`
`privacy ManagerId`	The privacy manager id can be found through this link (you will need to sign in first): `https://analytics.sourcepoint.com/ccpa/privacy_manager` Click on the privacy manager name, the id can be found in the URL of the webpage. Replace the `{__SP_PRIVACY_MANAGER_ID__}` placeholder with the the privacy manager id, found in the Sourcepoint analytics dashboard and the privacy manager builder for your campaign.

<script type="application/json">
   {
      "consentRequired": false,
      "checkConsentHref": false,
      "consentInstanceId": "sourcepoint",
      "postPromptUI": "consent-ui",
      "promptUISrc": "https//{CNAME DOMAIN}/amp/unified/index.html?authId=CLIENT_ID&source_url=SOURCE_URL",
      "clientConfig": {
         "accountId": {__SP_ACCOUNT_ID__},
         "propertyHref": {__SP_PROPERTY_HREF__},
         "stageCampaign": false,
         "initialHeight": 80, 
         "authId": {__AUTH_ID__}
      },
      "geoOverride": {
         "eea": {
            "consentRequired": "remote",
            "checkConsentHref": "https://{CNAME DOMAIN}/wrapper/tcfv2/v1/amp-v2?authId=CLIENT_ID",
            "clientConfig": {
               "pmTab": "purposes",
               "targetingParams": {"darkmode":"true"},
               "privacyManagerId": [[ privacy manager ID]]
            }
         },
         "ccpa": {
            "consentRequired": "remote",
            "checkConsentHref": "https://{CNAME DOMAIN}/wrapper/ccpa/amp-v2?authId=CLIENT_ID",
            "clientConfig": {
               "isCCPA": true,
               "targetingParams": {"darkmode":"true"},
               "privacyManagerId": [[ privacy manager ID]]
            }
         }
      }
   }
</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>
   </head>
   <body>
      <h1>Welcome to the mobile web CCPA & GDPR</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'>
         <script type="application/json">
            {
               "consentRequired": false,
               "checkConsentHref": false,
               "consentInstanceId": "sourcepoint",
               "promptUISrc": "https://cdn.privacy-mgmt.com/amp/unified/index.html?authId=CLIENT_ID&source_url=SOURCE_URL",
               "clientConfig": {
                  "accountId": 1732,
                  "propertyHref": "https://amp.newscriptdemo.com",
                  "stageCampaign": false,
                  "initialHeight": 80, 
                  "authId": "xxx" //remove for production use or configure unique authId
               },
               "geoOverride": {
                  "eea": {
                     "consentRequired": "remote",
                     "checkConsentHref": "https://cdn.privacy-mgmt.com/wrapper/tcfv2/v1/amp-v2?authId=CLIENT_ID",                                          
                     "postPromptUI": "eea-consent-ui",
                     "clientConfig": {                        
                        "privacyManagerId": 547514,
                        "targetingParams": {"darkmode":"true"},
                        "pmTab": "purposes"                        
                     }
                  },
                  "ccpa": {
                     "consentRequired": "remote",
                     "checkConsentHref": "https://cdn.privacy-mgmt.com/wrapper/ccpa/amp-v2?authId=CLIENT_ID",
                     "postPromptUI": "ccpa-consent-ui",
                     "clientConfig": {
                        "isCCPA": true,
                        "targetingParams": {"darkmode":"true"},
                        "privacyManagerId": 548950
                     }
                  }
               }
            }
         </script>
      </amp-consent>
   </body>
</html>

AMP implementation: GDPR and U.S. Privacy (Legacy)

Implementation code snippet for AMP property

AMP headers

<amp-analytics> component

<amp-geo> component

<amp-consent> component

Implementation code example

Articles in this section

Comments

`<amp-analytics>` component

`<amp-geo>` component

`<amp-consent>` component