Didomi - Developers documentation
  • Introduction
  • SDKs
    • Introduction
    • Web SDK
      • Getting started
      • Tags and vendors management
        • Tags management
          • Events & Variables
            • Deprecated
            • Custom events
          • Tag managers
            • Adobe Launch/DTM
            • Eulerian
            • Google Tag Manager
              • Configure the Didomi / GTM integration
              • Didomi's GTM template
            • Tealium
            • Other tag managers
        • Custom Didomi <script> tags
        • Third-party integrations
          • Google Ad Manager / AdSense
            • GDPR via Non-Personalized Ads
              • Share consent and load/refresh ads
              • Share consent without loading or refreshing ads
            • US states laws
          • Google Consent Mode V2
          • Kameleoon
          • Piano Analytics (AT Internet)
          • Prebid
            • GDPR via IAB TCF
            • US states laws
          • Salesforce DMP (Krux)
        • IAB frameworks
        • Programmatic API
      • Configuration
        • Bots (SEO & Performance tools)
        • Configuration by URL
        • Cookies and storage
        • Custom domains for events
        • Notice
          • Behavior
          • Interactions
          • Look and feel
        • Preferences
        • Theme
      • AB tests
      • Custom domain
        • Domain delegation
        • Reverse proxy
      • Share consents between domains
      • Share consents across devices
      • Pass user choices in query string
      • Serve Didomi assets from your domain
      • Reference
        • API
          • Deprecated
        • Events
      • Performance
    • Mobile and TV SDKs
      • Android and Android TV
        • Setup
        • Logging
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • iOS and tvOS
        • Setup
        • Logging
        • App Tracking Transparency (iOS 14.5+)
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • Unity
        • Setup
        • Reference
        • Versions
        • Troubleshooting
      • React Native
        • Setup
        • Reference
          • Deprecated
        • Versions
      • Flutter
        • Setup
        • Reference
        • Versions
      • Consent notice
        • Getting started
        • Customize the notice
        • Customize the preferences popup
        • Customize the theme & UI
        • Load notice by ID
      • Third-party SDKs
      • Share consents across devices
      • Share consent with WebViews
      • Google Consent Mode v2
      • FAQ
    • AMP SDK
      • Blocking Behaviors
        • Load immediately on page load
        • Load only after consent (positive or negative)
        • Load only after positive consent
      • Consent status for vendors
    • Didomi Consent String
      • Didomi Consent String Structure
      • Purposes & Vendors Numerical IDs
      • Consent String Examples
      • Decoding tools
    • Help & Support
  • API
    • Introduction
      • Authentication
      • Errors
      • Pagination
      • Filters
      • Caching
      • Rate limiting
      • Quotas
      • Translations
    • Data Manager
      • Regulations
      • Configuration Tree
      • Purposes
        • Purposes & Vendors Numerical IDs
      • Preferences Library
      • User Rights
    • Widgets
      • Consent notices
        • Notices
        • Configurations
        • Multi-Regulation Configurations
          • Migration of Existing Notices and API Updates
        • Deployments
        • Tutorials
          • Create and publish a consent notice
          • Create and publish a multi-regulation consent notice
      • Privacy widgets
        • Create a widget
        • Retrieve widgets
        • Edit a widget
          • Content & Design
            • Themes & Shapes
            • Components
              • auth
              • dsar_form
              • footer
              • header
              • preference
              • preference_value
              • save
              • section
              • sections
            • Options
          • Purposes & preferences
          • Settings
        • Deploy a Widget
          • Use your own subdomain
          • Use your own domain
          • Implement an embeddable widget on your website
        • Authentication
          • Manage authentication providers
          • Authenticate your end-user
        • Archive a widget
        • Headless widgets
          • Public Methods
          • Custom elements
          • Custom events
          • Event listeners
        • Tutorial
          • Launch a Preference Center from a mobile app
    • Compliance Reports
      • Properties
      • Reports
      • CSV format reference
      • Websites
    • Consents and Preferences
      • Events
        • Generate IAB TCF consent string
      • Links
      • Proofs
      • Tokens
      • Secrets
      • Users
      • Tutorial
        • Collect and operate data
    • Privacy Requests
      • Requests
      • Notes
      • Links
      • Emails
  • Integrations
    • Introduction
      • Quotas
    • Generic integrations
      • Batch export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
        • Exported data
          • Notices consents
        • Logs
      • Webhooks
      • Batch import
      • Analytics export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
    • Third-party apps
      • CMP integrations
        • Didomi-mParticle integration for your CMP
        • Deploy Didomi’s SDK for your Adobe Commerce website
      • Preference Management Platform integrations
        • Actito
        • Adobe Campaign Classic
        • Adobe Experience Cloud
        • Adobe Marketo Engage
        • Adobe Source Connector
        • Braze
        • Dotdigital
        • Hubspot
        • Mailchimp
        • Microsoft Dynamics 365
        • Salesforce Marketing Cloud
        • Salesforce Sales & Service Cloud
        • Selligent
        • Brevo (ex Sendinblue)
    • Tutorials
      • Configure a HTTP webhook
      • Configure a batch export
      • Configure an analytics export
    • Emailing
      • Configurations
        • Actito Email
        • Actito SMS
        • Adobe Campaign Classic
        • Adobe Campaign Standard
      • Emails
        • Templates
        • Manage your templates
