Integrating TRUENDO CMP with AMP Pages

Introduction#

This guide provides step-by-step instructions on how to integrate the TRUENDO Consent Management Platform (CMP) into your Accelerated Mobile Pages (AMP). TRUENDO CMP helps you manage cookies and user consent in compliance with privacy regulations like GDPR. By following this guide, you'll be able to insert the TRUENDO code snippet, configure consent settings, and ensure optimal data privacy management on your AMP site.

1. Prerequisites#

Before you begin, ensure you have the following:

Access to Your AMP Page Code: Ability to edit HTML files and insert scripts.
TRUENDO Account: If you don't have one, you'll need to create it and obtain your Site ID.
Basic Understanding of AMP: Familiarity with AMP page structure and components.

2. Integration Steps#

Open Your AMP HTML File:
- Locate the AMP page where you want to integrate TRUENDO CMP.

Insert the AMP Consent Extension:

Paste the following script inside the <head> section of your AMP page. This script enables the use of the amp-consent component.


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

Add the amp-consent Component:

Paste the following code inside the <body> of your AMP page. This defines the consent settings and links to TRUENDO's consent UI.


<body>
  <!-- Your AMP content -->

  <amp-consent id="truendo" layout="nodisplay">
    <script type="application/json">
      {
        "consentInstanceId": "truendo",
        "consentRequired": "remote",
        "checkConsentHref": "https://prod-fra.truendo.com/consent/public/amp/check",
        "promptUISrc": "https://amp.priv.center/amp.html?tru-type=amp&site-id={{site-id}}"
      }
    </script>
  </amp-consent>

  <!-- Rest of your AMP content -->
</body>

C. Replace Placeholder with Your Site ID

Obtain Your Site ID:
- Log in to the TRUENDO Console at https://console.truendo.com/.
- Navigate to your project and copy your Site ID.

Replace {{site-id}} with Your Actual Site ID:

In the code you just pasted, replace {{site-id}} with your actual Site ID. This allows TRUENDO to identify your site.


<amp-consent id="truendo" layout="nodisplay">
  <script type="application/json">
    {
      "consentInstanceId": "truendo",
      "consentRequired": "remote",
      "checkConsentHref": "https://prod-fra.truendo.com/consent/public/amp/check",
      "promptUISrc": "https://amp.priv.center/amp.html?tru-type=amp&site-id=YOUR_SITE_ID"
    }
  </script>
</amp-consent>

Example:


<amp-consent id="truendo" layout="nodisplay">
  <script type="application/json">
    {
      "consentInstanceId": "truendo",
      "consentRequired": "remote",
      "checkConsentHref": "https://prod-fra.truendo.com/consent/public/amp/check",
      "promptUISrc": "https://amp.priv.center/amp.html?tru-type=amp&site-id=20ee-r086-40g-8ajee-35c9op085cf0"
    }
  </script>
</amp-consent>

Save Your Changes:
- After updating the code, save your AMP HTML file.

At this point, the TRUENDO Privacy Widget should now appear on your AMP page.

If you want to allow users to update their consent preferences after their initial choice, you can add a button to trigger the consent prompt.

Add the Post-Prompt UI Element:
- Paste the following code where you want the "Update Consent" button to appear on your AMP page:
```
<div id="post-consent-ui">
  <button on="tap:truendo.prompt()">Update Consent</button>
</div>
```

Modify the amp-consent Configuration:

Add the "postPromptUI": "post-consent-ui" key-value pair inside the script tag of your amp-consent component:


<amp-consent id="truendo" layout="nodisplay">
  <script type="application/json">
    {
      "consentInstanceId": "truendo",
      "consentRequired": "remote",
      "checkConsentHref": "https://prod-fra.truendo.com/consent/public/amp/check",
      "promptUISrc": "https://amp.priv.center/amp.html?tru-type=amp&site-id=YOUR_SITE_ID",
      "postPromptUI": "post-consent-ui"
    }
  </script>
</amp-consent>

Save Your Changes:
- Save the updated AMP HTML file.

Users can now click the "Update Consent" button to change their cookie preferences at any time.

3. Understanding TC String Handling#

A. How TRUENDO Handles the TC String

Transparency and Consent (TC) String:
- The TC string is a standardized format for storing and transmitting user consent data under the IAB's Transparency and Consent Framework (TCF).
TRUENDO's Method:
- TRUENDO sends the TC string via a postMessage to the parent AMP page.
- The parent AMP page listens for this postMessage and retrieves the consent data.

Sample Data Object Sent by TRUENDO:


{
  "type": "consent-response",
  "action": "accept",
  "info": {
    "clientConfig": "*",
    "consentStateValue": "accepted",
    "consentString": "CPn3nn3nTPEENC5CgAAH"
  },
  "consentMetadata": {
    "consentStringType": 2,
    "gdprApplies": true
  }
}

B. Retrieving the TC String in Your AMP Page

Listen for the postMessage Event:
- Implement an event listener in your AMP page to capture the postMessage from TRUENDO.
Extract the TC String:
- Once the message is received, parse the data to retrieve the consentString.
Utilize the Consent Data:
- Use the consent information to manage cookies and third-party scripts according to user preferences.

4. Verifying the Integration#

To ensure TRUENDO CMP is correctly integrated:

Clear Browser Cookies:
- Before testing, clear your browser's cookies to reset consent preferences.
Access Your AMP Page:
- Open your AMP page in a browser or an AMP validator tool.
Check for the Consent Prompt:
- The TRUENDO consent prompt should appear upon visiting the page.
Test Consent Scenarios:
- Accept All Cookies:
  - Click "Accept" on the prompt.
  - Verify that all scripts and cookies are functioning.
- Decline Non-Essential Cookies:
  - Choose to accept only necessary cookies.
  - Ensure that non-essential scripts are not running.
- Update Preferences:
  - Use the "Update Consent" button (if added) to change preferences.
  - Verify that changes are respected.
Use Developer Tools:
- Open your browser's developer tools.
- Check the Network tab to see which scripts and cookies are loaded.
- Ensure that only allowed cookies are set.

5. Additional Considerations#

AMP Compliance:
- Ensure that all added scripts and components comply with AMP's validation rules.
- Use the AMP Validator to check your page.
Script Loading Order:
- The amp-consent component should be properly configured to control the loading of other AMP components based on user consent.
Regular Updates:
- Keep your TRUENDO integration updated to benefit from improvements and compliance updates.
Privacy Regulations:
- Stay informed about changes in privacy laws like GDPR and CCPA to ensure ongoing compliance.

6. Support and Resources#

TRUENDO Support:
- If you encounter issues or have questions, contact TRUENDO support at support@truendo.com.
AMP Documentation:
- For more information about AMP components and best practices, visit https://amp.dev/.
TRUENDO Documentation and Guides:
- Visit the TRUENDO documentation site at https://docs.truendo.com/ for more detailed guides and resources.

7. Conclusion#

This integration allows you to manage cookies effectively while providing a seamless experience for your users on mobile platforms.

Thank you for choosing TRUENDO CMP for your consent management needs.

Start typing to search, or search using the advanced options below.

Sources: