Custom Sibbo <script> tags

Custom Sibbo <script> tags

You can utilize Sibbo <script> tags to selectively load JavaScript tags or other HTML elements on your webpage.

You have to run the code in this file: https://cmp.sibbo.net/v2.2/custom-sibbo-script-tags.js after loading Sibbo CMP core file and after loading Sibbo CMP configuration file, refere to Technical guide for the implementation of the CMP.
Please copy the code and include it in your webpage/app or copy the file and store it your server and load it in your webpage/app.

With this approach, you substitute your <script type="text/javascript"> tags or any HTML element with <script type="sibbo/javascript"> or <script type="sibbo/html"> tags, and incorporate data-* attributes that determine when the tags should be loaded based on the consent granted for vendors and/or purposes. Once the Sibbo CMP is loaded on a page or when the user provides consent, the tags will be examined and substituted according to the following process:

Custom Sibbo tag
Replacement
<script type="sibbo/javascript">...</script>
<script type="text/javascript">...</script>
<script type="sibbo/html">...</script>
<div>...</div>

During the replacement process, the Sibbo CMP preserves all the original attributes (including the data-* attributes) and content from the <script type="sibbo/javascript"> <script type="sibbo/html"> tags, eliminating the need for any additional modification apart from the HTML element itself.
The data-vendor attribute allows the inclusion of a single vendor ID and selectively loads a tag when the user provides consent for both the vendor and all the purposes associated with that vendor. The data-vendor-raw attribute, on the other hand, accepts a single vendor ID and conditionally loads a tag when the user grants consent for the vendor alone, without considering its associated purposes.

It's important to note that obtaining consent for purposes based on "Legitimate interest" is not mandatory prior to loading a tag for a vendor. Refer to the Purpose Consent section for obtaining necessary consent for specific purposes, regardless of the vendor's legal basis configuration.

JavaScript tag example of Google Analytics tag

If your original code is the following
  1. <script type="text/javascript">
  2. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  3. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  4. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  5. })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  6. ga('create', 'UA-XXXXX-Y', 'auto');
  7. ga('send', 'pageview');
  8. </script>
Then you have to rewrite the code this way 
  1. <script type="sibbo/javascript" data-vendor="iab:76">
  2. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  3. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  4. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  5. })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  6. ga('create', 'UA-XXXXX-Y', 'auto');
  7. ga('send', 'pageview');
  8. </script>
The loading of the Google Analytics tag on the page is dependent on the user granting consent specifically to the vendor Google and all of its associated purposes.

The vendor IDs listed for the data-vendor and data-vendor-raw attributes can have one of the following formats:
  1. For a vendor listed in the IAB global vendors list, you need to prefix the vendor ID with "iab:". For example, if the vendor ID is 1, it should be specified as "iab:1".
  2. For a custom vendor that is not part of the IAB list, that you have configured, the vendor ID must be prefixed with "c:".
In summary, the vendor IDs (and the corresponding values for the data-vendor and data-vendor-raw attributes) can take the following formats:
  1. iab: [Vendor ID from the IAB global vendors list]
  2. c: [Custom vendor ID configured by you] Possible values are: google, facebook, twitter, chartbeat, adobe-analytics, bluekai, conviva, omniture, iabSpain, matomo

HTML element example of Facebook like button

If your original code is the following
  1. <!-- Load Facebook SDK for JavaScript -->
  2. <div id="fb-root"></div>
  3. <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>
  4. <!-- Your like button code -->
  5. <div class="fb-like" data-href="https://www.your-domain.com/your-page.html" data-layout="standard" data-action="like" data-show-faces="true">
Then you have to rewrite the code this way 
  1. <!-- Load Facebook SDK for JavaScript -->
  2. <script type="sibbo/javascript" data-vendor="c:facebook" async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>
  3. <!-- Your like button code -->
  4. <script type="sibbo/html" data-vendor="c:facebook">
  5. <div id="fb-root"></div>
  6. <div class="fb-like" data-href="https://www.your-domain.com/your-page.html" data-layout="standard" data-action="like" data-show-faces="true">
  7. </script>
Likewise, the Facebook Like button is included on the page only if the user provides consent specifically to the vendor Facebook and all of its associated purposes.
Using Custom Sibbo <script> tags directly through Google Tag Manager (GTM) is not possible.
This limitation arises because GTM removes the custom tag data-* attributes when it incorporates them into the page. Consequently, you are unable to include Custom Sibbo <script> tags within GTM.

The data-purposes attribute allows you to provide a list of purpose IDs separated by commas. It enables the conditional loading of a tag when the user grants consent for all the specified purposes. However, it is recommended to use the data-vendor attribute as the primary method for selectively loading a tag. This attribute requires consent for both the specific vendor and its associated purposes.

If desired, data-purposes can be combined with data-vendor to enforce consent for specific purposes in addition to the vendor's associated purposes. This combination may be necessary if the vendor has chosen "legitimate interest" as the legal basis for one or more purposes or if a purpose is not directly associated with the vendor.

JavaScript tag example of Google Analytics tag

If your original code is the following
  1. <script type="text/javascript">
  2. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  3. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  4. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  5. })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  6. ga('create', 'UA-XXXXX-Y', 'auto');
  7. ga('send', 'pageview');
  8. </script>
Then you have to rewrite the code this way 
  1. <script type="sibbo/javascript" data-vendor="iab:76" data-purposes="1,3,7">
  2. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  3. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  4. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  5. })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  6. ga('create', 'UA-XXXXX-Y', 'auto');
  7. ga('send', 'pageview');
  8. </script>
In the case of the Google Analytics tag, it is loaded on the page when the user grants consent to the vendor Google and it's mandatory purposes, as well as the purposes 1, 3, 7.

HTML element example of Facebook like button

If your original code is the following
  1. <!-- Load Facebook SDK for JavaScript -->
  2. <div id="fb-root"></div>
  3. <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>
  4. <!-- Your like button code -->
  5. <div class="fb-like" data-href="https://www.your-domain.com/your-page.html" data-layout="standard" data-action="like" data-show-faces="true">
Then you have to rewrite the code this way 
  1. <!-- Load Facebook SDK for JavaScript -->
  2. <script type="sibbo/javascript" data-vendor="c:facebook" data-purposes="1,3,7" async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>
  3. <!-- Your like button code -->
  4. <script type="sibbo/html" data-vendor="c:facebook">
  5. <div id="fb-root"></div>
  6. <div class="fb-like" data-href="https://www.your-domain.com/your-page.html" data-layout="standard" data-action="like" data-show-faces="true">
  7. </script>
Similarly, the Facebook Like button is loaded on the page only if the user gives consent to the vendor Facebook, all it's mandatory purposes, as well as the purposes 1, 3, 7



Using Custom Sibbo <script> tags directly through Google Tag Manager (GTM) is not possible.
This limitation arises because GTM removes the custom tag data-* attributes when it incorporates them into the page. Consequently, you are unable to include Custom Sibbo <script> tags within GTM.