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.
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.
Hi Nordin,
I just wanted to share that although your solution works, it doesn't really work in a real case scenario. If you look at what the html that's inside the prepend function you'll see it's a noscript tag. This is the tag commonly used to insert elements on a page when javascript is disabled on the browser. So, basically, yes your solution works but it only puts the noscript tag when the javascript is enabled which is precisely when we don't need it.
In all honesty, I faced the exact same issue and when for this solution initially...but then tried placing the html directly with the HTML Element.
Hi Akari,
If I remember correctly, the way it worked for me was by placing both the Javascript and jQuery code in the Javascript property of the module and not the screen.
(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');
Remember to provide the correct GTM-key (GTM-XXXXXX) inside the code.
Hope this helps!
Regards,
Nordin
Nordin Ahdi wrote:
Thank you!
I was able to implement it thanks to you.
I am grateful.
Hi Nordin Ahdi ,
I have pasted the GTM code as you mentioned above, in Javascript Property of a module.
Can you please help me, how to test that i have placed the GTM in my application?.
I have tried by launching the application in browser, view source code, and search for "GTM", there is no text like that on my source code.
Waiting for your reply.
Thanks,
Manikandan K
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.
Hello
I am stumbling in exactly the same way as your first post.
Please tell me the solution in detail.
The code to be placed in <head> is written in the Java Script sheet of the screen without <script></script>.
But I can't find the code in the HTML source.
How did you write the code right after <body>?
Where should I write the Jquery you are writing?
in trouble.
Help me.
You're most welcome Akari! Happy to help :)
Hi,
is it possible to implement this for the Mobile App?
If yes , please take me through the steps to implement this in Outsystems Mobile app.
Thank you.
Hi Irfan,
Yes it should be possible.
As a matter of fact, there is a Reactive GTM component available in the Forge, which are basically two wrapper blocks around the above presented JS code.
You could simply reference these blocks in your Mobile App and follow the instructions provided on the components' overview page.
Thanks for the quick reply Nordin,
If I get any issues, I will post you back here.
I was able to implement GTM for my Mobile application.
I would like to implement Custom events and user properties so that I will see some data regarding the logged in user through the analytics.
Can you please take me through the steps how we can implement this?
It is best you create a separate post for that. Let's keep this thread focussed on implementing GTM tags.
I hope you don't mind.
I created the new post for my above query in below link.
https://www.outsystems.com/forums/discussion/65700/data-layer-implementation-for-mobile-application-using-gtm-reactive/#Post260203