Manage Opt-out privacy banner & popup
This article explains how to manage settings in the Opt-out Model privacy banner and popup.
Getting started
Use the following steps to begin setting up the Opt-out Consent Manager:
- In the left sidebar, go to Client-Side Tools > Consent Management.
If the Opt-ut Model banner and popup is already set up, you can toggle it on or off from this screen. - In the Opt-Out Model 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 popup. - 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:
- Scroll down to the Custom Parameters section and click + Add Parameter.
The Custom Parameter dialog appears. - Enter a name for the parameter.
- Click Apply.
The new custom parameter displays in the list. - Enter a value for the new parameter.
This value is substituted where the parameter is referenced. - 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:
- In the Language side panel, click + Add.
The Add Language dialog appears. - Select the desired language and click Apply.
The new language displays in the side panel. - Click the new language to configure the content.
- Enter the translated values in the standard parameter boxes (Title, Message, and Confirmation Button).
- 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:
- Check the Make Default Language box located in the language title bar.
- Click Preview to view your language configuration.
Customization (CSS, HTML, JavaScript)
The Customization screen displays 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 are blocked if the user opts out of Do Not Sell.
To select tags affected by your Do Not Sell policy:
- Select a category from the sidebar.
The list of tags appears in the main panel. - Tick the checkbox next to each affected tag or tick the checkbox at the top to select all tags displayed.
- Click Finish.
Enforcement rule
On the Enforcement Rule screen, select the load rule to determine when to enforce consent. You can select an existing load rule or create one to satisfy your legal criteria. For more information, see Load rules.
Consent cookie
The prompt relies on a cookie named CONSENTMGR
. The presence of this cookie and the values it contains 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 Sellfalse
– 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 functions
After the Opt-out banner and popup are enabled and published, JavaScript utility functions are available in 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 Opt-out Model 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 overrides all other language detection logic.
utag.gdpr.showDoNotSellBanner("EN");
utag.gdpr.showDoNotSellPrompt()
Displays the Opt-out Model 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 overrides all other language detection logic.
Example:
<a href="javascript: 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"
}
This page was last updated: February 28, 2024