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

UniConsent uses two kinds of consent, depending on your banner type and the visitor's region:

IAB TCF: the GDPR and IAB TCF Canada banners. Uses unic-purpose-id with the IAB TCF purpose IDs (1 to 11).
Consent Categories: the categories banner of Consent Categories projects, and the banners for LGPD (Brazil), PIPL (China), POPIA (South Africa), PDPD (Vietnam) and your other countries rules on any project. Uses unic-e-purpose-id with the category IDs (1 to 4).

Which attribute to use:

Attribute	Where it loads
`unic-e-purpose-id`, `unic-e-purpose-ids`	Everywhere. Where IAB TCF applies the categories follow its purposes, and after a US opt-out category 4 is off.
`unic-gcm-id`, `unic-gcm-ids`	Everywhere, from the Google Consent Mode signals.
`unic-cp-id`, `unic-cp-ids`	Everywhere, from your custom purposes.
`unic-purpose-id`, `unic-purpose-ids`	Where IAB TCF applies, with the US banners, and where no banner applies. Never where a Consent Categories banner applies, not even after the visitor accepts.
`unic-vendor-id`	With IAB TCF, when the visitor allows the custom vendor. With Consent Categories, it follows category 4. Needs Enable Custom Vendors.

Tip: for a script that should work in every region and with every banner type, use unic-e-purpose-id or unic-gcm-id. The plural attributes (unic-e-purpose-ids="2,4") load only when every listed ID is allowed.

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

Example 1: Load script for analytics consent (Consent Categories)

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

Example 2: Load external script for analytics (Consent Categories)

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

Example 3: Load Google Analytics (gtag.js) with Consent Categories

<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 (Consent Categories)

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

<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 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 Consent Categories consent types.

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

Google Consent Type	UniConsent Consent Categories 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).

AdSense reads the visitor's IAB TCF choice itself, and serves non-personalized or limited ads when personalized ads are not allowed. In most cases, keep the AdSense tags as they are: blocking them also stops those ads.

To show AdSense only to visitors who allow advertising profiles (IAB TCF purpose 3), change:

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

to:

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

Then change the ad slot tag on the page:

<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:

<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`	*	Consent category 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'`	Consent category
`'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 { }

When your CMP uses Consent Categories, use unic-e-purpose-id instead of unic-purpose-id:

Analytics widget (Consent Categories):

<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 (Consent Categories):

<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>

<!-- Consent Categories -->
<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 (Consent Categories). 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 Certified CMP

Microsoft UET Consent

Amazon Consent Signal

Meta Pixel Consent

TikTok Pixel Consent

Cookie Scanner

For Publishers

For Advertisers

For Shopify

For WordPress