How to condition your scripts

IAB vendors

As a default, we have enabled Didomi’s IAB Transparency & Consent framework integration. It means that the consent is automatically shared with all the active IAB vendors (if you suspect that we haven’t enabled a relevant vendor – please, let us know). If curious about IAB TCF, you can read more in the documentation here.

Note: Usually we are not activating all the IAB vendors by default, so if you decide to use a very new vendor, please, inform us & we will readjust your vendor list.

Categorization/Conditioning of other external scripts *

*based on Didomi documentation

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 potentially purposes – you can find out more here)

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

Examples

Google Analytics tag (before):

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

After categorization becomes:

<script type="didomi/javascript" data-vendor="c:googleana-4TXnJigR">
(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>

HTML element

Facebook like button (before):

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

After categorization becomes:

<script type="didomi/html" data-vendor="c:facebook-7ytVrMJJ">
  <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 as iab: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:

List of the most used vendors

Below is the list of most used vendors in our network. If you can’t find a vendor in the list, let us know. Please, use the ID in the second column to condition your external scripts.

Vendor name	IAB/SDK ID
Adnami Aps	iab:612
Amazon Advertising	iab:793
AudienceProject Aps	iab:394
Chartbeat	c:chartbeat
Digiseg ApS	iab:761
Facebook	c:facebook-7ytVrMJJ
Gemius SA	iab:328
Google Advertising Products	didomi:google
Google Analytics Products	c:googleana-4TXnJigR
Hotjar	c:hotjar
LinkedIn Corporation	c:linkedin
Microsoft Advertising	iab:1126
Outbrain UK Ltd	iab:164
Quantcast	iab:11
Readpeak Oy	iab:290
Salesforce.com, Inc.	iab:506
Shopify Stats	c:shopify-stats
Snap Inc.	c:snapinc-yhYnJZfT
Strossle International AB	iab:851
Taboola Europe Limited	iab:42
Tawk	c:tawk
Teads France SAS	iab:132
Twitter	didomi:twitter
Userneeds	c:userneeds
UserReport	c:userreport
UserReport-Analytics	c:userreport-analytics
Yahoo Analytics	c:yahoo-analytics
Youtube	c:youtube
Sleeknote	c:sleeknote-Y4VP8cg9

Add a link to open the consent preferences (e.g. in the footer of the site)

As mentioned in the previous article, we also suggest to implement the link for consent preferences. It will ensure that your visitors can change their consent preferences at any point in time. The link can be in a menu, in the footer of your website or in your privacy policy.

Danish:

<a href="javascript:Didomi.preferences.show()">Cookie indstillinger</a>

English:

<a href="javascript:Didomi.preferences.show()">Consent choices</a>