15
Views
4
Comments
Add Google Tag Manager script and noscript tags to header and body

I know there is a post on this topic with the same question, but I just can't get enough information out of it to make it work in a reactive web application. 

I have to add the following script to the header of the page:


<!-- 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 has to go at the top of the body:


<!-- 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've tried various way, including the AddJavascriptTag and the CreateOrUpdate_Script, but did not get it right. Does anyone have experience implementing this in a reactive web app?

mvp_badge
MVP
Rank: #177

Hello Lies,

You can use the JavaScript client action inside of an OnReady on your page or web block for the first part. The noscript you can add using an HTML element and setting the tag name accordingly.

Also, if you roll out to an iOS native app, you will need to make configuration changes to GTM, as described here: https://github.com/ionic-team/capacitor/issues/1433#issuecomment-644086704 (the configuration must be done in GTM, using JavaScript to change it within the app after the fact is not enough to make it work).

Rank: #23574

Hello Craig,

Thank you for your response! For the first part, how exactly does this code look like if I'd use the JavaScript client action? I can't just copy paste the code..  I've tried something like below, but this doesn't work. 


var scriptNode=document.createElement('script');

scriptNode.innerHtml = (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');

 document.querySelector('head').appendChild(scriptNode);

mvp_badge
MVP
Rank: #73

Hi Lies,

Have you tried implementing GTM in your Reactive Web App using this Forge component? The instructions are on the Overview page.

Regards,

Nordin