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, Easy Mode purposes, or Google Consent Mode types.

UniConsent supports two consent modes. The mode that applies depends on your CMP configuration and the visitor's region:

IAB TCF Mode — Used for GDPR (EU) compliance with the IAB Transparency & Consent Framework. Uses unic-purpose-id attributes with TCF purpose IDs (1–11).
Easy Mode (Simple Mode) — A simplified consent mode for non-TCF regions such as LGPD (Brazil), PIPL (China), POPIA (South Africa), or any region where you enable Easy Mode. Uses unic-e-purpose-id attributes with Easy purpose IDs (1–4).

Important: When Easy Mode is enabled for a region, only unic-e-purpose-id attributes are processed. Scripts using unic-purpose-id will not be activated. Make sure to use the correct attribute for your CMP configuration.

If you are unsure which mode applies, check your CMP dashboard settings for "Easy Mode" and "Region" configuration.

Easy Mode Purpose IDs

Purpose ID	Description
1	Strictly Necessary — Essential cookies for basic site functionality (always granted)
2	Performance / Analytics — Analytics and measurement cookies
3	Functionality — Cookies for enhanced features and personalization
4	Targeting / Advertising — Cookies for advertising and tracking

Loading Scripts Based on Easy Mode Purpose ID

Example 1: Load script for analytics consent (Easy Mode)

<script type="text/unicscript" unic-e-purpose-id="2">
  console.log('Analytics consent granted');
</script>

Example 2: Load external script for analytics (Easy Mode)

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

Example 3: Load Google Analytics (gtag.js) with Easy Mode

<script type="text/unicscript" unic-e-purpose-id="2" async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/unicscript" unic-e-purpose-id="2">
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Example 4: Load script for advertising consent (Easy Mode)

<script type="text/unicscript" unic-e-purpose-id="4" src="https://example.com/ads.js"></script>

Loading Iframes Based on Easy Mode Purpose ID

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

IAB TCF Mode

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

Loading Scripts Based on TCF Purpose ID

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 added on the 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 { }

Easy Mode Examples

When your CMP uses Easy Mode, use unic-e-purpose-id instead of unic-purpose-id:

Analytics widget (Easy Mode):

<div data-unicscript
     style="display:none"
     unic-e-purpose-id="2"
     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/analytics-widget.js"></script>
    <div id="analytics-widget"></div>
</div>

Advertising content (Easy Mode):

<div data-unicscript
     style="display:none"
     unic-e-purpose-id="4"
     unic-consent-message="Please accept advertising cookies to view this content."
     unic-consent-button="Accept"
     unic-consent-action="grant">
    <div id="ad-slot"></div>
</div>

YouTube video:

<!-- IAB TCF Mode -->
<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>

<!-- Easy Mode -->
<div data-unicscript
     style="display:none"
     unic-e-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>

X (Twitter) post:

<div data-unicscript
     style="display:none"
     unic-e-purpose-id="4"
     unic-consent-message="Please accept cookies to view this X post."
     unic-consent-button="Show Post"
     unic-consent-action="grant">
    <blockquote class="twitter-tweet">
        <a href="https://twitter.com/user/status/XXXX"></a>
    </blockquote>
    <script type="text/plain" src="https://platform.twitter.com/widgets.js"></script>
</div>

Instagram post:

<div data-unicscript
     style="display:none"
     unic-e-purpose-id="4"
     unic-consent-message="Please accept cookies to view this Instagram post."
     unic-consent-button="Show Post"
     unic-consent-action="grant">
    <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/XXXX/">
    </blockquote>
    <script type="text/plain" src="https://www.instagram.com/embed.js"></script>
</div>

Facebook post:

<div data-unicscript
     style="display:none"
     unic-e-purpose-id="4"
     unic-consent-message="Please accept cookies to view this Facebook post."
     unic-consent-button="Show Post"
     unic-consent-action="grant">
    <div class="fb-post" data-href="https://www.facebook.com/user/posts/XXXX"></div>
    <script type="text/plain" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"></script>
</div>

TikTok video:

<div data-unicscript
     style="display:none"
     unic-e-purpose-id="4"
     unic-consent-message="Please accept cookies to view this TikTok video."
     unic-consent-button="Show Video"
     unic-consent-action="grant">
    <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@user/video/XXXX">
    </blockquote>
    <script type="text/plain" src="https://www.tiktok.com/embed.js"></script>
</div>

Google Maps:

<div data-unicscript
     style="display:none"
     unic-e-purpose-id="3"
     unic-consent-message="Please accept cookies to view the map."
     unic-consent-button="Show Map"
     unic-consent-action="grant">
    <iframe data-src="https://www.google.com/maps/embed?pb=XXXX"
            width="600" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>
</div>

Disqus comments:

<div data-unicscript
     style="display:none"
     unic-e-purpose-id="3"
     unic-consent-message="We need your consent to display comments."
     unic-consent-button="Show Comments"
     unic-consent-action="grant">
    <div id="disqus_thread"></div>
    <script type="text/plain">
        var disqus_config = function () { this.page.url = PAGE_URL; this.page.identifier = PAGE_IDENTIFIER; };
        (function() { var d = document, s = d.createElement('script');
        s.src = 'https://EXAMPLE.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s); })();
    </script>
</div>

Note: The examples above use unic-e-purpose-id (Easy Mode). If your site uses IAB TCF Mode, replace with the appropriate unic-purpose-id (e.g. unic-purpose-id="1" for device storage, unic-purpose-id="4" for personalized advertising).

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 2.3 Certified CMP

Microsoft UET Consent

Cookie Scanner

For Publishers

For Advertisers

For Shopify

For WordPress

Compare CMPs