Putting a script with a src inside another script tag

Question

I'm having a problem with making a script GDPR compliant.

This is the albacross script tag that I need to install on my wordpress site

<script>window._nQc="89458209";</script>
<script async src="https://serve.albacross.com/track.js"></script>

To make it GDPR compliant, we use www.cookieinformation.com. They wrap scripts in their own script to make sure they only fire if a user has accepted cookies. This is the script we wrap other data collecting scripts with:

<script>
window.addEventListener('CookieInformationConsentGiven', function (event) { 
    if (CookieInformation.getConsentGivenFor('cookie_cat_statistic')) {

//Script that needs to be GDPR compliant goes here

    }
}, false);
</script>

This does not work ofcourse:

<script>
window.addEventListener('CookieInformationConsentGiven', function (event) { 
    if (CookieInformation.getConsentGivenFor('cookie_cat_statistic')) {

<script>window._nQc="89458209";</script>
<script async src="https://serve.albacross.com/track.js"></script>

    }
}, false);
</script>

How would you implement it so that the albacross script won't fire until the cookieinformation script allows it to?

Answer 1

You can add a new balise script via JS

  const tag = document.createElement("script");
  tag.async = true;
  tag.src = "....";
  const head = document.getElementByTagName("head")[0];
  head.appendChild(tag);