Leading Consent Management Platform

Compliant with GDPR, CCPA, COPPA, LGPD, PECR, PDPA, PIPEDA, and more.

Theme

Managing On-Page Elements and Tags with UnicScript

You can manage on-page elements using UnicScript to load tags based on user consent for specific purpose IDs or custom vendor IDs, as defined by IAB TCF 2.3 purposes or Google Consent Mode types.

IAB TCF 2.3 Purpose IDs

Purpose ID	Description
1	Store and/or access information on a device
2	Use limited data to select advertising
3	Create profiles for personalized advertising
4	Use profiles to select personalized advertising
5	Create profiles to personalize content
6	Use profiles to select personalized content
7	Measure advertising performance
8	Measure content performance
9	Understand audiences through statistics or data combinations from various sources
10	Develop and improve services
11	Use limited data to select content

You can load inline JavaScript dynamically based on consent for specific purpose IDs.

Example 1: Load script for a single purpose ID

<script type="text/unicscript" unic-purpose-id="1">
  console.log('Consent granted for purpose 1');
</script>

Example 2: Load external script with a purpose ID

<script type="text/unicscript" unic-purpose-id="1" src="path-to-external-script.js"></script>

Loading Inline JavaScript Based on Multiple Purpose IDs

Example: Load script for multiple purpose IDs

<script type="text/unicscript" unic-purpose-ids="1,2,3">
  console.log('Consent granted for purposes 1, 2, and 3');
</script>

Example:

<script type="text/unicscript" unic-vendor-id="1">
  console.log('hello vendor 1');
</script>

Example 2:

<script type="text/unicscript" unic-vendor-id="1" src="xxxxx"></script>

You can load iframes dynamically based on consent for a specific purpose ID.

Example: Load iframe for a single purpose ID

<iframe
  data-unicscript
  unic-purpose-id="1"
  width="560"
  height="315"
  data-src="https://www.youtube.com/embed/XXXX"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Loading Inline Iframes Based on Multiple Purpose IDs

Example: Load iframe for multiple purpose IDs

<iframe
  data-unicscript
  unic-purpose-ids="1,2,3"
  width="560"
  height="315"
  data-src="https://www.youtube.com/embed/XXXX"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Example: Load iframe for a single vendor ID

<iframe
  unic-vendor-id="1"
  width="560"
  height="315"
  data-src="https://www.youtube.com/embed/XXXX"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Loading Inline JavaScript Based on Custom Purpose IDs

You can load scripts and iframes based on consent for Custom Purposes using the unic-cp-id and unic-cp-ids attributes.

Example 1: Load script for a single custom purpose ID

<script type="text/unicscript" unic-cp-id="custom_analytics">
  console.log('Custom analytics consent granted');
</script>

Example 2: Load external script for a custom purpose ID

<script type="text/unicscript" unic-cp-id="custom_analytics" src="https://example.com/analytics.js"></script>

Example 3: Load script for multiple custom purpose IDs (all must be consented)

<script type="text/unicscript" unic-cp-ids="custom_analytics,ab_testing">
  console.log('Both custom purposes consented');
</script>

Example 4: Load iframe for a custom purpose ID

<iframe
  data-unicscript
  unic-cp-id="custom_analytics"
  width="560"
  height="315"
  data-src="https://example.com/widget"
  frameborder="0"
></iframe>

This section outlines how to load inline JavaScript based on the consent types in Google Consent Mode, matched with UniConsent's Simple Mode consent types.

The table below outlines how various Google Consent Mode consent types map to UniConsent Simple Mode consent types, and their respective purposes:

Google Consent Type	UniConsent Simple Mode Type	Purpose
`ad_storage`	Targeting and Advertising	Enables advertisement cookies.
`analytics_storage`	Performance	Enables analytics cookies.
`functionality_storage`	Functionality	Enables functional cookies for website functionality and settings.
`personalization_storage`	Functionality	Enables functional cookies for user personalization.
`security_storage`	Strictly Necessary	Enables necessary cookies for website security, protection, and UI preferences. These cookies do not require consent.
`ad_user_data`	Targeting and Advertising	Enables advertisement cookies and sets consent for sending personal data to Google's core services.
`ad_personalization`	Targeting and Advertising	Enables advertisement cookies for data usage in ad personalization, such as remarketing.

Example: Loading Inline JavaScript

Use the following format to load inline JavaScript based on user consent:

<script type="text/unicscript" unic-gcm-id="functionality_storage">
  console.log('Consent for functionality storage is granted, script is executed.');
</script>

You can specify multiple consent types using the unic-gcm-ids attribute, as shown below:

<script type="text/unicscript" unic-gcm-ids="analytics_storage,ad_user_data">
  console.log('Consent for analytics storage and ad user data is granted, script is executed.');
</script>

You can also apply consent settings to iframes. Here’s an example:

<iframe data-unicscript unic-gcm-ids="functionality_storage,ad_personalization" 
  width="560" height="315" 
  data-src="https://www.youtube.com/embed/XXXXXXX" 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

This example ensures that the iframe content only loads if consent is provided for the specified categories (functionality_storage and ad_personalization).

Change:

<script
  async
  src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  type="text/javascript"
></script>

to be:

<script
  async
  src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  unic-purpose-id="3"
  type="text/unicscript"
></script>

Modify the Google Adsense ad slot tag adding on page, change:

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script type="text/javascript">
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

to be:

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script type="text/unicscript" unic-purpose-id="3" >
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Display an inline placeholder with a custom message when content is blocked due to missing consent. Once consent is granted, the placeholder disappears and the original content is revealed.

This is useful for embedded content like YouTube videos, analytics widgets, or third-party scripts where you want to show users why the content is blocked and give them a way to grant consent directly.

