Add Google Tag Manager script and noscript tags to head and body of webpage

Add Google Tag Manager script and noscript tags to head and body of webpage

  

I'm trying to implement two code snippets in my web application to add Google Analytics functionality. Therefore the following needs to be done:

This code as high as possible in the <head> of the webpage:

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]?=w[l]?||[]?;w[l].push({'gtm.start':

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

<!-- End Google Tag Manager -->

And this code immediately after to opening <body> tag of the webpage:

<!-- Google Tag Manager (noscript) -->

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<!-- End Google Tag Manager (noscript) -->

I have found some posts around this topic on the forum, so I know I can add the first javascript code (without the <script> </script> tags) globally in the javascript of the eSpace. After loading the webpage this gives me an uncaught SyntaxError: invalid or unexpected token. What am I doing wrong here?

My other question is how to add the second HTML <noscript> tag to top of the <body> element of the webpage. I have tried to use the ScriptCreateorUpdate action of the IncludeJavascriptAPI extension with the IncludeAt parameter set to 'BodyTop', but this of course adds <script></script> tags around to <noscript> tag element. Please advise.

Try the forge component : https://www.outsystems.com/forge/component/1555/javascriptmanager/.  You can add the script in different place for the whole application or all applications. 

SH Rijkers wrote:

Try the forge component : https://www.outsystems.com/forge/component/1555/javascriptmanager/.  You can add the script in different place for the whole application or all applications. 

The problem is that it also uses the IncludeJavascriptAPI extension, so I cannot add the HTML noscript tag using this component.


Solution

Both issues have been solved.

The uncaught Syntax Error (showed in Google Chrome console) was due to zero-width spaces (in my case character /u200c) in this line of code: 

function(w,d,s,l,i){w[l]?=w[l]?||[]?;w[l].push({'gtm.start':. 

As you can see by posting this line of code in this forum it shows question marks on the positions of those zero-width spaces. So always first paste the code in Notepad++ or some other editor to check if it's correct and without zero-width spaces.

I also have succeeded in adding the HTML <noscript> tag right after the opening <body> tag of the webpage.

This post of Shanny Anoep has helped me do it: https://www.outsystems.com/forums/discussion/19670/add-html-javascript-right-after-body-tag/

The only option that has worked for me was the first option in the post. I have managed to add the HTML <noscript> tag immediately after the opening <body> tag of the webpage with the following Jquery code: 

SyntaxEditor Code Snippet

$(document).ready(function() {
    $(document.body).prepend('<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>');
});

I hope this will help others in the future.

Solution