Powered by GitBook
On this page
  • Consent to vendors
  • Consent to purposes
  • Macros
  • Immediate loading
  1. SDKs
  2. Web SDK
  3. Tags and vendors management

Custom Didomi <script> tags

PreviousOther tag managersNextThird-party integrations

Last updated 1 year ago

Didomi <script> tags can be used to conditionally load JavaScript tags or other HTML elements on your page.

In this method, you replace your <script type="text/javascript"> tags or any HTML element with <script type="didomi/javascript"> or <script type="didomi/html"> tags and add data-* attributes determining when the tags should be loaded based on consent given to vendors and/or purposes.

When the Didomi SDK is loaded on a page or when the user gives consent, the tags will be scanned and replaced as follows:

Tag
Replacement

<script type="didomi/javascript">...</script>

<script type="text/javascript">...</script>

<script type="didomi/html">...</script>

<div>...</div>

The Didomi SDK keeps all the original attributes (including the data-* attributes) and content from the <script type="didomi/javascript|html"> tags when doing the replacement so no other change than the HTML element is required.

Consent to vendors

The data-vendor attribute accepts a single vendor ID and conditionally loads a tag when the user enables a vendor and all the purposes required by that vendor.

The data-vendor-raw attribute accepts a single vendor ID and conditionally loads a tag when the user enables a vendor (does not include its purposes).

Note that enabling purposes with legal basis "Legitimate interest" is not required before loading a tag for a vendor. Read the section to required consent for specific purposes irrespective of the vendor's legal bases configuration.

Examples

Google Analytics tag:

<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

becomes

<script type="didomi/javascript" data-vendor="custom-vendor-id">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

The Google Analytics tag is only loaded onto the page when the user gives consent to the vendor Google and all its associated purposes.

Facebook like button:

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>

<!-- Your like button code -->
<div class="fb-like" 
  data-href="https://www.your-domain.com/your-page.html" 
  data-layout="standard" 
  data-action="like" 
  data-show-faces="true">

becomes

<script type="didomi/html" data-vendor="facebook">
	<div id="fb-root"></div>
	<div class="fb-like" 
	data-href="https://www.your-domain.com/your-page.html" 
	data-layout="standard" 
	data-action="like" 
	data-show-faces="true">
</script>

<script type="didomi/javascript" data-vendor="facebook" async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>

The Facebook Like button is only loaded onto the page when the user gives consent to the vendor Facebook and all its associated purposes.

How to find your vendor ID?

  • To find your vendor ID, navigate to the Didomi Console -> Consent notices -> Open your notice -> Regulation -> Edit vendors and Purposes: Use the API ID.

  • Vendor IDs are unique and are the same across all regulations and notices.

The Didomi Web SDK used to format vendor IDs with a prefix ( prefix:ID,).

The prefix that were supported:

  • iab: for IAB vendors.

  • didomi: for Didomi vendors.

  • c: for custom vendors.

To keep backward compatibility, the data-vendor and data-vendor-raw continue to support prefixed vendor IDs. However it is mandatory to switch to the non-prefixed vendor IDs (i.e API ID) if you are willing to use multiple regulations.

The didomi/javascript and didomi/html tags must be placed before the Didomi SDK tag on the page.

If they are not, the Didomi SDK might sometimes miss them if it gets executed before the HTML page is fully parsed.

Didomi <script> tags cannot be used through Google Tag Manager

Because GTM removes custom tag data-* attributes when it adds them to the page, you cannot add Didomi <script> tags in GTM.

