CCPA Privacy Banner and Popup Setup Guide

[#1]

The CCPA Consent Manager makes it easy to allow users to opt-out of the sale of personal information and set preferences for the sale of personal information. This tool adds the ability to add a privacy banner and popup to your site to inform your visitors about your sale of personal information policy and to provide opt-out options.  The CCPA Consent Manager can be fully customized to match your site requirements and it supports translated content for your global visitors.

Learn about more features of Tealium Consent Management.

In this article:

Table of Contents Placeholder

How It Works

The CCPA Consent Manager notifies your users of your policy for processing personal information and allows them to opt-out of the sale of their personal information or control how their personal information is sold. This solution can be deployed to your site either as a privacy banner and popup or just as a popup to integrate with your existing banner. 

The banner informs your users about your policy and provides a link to your "Do Not Sell My Information" page required by CCPA. The popup is triggered from the banner and allows a visitor to opt-out of the sale of personal information or set preferences for the sale of their personal information. 

This feature is integrated with your Tealium iQ Tag Management account to make it easy to configure and categorize vendor tags that might be governed by CCPA. The tags that you identify as selling information can be categorized as “Dot Not Sell” and presented to your users in the popup. 

Visitor Experience

Once deployed to your website using the Universal Tag (utag.js), the CCPA Consent Manager operates automatically – no additional coding is needed for it to function. The  banner and popup is displayed based on the configured load rule and the presence of a "do not sell" cookie. When the cookie is not set, the CCPA Consent Manager is triggered automatically on pages that match the load rule. Once a preference is set, the cookie is created and subsequent page views will not trigger the banner or popup.

The CCPA Consent Manager can be displayed programmatically using the JavaScript helper functions.

Features

The CCPA Consent Manager offers the following features:

• Display Templates
• Customizable Style and Layout
• Multi-Language Support
• Configurable Display Condition
• Global Settings for Enterprise Rollout

Steps

The CCPA Consent Manager is set up using the following screens:

• User Experience
  Select how it will display on your site: either as a banner and popup or just a popup. We recommend selecting the banner and popup as the most complete solution. However, if you already display a cookie banner on your site, the popup option is best. 
• Content
  Use this screen to enter the message displayed to your customers on the banner and popup, add multiple language translations, and provide your company's logo URL and privacy policy link.
• Customization
  Customize the design and layout of your prompt by editing the CSS, HTML, and JavaScript used to display your prompt.
• Display Rule
  Use your data layer to create a load rule that determines when the banner should be displayed.

This feature does not require additional code on your site. All of the configuration is bundled with your existing installation of the Universal Tag (utag.js).

Once you activate and configure the CCPA Consent Manager the changes are included in your next publish.

Global Parameters

The parameters used in the CCPA Consent Manager can be set globally at the account level. This allows you to set the titles, messages, and labels once and have each profile inherit those values.

To learn more, see Managing Global Consent Content Parameters.

Getting Started

Use the following steps to begin setting up the CCPA Consent Manager:

1. In the left sidebar, go to Client-Side Tools > Consent Management.
   If the CCPA banner and popup is already set up, you can toggle it on or off from this screen.
2. In the CCPA Consent Manager section, click Get Started to launch the configuration modal.

User Experience

To get started, choose the user experience option that matches your site:

• Banner and Popup (Recommended)
  This option adds a cookie banner to be displayed on the page. You set the message and links and the consent manager takes care of the rest, displaying the banner on the page based on your configured settings. The banner contains a link that opens the popup where users set their "Do Not Sell" preferences.
  
  
• Popup Only
  Select this option if you already display a cookie banner on your site. This option makes the popup available using a JavaScript method that you add to a link in your banner.
  
  

Content

On the Content screen, customize the text displayed in the banner and popup, add languages for translated content, define custom parameters, and show a preview of the banner and popup.

Content Parameters

The Consent Manager uses parameters to construct the final text that displays on your site. It uses templates so that custom content can be easily added. Parameters are referenced in the templates in the format {{parameter_name}}.

The standard built-in content parameters are:

Banner Parameters

• Title {{title}}
  The main heading of the Banner or Pop-up.
• Message {{message}}
  Your message to customers to inform them about your tracking intentions and links to other resources such as a privacy policy or contact form.
• Do Not Sell Details Button {{details_button}}
  The label on the submission button.
• Continue to Site Button {{continue_button}}
  URL of the logo to display.
• Privacy Policy URL {{privacy_policy_url}}
  The URL to your Do Not Sell page.
• Privacy Policy Text {{privacy_policy_text}}
  The text of the link to your Do Not Sell page.
• Cookie Statement URL {{cookie_statement_url}}
  The URL to your cookie policy page.
• Cookie Statement Text  {{cookie_statement_text}}
  The text of the link to your cookie policy page.

Popup Parameters

• Title {{title}}
  The main heading of the popup.
• Message {{message}}
  Your message to customers to inform them about your tracking intentions.
• Do Not Sell Description  {{do_not_sell_description}}
  Description of what opt-out of selling of personal information means.
• Confirmation Button {{confirmation_button}}
  The label on the submission button.
• Company Logo URL  {{company_logo_url}}
  The URL of the logo to display.
• Do Not Sell Description  {{do_not_sell_description}}
  Description of what opt-out of selling of personal information means.

To edit the content of the standard parameters, modify the text fields and click Finish.

Sample HTML code with parameters:

<div class="privacy_prompt consent_doNotSell">
  <div class="privacy_prompt_content">
    <h1>{{title}}</h1>
    <img src="{{company_logo_url}}" class="logo">
    <p>{{message}}</p>
    <input id='consent_doNotSell_checkbox' type='checkbox' />
    {{do_not_sell_description}}
  </div>
  <div class="privacy_prompt_footer">
    <div class="button right" id="consent_doNotSell_submit">{{confirmation_button}}</div>
  </div>
  <div class="close_btn_thick"></div>
</div>

Custom Parameters

Custom parameters can be added to further customize the Consent Manager. These parameters can be referenced within the standard parameters or in the templates.

Best Practice: Avoid putting translatable text directly in the HTML or JavaScript. Instead, construct the code with {{parameters}} and define the values using custom parameters.

To add a custom parameter:

1. Scroll down to the Custom Parameters section and click + Add Parameter.
   The Custom Parameter dialog displays.
2. Enter a name for the parameter.
3. Click Apply.
   The new custom parameter displays in the list.
4. Enter a value for the new parameter.
   This value will be substituted where the parameter is referenced.
5. Click Finish.

Languages

The Consent Manager is built with automatic language detection. The banner and popup detects the language setting in the browser (two-character language code) and presents the corresponding version if that language has been configured. The prompt is configured in English (en) by default.

Language Overrides

You can optionally override the language with a value provided in the data layer if it is in the ISO format.

To override a language, use a preloader extension to set the gdprDLRef override:

window.utag_cfg_ovrd = window.utag_cfg_ovrd || {}; 
window.utag_cfg_ovrd.gdprDLRef = utag_data.site_language;

Adding a Language

To add a language:

1. In the Language side panel, click + Add.
   The Add Language dialog displays.
2. Select the desired language and click Apply.
   The new language displays in the side panel.
3. Click the new language to configure the content.
4. Enter the translated values in the standard parameter boxes (Title, Message, and Confirmation Button).
5. Click Finish.

Setting the Default Language

The default language is used to display the Consent Manager when the user's detected browser language does not have a matching language configured.

To set a default language:

1. Check the Make Default Language box located in the language title bar.
   
2. Click Preview to view your language configuration.

Customization (CSS, HTML, JavaScript)

On the Customization screen, you will see the code behind the banner and popup – the CSS, HTML, and JavaScript. This code can be edited to adjust the look and design of the banner and popup to match your website and customer needs.

The JavaScript code is minified before it is published into the utag.js file. If the minification process fails for any reason (such as a syntax error), the publish process halts and returns a warning message in Tealium iQ. Upon successful publish, when utag.js executes on the page, the Consent Manager JavaScript code is injected into the <head> of the page.

Affected Tags

On the Affected Tags screen you select the tags that are governed by your Do Not Sell policy--that is, tags that will be blocked if the user opts out of Do Not Sell. 

To select tags affected by your Do Not Sell policy:

1. Select a category from the sidebar.
   The list of tags displays in the main panel.
2. Tick the checkbox next to each affected tag or tick the checkbox at the top to select all tags displayed.
3. Click Finish.

Display Rule

On the Display Rule screen, you will select the load rule to determine when to load the banner and popup and display it to customers. You can select an existing load rule or create one to satisfy your legal criteria.

Consent Cookie

The prompt relies on a cookie named CONSENTMGR. The presence of this cookie and the values it contains will determine the behavior of the prompt and reflect the state of the visitor's choice. The key/value pairs are delimited by the pipe ("|") character.

The CONSENTMGR cookie stores the following key/value pairs related to the Do Not Sell Prompt:

• dns – a boolean value that reflects the Do Not Sell choice of the visitor:
  
  •  true – the visitor opted-in to Do Not Sell
  •  false –the visitor opted-out of Do Not Sell
• ts – the timestamp of the last state change

Example value of the CONSENTMGR cookie: ts:1525369619|dns:true

This cookie has a default expiry of 13 months from the time it is set or changed.

JavaScript Helper Functions

Once enabled and published, the CCPA banner and popup introduces JavaScript utility functions into the utag namespace to allow you to integrate additional functionality. The namespace utag.gdpr contains all of the consent management utility functions.

utag.gdpr.showDoNotSellBanner()

Displays the CCPA banner. By default, this function is called when the display rule evaluates to true .

Optionally set the language as a parameter when calling the function. This will override all other language detection logic.

utag.gdpr.showDoNotSellBanner("EN");

utag.gdpr.showDoNotSellPrompt()

Displays the CCPA popup. If you are not using the banner, integrate this function into your site banner to provide visitors a way to change their consent setting.

Optionally set the language as a parameter when calling the function. This will override all other language detection logic.

Example:

<a href="javascript&colon; utag.gdpr.showDoNotSellPrompt('EN')">Change Consent</a>

utag.gdpr.dns.getDnsState()

Returns the value of the dns consent cookie.

Example:

utag.gdpr.dns.getDnsState()
true

utag.gdpr.dns.setDnsState()

Set the value of the dns consent cookie. Recognized values: true, false, 1, 0, "true", "false".

Example:

utag.gdpr.dns.setDnsState(true);

utag.gdpr.getCookieValues()

Returns an object of key/value pairs from the CONSENTMGR cookie, accessible in the data layer object as utag.data['cp.CONSENTMGR'].

Example of consent declined:

utag.gdpr.getCookieValues()
{
  ts: "1525369619",
  consent: "true",
  dns: "false"
}