Custom Didomi <script> tags
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.The
data-vendor attribute accepts a single vendor ID and conditionally loads a tag when the user gives consent to a vendor and to 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 gives consent to a vendor (does not include its purposes).Note that consent to purposes with legal basis "Legitimate interest" is not required before loading a tag for a vendor. Read the Consent to purposes section to required consent for specific purposes irrespective of the vendor's legal bases configuration.
Examples
JavaScript tag
HTML element
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="c: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="didomi: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="didomi: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.
The list of vendor IDs (and possible values for the
data-vendor and data-vendor-raw attribute) is either:- A vendor from the IAB global vendors list. In that case, you must prefix the vendor with
iab:. Example: the vendor with ID 1 must be specified asiab:1. - A non-IAB vendor managed by Didomi. In that case, it must be prefixed with
didomi:. - A custom vendor that you configured. It must be prefixed with
c:.
To find your vendor ID, go to the Vendors and Purposes section of your Didomi account and copy the SDK ID:
Copy the SDK ID to get your vendor ID
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 ManagerBecause GTM removes custom tag
data-* attributes when it adds them to the page, you cannot add Didomi <script> tags in GTM.The
data-purposes attribute accepts a comma-separated list of purpose IDs and conditionally loads a tag when the user gives consent to all the specified purposes.data-vendor is the recommended way of conditionally loading a tag as you need consent for the specific vendor and for 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
JavaScript tag
HTML element
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="c: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="didomi: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 ManagerBecause GTM removes custom tag
data-* attributes when it adds them to the page, you cannot add Didomi <script> tags in GTM.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 |
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="iab:8" type="didomi/javascript">
console.log(`
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:
//
// Does GDPR apply: 1
// GDPR consent string: EXAMPLE_OF_CONSENT_STRING
// Does the data-vendor (IAB vendor 8) have consent:
// 1
// or true
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.Last modified 1yr ago