Integrating with the New Google Analytics using gtag.js

Post here questions and problems related to editing and publishing DITA content.
ann.jensen
Posts: 289
Joined: Wed Jun 17, 2015 10:19 am

Integrating with the New Google Analytics using gtag.js

Post by ann.jensen »

Hi,
I have tried to update the Google Analytics tracking file that was previoulsy working fine in our WebHelp generated site.
The new GA file is as described in https://support.google.com/analytics/an ... 8080?hl=en.
The old GA file looked like:

Code: Select all

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '<code>', 'auto');
ga('send', 'pageview');
</script>
The GA file is associated with the

Code: Select all

webhelp.fragment.before.body
parameter.

However, when I do a transform to WebHelp Responsive, the path to the GA file is appearing on the top of the web page.
Is this new GA tracking file not supported?
any advice appreciated,
Regards,
Ann
bogdan_cercelaru
Posts: 222
Joined: Tue Jul 01, 2014 11:48 am

Re: Integrating with the New Google Analytics using gtag.js

Post by bogdan_cercelaru »

Hello,

The file referred by "webhelp.fragment.before.body" parameter should be a well-formed XHTML file. If it is not a well-formed XHTML, the generated output contains only the path to that file instead of its content.
The new Google Analytics tracking code contains two <script/> elements. In order to make it a valid XHTML file you should wrap them in a root element. It is recommended to use the <body/> element so that the transformation generates only the content of that element in the output.
In this case, based on the example found here https://support.google.com/analytics/an ... 8080?hl=en the GA file should be:

Code: Select all

<body>
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());

gtag('config', 'GA_TRACKING_ID');
</script>
</body>
Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com
ann.jensen
Posts: 289
Joined: Wed Jun 17, 2015 10:19 am

Re: Integrating with the New Google Analytics using gtag.js

Post by ann.jensen »

Hi Bogdan,
I did as you suggested and wrapped the GA script with <body> tag as follows:

Code: Select all

<body>
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
</body>
This file is saved in the root of my project directory as googleAnalytics_QA.html

My WebHelp transformation parameter webhelp.fragment.before.body has the value ${pd}/googleAnalytics_QA.html.
But when i transform, i am still seeing the path name displayed at the top of my generated web page.
Regards,
Ann
ionela
Posts: 400
Joined: Mon Dec 05, 2011 6:08 pm

Re: Integrating with the New Google Analytics using gtag.js

Post by ionela »

Hi,

Note that your XML fragment is not well-formed. In order to make it well-formed you need to specify a value for async attribute of the script element.
e.g. async="async"

Code: Select all


<body>
   <script async="async" src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
   <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments)};
       gtag('js', new Date());
       
       gtag('config', 'GA_TRACKING_ID');
   </script>
</body>
Regards,
Ionela
Ionela Istodor
oXygen XML Editor and Author Support
Post Reply