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

mvp_badge

MVP

Rank: #75

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:

<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>

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

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

height="0" width="0" style="display:none;visibility:hidden"></iframe></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.

on 2018-04-04

Nordin Ahdi

mvp_badge

MVP

Rank: #75

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

on 2nd Sep

1 reply

on 8th Sep

Show thread

Hide thread

Akari Ukai

Rank: #13829

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.

on 8th Sep

Sam Rijkers

Rank: #328

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.

on 2019-04-02

1 reply

on 2018-04-05

Show thread

Hide thread

Nordin Ahdi

mvp_badge

MVP

Rank: #75

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.

on 2018-04-05

Nordin Ahdi

mvp_badge

MVP

Rank: #75

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.

on 2nd Sep

Akari Ukai

Rank: #13829

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.

on 2nd Sep

Nordin Ahdi

mvp_badge

MVP

Rank: #75

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

on 2nd Sep

1 reply

on 8th Sep

Show thread

Hide thread

Akari Ukai

Rank: #13829

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.

on 8th Sep

Nordin Ahdi

mvp_badge

MVP

Rank: #75

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

on 8th Sep

Irfan

Rank: #2845

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.

on 21th Sep

Nordin Ahdi

mvp_badge

MVP

Rank: #75

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

on 21th Sep

Irfan

Rank: #2845

Thanks for the quick reply Nordin,

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

Thank you.

on 21th Sep

Irfan

Rank: #2845

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.

10 days ago

Nordin Ahdi

mvp_badge

MVP

Rank: #75

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

9 days ago

Irfan

Rank: #2845

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

8 days ago

Training

Documentation

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