Consent to purposes

The data-purposes attribute accepts a comma-separated list of purpose IDs and conditionally loads a tag when the user enables all the specified purposes.

data-vendor is the recommended way of conditionally loading a tag as you need the user to enable a specific vendor and its associated purposes. It can be combined with data-purposes if you want to force consent for specific purposes on top of the vendor's associated purposes. It can be because the vendor has chosen legitimate interest as a legal basis for one or more purposes or because a purpose is not associated with the vendor.

Examples

Google Analytics tag:

<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

becomes

<script type="didomi/javascript" data-vendor="custom-vendor-id" data-purposes="measure_ad_performance,improve_products">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

The Google Analytics tag is only loaded onto the page when the user gives consent to the vendor Google, all its required purposes, and the purposes cookies (Information storage and access) and analytics (Measurement).

Facebook like button:

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>

<!-- Your like button code -->
<div class="fb-like" 
  data-href="https://www.your-domain.com/your-page.html" 
  data-layout="standard" 
  data-action="like" 
  data-show-faces="true">

becomes

<script type="didomi/html" data-vendor="facebook" data-purposes="measure_ad_performance,improve_products">
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>

<!-- Your like button code -->
<div class="fb-like" 
  data-href="https://www.your-domain.com/your-page.html" 
  data-layout="standard" 
  data-action="like" 
  data-show-faces="true">
</script>

The Facebook Like button is only loaded onto the page when the user gives consent to the vendor Facebook, all its required purposes, and the purposes measure_ad_performance and improve_products.

The didomi/javascript and didomi/html tags must be placed before the Didomi SDK tag on the page.

If they are not, the Didomi SDK might sometimes miss them if it gets executed before the HTML page is fully parsed.

Didomi <script> tags cannot be used through Google Tag Manager

Because GTM removes custom tag data-* attributes when it adds them to the page, you cannot add Didomi <script> tags in GTM.

Macros

A macro is a string that will be replaced into a certain value once the script is loaded. It can be used to share consent information with partners embedded in didomi/javascript and didomi/html scripts.

The available macros are:

Name
Value
Description

regulation_name

string

The name of the regulation that applies for the current user.

Possible values: gdpr, cpra.. When no regulation applies to the current user regulation_name returns none.

gdpr

0 or 1

Whether GDPR applies to the current request or not

gdpr_consent

string

IAB consent string

gdpr_consent_vendor

0 or 1

Does the vendor specified in data-vendor have consent?

gdpr_consent_vendor_boolean

boolean

Does the vendor specified in data-vendor have consent?

gdpr_consent_vendor_raw

0 or 1

Does the vendor specified in data-vendor-raw have consent?

gdpr_consent_vendor_boolean_raw

boolean

Does the vendor specified in data-vendor-raw have consent?

<script data-vendor="8" type="didomi/javascript">
  console.log(`
    Which regulation applies: {regulation_name} // Will be replaced with gdpr or cpra..
    // Or: Does GDPR apply: {gdpr} // Will be replaced with 0 or 1.
    GDPR consent string: {gdpr_consent} // Will be replaced with the consent string
    Does the data-vendor (IAB vendor 8) have the consent: 
    {gdpr_consent_vendor} // Will be replaced with 0 or 1
    or {gdpr_consent_vendor_boolean} // Will be replaced with true or false
  `)
</script>

//  Output if GDPR applies, IAB vendor 8 has consent and the consent string is EXAMPLE_OF_CONSENT_STRING: 
//    Which regulation applies: gdpr
//    // Or: Does GDPR apply: 1
//    GDPR consent string: EXAMPLE_OF_CONSENT_STRING
//    Does the data-vendor (IAB vendor 8) have consent: 
//    1 
//    or true

Immediate loading

By default, custom Didomi <script> tags are loaded on the page after the user gives consent (be it on the same page or on a previous page).

If you want to load these tags on the page immediately, irrespective of the user consent status, add a data-loading attribute with the value immediate. This supports use cases like always loading a tag on a page and passing the current user consent status to it.

Immediate loading should only be used in conjunction with macros in your tags as it allows you to load a tag on page load and get the user consent status through a macro, whether the consent status is positive or negative.

If you are not using macros and enable immediate loading for a tag, the result is the same as keeping a regular <script type="text/javascript"> tag or HTML element on your page as it will always be loaded on the page without conditions.

Consent to purposes