Nordin Ahdi
mvp_badge
MVP
Rank: #73
2891Views
13Comments
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
on 2018-04-04
Copy link to comment
Nordin Ahdi
mvp_badge
MVP
Rank: #73
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
on 2020-09-02
Copy link to comment
Nordin Ahdi
mvp_badge
MVP
Rank: #73
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
on 2020-09-02
Copy link to comment
Akari Ukai
Rank: #12538

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
on 2020-09-08
Copy link to comment
Sam Rijkers
Rank: #351

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
on 2018-04-04
Copy link to comment
Nordin Ahdi
mvp_badge
MVP
Rank: #73

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
on 2018-04-05
Copy link to comment
Nordin Ahdi
mvp_badge
MVP
Rank: #73
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
on 2018-04-05
Copy link to comment
Akari Ukai
Rank: #12538

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
on 2020-09-02
Copy link to comment
Nordin Ahdi
mvp_badge
MVP
Rank: #73
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
on 2020-09-02
Copy link to comment
Akari Ukai
Rank: #12538

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
on 2020-09-08
Copy link to comment
Nordin Ahdi
mvp_badge
MVP
Rank: #73

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

1
0
on 2020-09-08
Copy link to comment
Irfan
Rank: #5115

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
on 2020-09-21
Copy link to comment
Nordin Ahdi
mvp_badge
MVP
Rank: #73

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
on 2020-09-21
Copy link to comment
Irfan
Rank: #5115

Thanks for the quick reply Nordin,

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


Thank you.

0
0
on 2020-09-21
Copy link to comment
Irfan
Rank: #5115

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
on 2020-10-20
Copy link to comment
Nordin Ahdi
mvp_badge
MVP
Rank: #73

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
on 2020-10-21
Copy link to comment
Irfan
Rank: #5115

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
on 2020-10-22
Copy link to comment