Integrating with the New Google Analytics using gtag.js

ann.jensen
Posts: 199

Integrating with the New Google Analytics using gtag.js

Thu Nov 23, 2017 6:26 pm

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

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

Fri Nov 24, 2017 5:51 pm

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

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

Fri Nov 24, 2017 6:48 pm

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

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

Mon Nov 27, 2017 5:56 pm

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

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 0 guests