print

Creating a Custom Placeholder with TRUENDO CMP

Introduction#

Creating custom placeholders is crucial when you want to control how third-party content is displayed on your website, especially concerning user consent and data privacy regulations like GDPR. The TRUENDO Consent Management Platform (CMP) allows you to create custom placeholders for content such as iframes or scripts that require user consent before loading.

This guide provides step-by-step instructions on how to create a custom placeholder using TRUENDO CMP, ensuring proper integration and compliance.

1. Prerequisites#

Before you begin, ensure you have:

  • Access to Your Website's Code: Ability to create and modify HTML and CSS files.
  • TRUENDO CMP Integrated: The TRUENDO CMP script should already be implemented on your website.
  • Understanding of Consent Categories: Know which category your embedded content falls under (e.g., social_content).

2. Step 1: Create the Placeholder HTML File#

First, you need to create a separate HTML file that will serve as the custom placeholder.

Instructions:

  1. Create a New HTML File:

    • Name the file placeholder.html.
    • Important: The filename must contain the word placeholder in lowercase.

  2. Basic Structure:

    • Use a basic HTML structure or download the example placeholder template provided by TRUENDO.

Example Placeholder Template:

You can download a basic placeholder template here.

3. Step 2: Customize the Placeholder Content and Styling#

Now, customize the placeholder to match your website's design and provide necessary information to users.

Instructions:

  1. Add Custom Styling:

    • Within the <style> tags of your placeholder.html, add CSS to style the placeholder.
    • Alternatively, link to an external CSS file using the <link> tag.

  2. Customize the Text:

    • Modify the placeholder text to inform users about the content they are about to view.
    • Note: Ensure that the text accurately informs users to maintain GDPR compliance.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Content Placeholder</title>
    <!-- Add your styles here or link to a CSS file -->
    <style>
        .placeholder-content {
            text-align: center;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .placeholder-content p {
            font-size: 16px;
            color: #333;
        }
        .placeholder-content button {
            padding: 10px 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="placeholder-content">
        <p>This content is hosted by a third party (<span id="domain"></span>) and requires your consent to view.</p>
        <button onclick="acceptContent()">Accept and View Content</button>
    </div>
    <script>
        function acceptContent() {
            window.parent.postMessage({ event: 'acceptContent', category_id: getParameterByName('category_id') }, '');
        }
        function getParameterByName(name) {
            var url = window.location.href;
            name = name.replace(/[[]]/g, '\$&');
            var regex = new RegExp('[?&]' + name + '(=([^])|&|#|$)'),
                results = regex.exec(url);
            if (!results || !results[2]) return null;
            return decodeURIComponent(results[2].replace(/+/g, ' '));
        }
        document.getElementById('domain').textContent = getParameterByName('domain');
    </script>
</body>
</html>

Warning:

Note: While you can change the text of the placeholder, ensure that users are correctly informed about what they are accepting. Incorrect information can lead to non-compliance with GDPR.

4. Step 3: Modify the Embedded Content's HTML Attributes#

Next, you need to adjust the HTML attributes of the embedded content (e.g., an iframe) to work with TRUENDO CMP.

Instructions:

  1. Change src to data-src:

    • Replace the src attribute of the iframe with data-src to prevent it from loading before consent is given.

  2. Add Required Attributes:

    • data-trucookiecontrol: Set this to the corresponding consent category ID (e.g., "social_content").
    • truendo="true": Indicates that TRUENDO CMP should manage this content.

Example:

<iframe
    data-trucookiecontrol="social_content"
    truendo="true"
    data-src="[original source URL]"
></iframe>

5. Step 4: Link the Placeholder to the Embedded Content#

Finally, link the custom placeholder you created to the embedded content.

Instructions:

  1. Add the src Attribute:

    • Set the src attribute of the iframe to point to the placeholder.html file you created.

  2. Include Query Parameters:

    • The placeholder accepts several query parameters:

      • domain: Your business name or website URL to display in the placeholder.
      • category_name: The human-readable name of the consent category (e.g., "Social Content").
      • category_id: The ID of the consent category (e.g., "social_content").

  3. Construct the src URL:

    • Append the query parameters to the placeholder URL, ensuring proper URL encoding.

Example URL:

src="https://www.example.com/placeholder.html?domain=yourwebsite.com&category_id=social_content&category_name=Social%20Content"

Complete iframe Example:

<iframe
    data-trucookiecontrol="social_content"
    src="https://www.example.com/placeholder.html?domain=yourwebsite.com&category_id=social_content&category_name=Social%20Content"
    truendo="true"
    data-src="[original source URL]"
></iframe>

6. Important Notes#

  • Compliance: Always ensure that users are correctly informed about the content and the data processing involved to remain GDPR-compliant.

  • Necessary Content:

    Important Note: Content that falls under the "necessary" category should not be changed or blocked, as it can run without user consent.

  • File Naming: Remember that the placeholder file must contain the word placeholder in lowercase for TRUENDO CMP to recognize it.

7. Conclusion#

By following this guide, you have successfully created a custom placeholder for your embedded content using TRUENDO CMP. This ensures that users are informed and have given consent before the content loads, maintaining compliance with data privacy regulations.

8. Support and Resources#

End of Guide

If you have any further questions or require assistance with specific configurations, please don't hesitate to reach out to TRUENDO support or consult the resources provided.

×