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

IAB TCF 2.2 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>

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>