Basic Usage

Wrap your content in a <div> with data-unicscript and the appropriate purpose attribute:

<div data-unicscript
     style="display:none"
     unic-purpose-id="1"
     unic-consent-message="We need your consent to show this content."
     unic-consent-button="Allow">
    <iframe data-src="https://www.youtube.com/embed/XXXX"
            width="560" height="315" allowfullscreen></iframe>
</div>

Important: Always add style="display:none" to prevent flash of content before the CMP loads.

Attributes

Attribute	Required	Description
`data-unicscript`	Yes	Marks the div for consent control
`style="display:none"`	Yes	Prevents content flash before CMP loads
`unic-purpose-id`	*	Single IAB TCF purpose ID (e.g. `"1"`)
`unic-purpose-ids`	*	Multiple IAB TCF purpose IDs, comma-separated (e.g. `"1,3,4"` — all must be granted)
`unic-cp-id`	*	Custom purpose ID
`unic-e-purpose-id`	*	Easy purpose ID
`unic-gcm-id`	*	Google Consent Mode signal (e.g. `"analytics_storage"`)
`unic-vendor-id`	*	Custom vendor ID
`unic-consent-message`	No	Custom message (default: "This content requires your consent to be displayed.")
`unic-consent-button`	No	Button text (default: "Accept")
`unic-consent-action`	No	`"grant"` = grant consent silently via API, `"open"` or omitted = open CMP dialog

* One purpose attribute is required.

Blocking Content Inside the Div

Iframes — use data-src instead of src to prevent loading before consent:

<iframe data-src="https://www.youtube.com/embed/XXXX" width="560" height="315"></iframe>

Scripts — use type="text/plain" to prevent execution before consent:

<script type="text/plain" src="https://example.com/analytics.js"></script>

<script type="text/plain">
    console.log('This runs only after consent is granted');
</script>

When consent is granted, data-src is copied to src and type="text/plain" scripts are activated automatically.

Button Action Modes

Open CMP Dialog (default)

Clicking the button opens the full consent management UI where the user can review and grant consent:

<div data-unicscript
     style="display:none"
     unic-purpose-id="3"
     unic-consent-message="This content uses advertising cookies."
     unic-consent-button="Manage Preferences">
    <div id="ad-slot"></div>
</div>

Clicking the button silently grants the required purpose and immediately reveals the content:

<div data-unicscript
     style="display:none"
     unic-purpose-id="1"
     unic-consent-message="We need analytics consent to show this widget."
     unic-consent-button="Accept Analytics"
     unic-consent-action="grant">
    <script type="text/plain" src="https://example.com/widget.js"></script>
    <div id="analytics-widget"></div>
</div>

JavaScript API: grantPurpose

You can grant a specific purpose programmatically without showing any UI:

window.__unicapi('grantPurpose', 2, function(){}, {type: 'p', id: '1'});

Type	ID Format	Example	Description
`'p'`	Single or comma-separated	`'1'` or `'1,3,4'`	IAB TCF purpose(s)
`'cp'`	String ID	`'analytics'`	Custom purpose
`'ep'`	Numeric string	`'2'`	Easy purpose
`'v'`	Numeric string	`'123'`	Custom vendor
`'gcm'`	Signal name	`'analytics_storage'`	Google Consent Mode

Examples:

// Grant IAB purpose 1
window.__unicapi('grantPurpose', 2, function(){}, {type: 'p', id: '1'});

// Grant multiple IAB purposes at once
window.__unicapi('grantPurpose', 2, function(){}, {type: 'p', id: '1,3,4'});

// Grant a custom purpose
window.__unicapi('grantPurpose', 2, function(){}, {type: 'cp', id: 'analytics'});

// Grant a custom vendor
window.__unicapi('grantPurpose', 2, function(){}, {type: 'v', id: '512'});

// Grant Google Consent Mode analytics
window.__unicapi('grantPurpose', 2, function(){}, {type: 'gcm', id: 'analytics_storage'});

Customizing Placeholder Styles

The placeholder uses these CSS classes which you can override:

.unic-consent-placeholder { }           /* outer container */
.unic-consent-placeholder-inner { }     /* flex wrapper */
.unic-consent-placeholder-message { }   /* message text */
.unic-consent-placeholder-btn { }       /* button */
.unic-consent-placeholder-btn:hover { }

Full Examples

YouTube video blocked until advertising consent:

<div data-unicscript
     style="display:none"
     unic-purpose-id="4"
     unic-consent-message="Please accept advertising cookies to watch this video."
     unic-consent-button="Accept & Play"
     unic-consent-action="grant">
    <iframe data-src="https://www.youtube.com/embed/XXXX"
            width="560" height="315" allowfullscreen></iframe>
</div>

Analytics widget requiring multiple purposes:

<div data-unicscript
     style="display:none"
     unic-purpose-ids="1,3"
     unic-consent-message="This dashboard requires device storage and personalization consent."
     unic-consent-button="Enable Dashboard"
     unic-consent-action="grant">
    <script type="text/plain" src="https://example.com/dashboard.js"></script>
    <div id="analytics-dashboard"></div>
</div>

Google Consent Mode gated content:

<div data-unicscript
     style="display:none"
     unic-gcm-id="ad_storage"
     unic-consent-message="Ad storage consent is required for personalized recommendations."
     unic-consent-button="Allow"
     unic-consent-action="grant">
    <script type="text/plain">
        loadPersonalizedRecs();
    </script>
    <div id="personalized-recs"></div>
</div>

Consent Management for Web

Mobile App CMP

Google Consent Mode

Google Tag Gateway

IAB TCF v2 CMP

Cookie Scanner

For Publishers

For Advertisers

For Shopify

For WordPress