(Under Construction) Block custom vendor scripts via data-block-on-consent

The data-block-on-consent attribute is an optional configuration that your organization can use to ensure that all behaviors of the element (e.g. sending analytics pings for <amp-analytics> or the loading of an <amp-ad>) are delayed until the relevant consent instance is accepted. 

  Note: More information on blocking options can be found on the official AMP documentation page, click here.


data-block-on-consent implementation

The data-block-on-consent attribute is added to your AMP component to block element behavior until the relevant consent instance is accepted. Individual components may override this behavior to provide more specialized handling. 

The data-block-on-consent has three settings:

  • _till_responded - the component is unblocked until the end-user has responded to a consent prompt or has chosen to skip it
  • _till_accepted - the default basic blocking behaviour. The component is blocked until the end-user has responded to the consent prompt
  • _auto_reject - always reject the consent automatically if the end-user's consent is required but unknown

In the example below, the analytics component is blocked until the end-user has responded to the consent prompt. 

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

data-block-on-consent implementation example

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

In the following example, a data-block will be applied to the AMP analytics component using the data-block-on-consent="_till_accepted" setting. It will wait until the end-user has provided the consent before triggering.

<amp-analytics data-block-on-consent="_till_accepted" 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>

The complete code example is as follows (for GDPR TCF):

<!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 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>
      <amp-analytics data-block-on-consent="_till_accepted" 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-consent id="consent" layout="nodisplay" type="SourcePoint">
         <script type="application/json">
            {
               "checkConsentHref": "https://cdn.privacy-mgmt.com/wrapper/tcfv2/v1/amp-v2?authId=CLIENT_ID",
               "consentRequired": "remote",
               "consentInstanceId": "sourcepoint",
               "postPromptUI": "consent-ui",
               "promptUISrc": "https://cdn.privacy-mgmt.com/amp/unified/index.html?authId=CLIENT_ID&source_url=SOURCE_URL",                
               "cookies": {
                  "enabled": true,
                  "AMP-CONSENT": {    "value": "LINKER_PARAM(authId, _a)" }
               },
               "clientConfig": {
                  "accountId": 1732,
                  "propertyHref": "https://amp.newscriptdemo.com",
                  "stageCampaign": false,
                  "pmTab": "purposes",
                  "privacyManagerId": 547514,
                  "isTCFV2": true
               }
            }
         </script>
      </amp-consent>
      <div id="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