Collecting consents using custom scripts

Blocking the script call

To prevent the Google Analytics script from being triggered upon page load before the user has given the appropriate consent:

• Access your website’s settings and locate the Google Analytics script.
• Change the type parameter to text/plain.
• Add the attribute data-easycookie-{type} that matches the required consent type.

Available consent types:

• data-easycookie-aduser
• data-easycookie-adpersonalization
• data-easycookie-analytics
• data-easycookie-functionality
• data-easycookie-personalization
• data-easycookie-security

See how to modify your script using the example below.

Original script:

<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','//www.google-analytics.com/analytics.js','ga');

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

Modified script:

<script type="text/plain" data-easycookie-targeting>
(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','//www.google-analytics.com/analytics.js','ga');

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

‍
The Easycookie script functions simply. Once consent is given for a specific cookie type, scripts of that type automatically revert to the correct type=text/javascript. This effectively triggers them upon consent.

Asynchronous script execution

A potential issue with such scripts is that they are triggered by a DOM event, e.g., DOMContentLoaded. When this event occurs, the scripts might not be available yet, as they are still blocked by Easycookie. The most common example of this asynchronous scenario is the Meta pixel.

In this situation, we recommend integrating the script via GTM. However, if you opt for manual configuration, follow these steps:

• Remove the noscript tag.
• Utilize events available from the Consent API with Meta:
     
  fbq('consent', 'revoke'); // Withdraws permission for cookies
  fbq('consent', 'grant'); // Grants permission for cookies

Example of unaltered pixel code:

<script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document, 'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '{your-pixel-id-goes-here}');
    fbq('track', 'PageView');
</script>
<noscript>
    <img height="1" width="1" style="display:none"
         src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>

‍
Transformed code:

<!-- Facebook Pixel Code -->
<script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('consent', 'revoke');
    fbq('init', '{your-pixel-id-goes-here}');
    fbq('track', 'PageView');
    window.addEventListener('easycookieUpdateConsent',function(e){
    fbq('consent',e.detail.ad?'grant':'revoke')},!1)
</script>
<!-- End Facebook Pixel Code -->

‍
This ensures that upon page load, consent for cookies is initially denied. Then, listen for the easycookieUpdateConsent event triggered by Easycookie, which sends e.detail, and only then grant consent based on the type: ad, aduser, adpersonalization, analytics, personalization, security.

‍