CODEWITHSUNDEEP
javascriptjquery
Anthony
Anthony

Reputation: 742

Google Tag Manager - Tag Configuration - appending <script> content within <script>

I need to include two <script> tags just before the </body> element via a custom tag in Google Tag Manager:

<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

and

<script>window.cookieconsent.initialise({"palette":{"popup":{"background":"#000"},"button":{"background":"#f1d600"}}});</script>

Because I need them to show up just before the </body> element, I am using jQuery to append these values as strings via appendTo():

<script>

var cookieConsentStyles = '<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />';
var cookieConsentJS = '<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>';
var cookieConsentInit = '<script>window.cookieconsent.initialise({"palette":{"popup":{"background":"#000"},"button":{"background":"#f1d600"}}});</script>';

jQuery(cookieConsentStyles).appendTo('head');
jQuery(cookieConsentJS).appendTo('body');
jQuery(cookieConsentInit).appendTo('body');
</script>

I have confirmed this works in the browser console but this does not work in Google Tag Manager because any JS code needs to be between <script> tags. So the <script> tags within the variable strings get interpreted despite being part of a string variable. See screenshot below.

enter image description here

I tried escaping the less-than and greater-than signs with the appropriate entity (i.e. &gt ;) but this also failed.

Upvotes: 0

Views: 634

Answers (2)

Anthony
Anthony

Reputation: 742

Marked Ibu's answer as the final answer because his example using onload gave me an alternative approach that I was not aware of (running window.cookieconsent.initialise directly however did not work for some reason).

The exact solution, based on his example, is below: 

var cookieConsentJS = document.createElement( 'script' );
cookieConsentJS.type = 'text/javascript';
cookieConsentJS.src = 'https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js';
cookieConsentJS.setAttribute('data-cfasync', false); 

var cookieConsentInit = document.createElement( 'script' );
cookieConsentInit.innerText = 'window.cookieconsent.initialise({"palette":{"popup":{"background":"#000"},"button":{"background":"#f1d600"}}});';

cookieConsentJS.onload = function() {
    document.body.appendChild( cookieConsentInit );
};

document.body.appendChild( cookieConsentJS );

Upvotes: 0

Ibu
Ibu

Reputation: 43810

You can run the cookie consent script when the parent script is loaded using the onload event. Here is an example:

var cookieConsentJS = document.createElement( 'script' );
cookieConsentJS.type = 'text/javascript';
cookieConsentJS.src = '/path/to/cookieconsent.min.js';
cookieConsentJS.setAttribute('data-cfasync', false); // not sure what this is, but not touching.

// this part of the code will run when the script is loaded. 
cookieConsentJS.onload = function() {
    // here is your code running outside of a string.
    window.cookieconsent.initialise({
        "palette":{
            "popup":{"background":"#000"},
            "button":{"background":"#f1d600"}
        }
    });
};

// now let's append your code to the body.
document.body.appendChild( cookieConsentJS );

Note that jQuery was not used in this context.

Upvotes: 1

Related Questions