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:
The problem is that it also uses the IncludeJavascriptAPI extension, so I cannot add the HTML noscript tag using this component.
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.