Log in to AnswerLog in to Follow
Nordin Ahdi
mvp_badge
MVP
2920Views
14Comments
Solved
Add Google Tag Manager script and noscript tags to head and body of webpage 
Question

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.

0
0
04 Apr 2018
Nordin Ahdi
mvp_badge
MVP
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.

See solution in context
2
0
05 Apr 2018

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. 

0
0
27 Apr
Nordin Ahdi
mvp_badge
MVP
Solution

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.

  • GTM code inside <HEAD> tag:
(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');
  • GTM no script tag immediately after the opening <BODY> tag:
$(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>');
});

Remember to provide the correct GTM-key (GTM-XXXXXX) inside the code.

Hope this helps!

Regards,

Nordin

See solution in context
1
0
02 Sep 2020

Nordin Ahdi wrote:

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.

  • GTM code inside <HEAD> tag:
(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');
  • GTM no script tag immediately after the opening <BODY> tag:
$(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>');
});

Remember to provide the correct GTM-key (GTM-XXXXXX) inside the code.

Hope this helps!

Regards,

Nordin

 Thank you!

I was able to implement it thanks to you.

I am grateful.

 

1
0
08 Sep 2020

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. 

0
0
04 Apr 2018
Nordin Ahdi
mvp_badge
MVP

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.


0
0
05 Apr 2018
Nordin Ahdi
mvp_badge
MVP
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.

2
0
05 Apr 2018

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. 

0
0
27 Apr

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.

0
0
02 Sep 2020
Nordin Ahdi
mvp_badge
MVP
Solution

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.

  • GTM code inside <HEAD> tag:
(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');
  • GTM no script tag immediately after the opening <BODY> tag:
$(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>');
});

Remember to provide the correct GTM-key (GTM-XXXXXX) inside the code.

Hope this helps!

Regards,

Nordin

1
0
02 Sep 2020

Nordin Ahdi wrote:

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.

  • GTM code inside <HEAD> tag:
(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');
  • GTM no script tag immediately after the opening <BODY> tag:
$(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>');
});

Remember to provide the correct GTM-key (GTM-XXXXXX) inside the code.

Hope this helps!

Regards,

Nordin

 Thank you!

I was able to implement it thanks to you.

I am grateful.

 

1
0
08 Sep 2020
Nordin Ahdi
mvp_badge
MVP

You're most welcome Akari! Happy to help :)

1
0
08 Sep 2020

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.

0
0
21 Sep 2020
Nordin Ahdi
mvp_badge
MVP

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.

Regards,

Nordin

1
0
21 Sep 2020

Thanks for the quick reply Nordin,

If I get any issues, I will post you back here.


Thank you.

0
0
21 Sep 2020

Hi Nordin,

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?


Thank you.


0
0
20 Oct 2020
Nordin Ahdi
mvp_badge
MVP

Hi Irfan,

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.

Regards,

Nordin

0
0
21 Oct 2020

Hi Nordin,

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

0
0
22 Oct 2020
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.