Adding Google Tag Manager Code to the WebHelp output

Anonymous1 · Post by **Anonymous1** » Mon Jan 20, 2020 12:16 pm

Hello,

we would like to add the Google Tag Manager code to our WebHelp. The instructions of Google name the following requirements:

Copy the following JavaScript and paste it as close to the opening <head> tag as possible on every page of your website, replacing GTM-XXXX with your container ID.
Copy the following snippet and paste it immediately after the opening <body> tag on every page of your website, replacing GTM-XXXX with your container ID.

I thought this is going to be pretty easy. But I have some issues getting it to work.

We are using Oxygen 21.1 with a custom framework. The WebHelp Responsive plug-in is the default one though. I created a publishing template to add the Google Tag code to the WebHelp output.

Code: Select all

        <html-fragments>
            <fragment file="fragments/google_tag_header.html" placeholder="webhelp.fragment.head"/>  
            <fragment file="fragments/google_tag.html" placeholder="webhelp.fragment.before.body"/>
        </html-fragments>

This gives me the following results:

The Google Tag code for the body is added somewhere in the body. Not immediately after the opening <body> tag but shortly after.
The Google Tag code for the head does not appear at all in the output.

Questions:

Am I using the wrong code in the HTML file for the head code? Why does it not show up in the output?
Is it possible to put the code for the body right after the opening <body> tag?

My code of the HTML file for the head (provided by Google):

Code: Select all

<!-- 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-123');</script>
<!-- End Google Tag Manager -->

Post by **radu_pisoi** » Fri Jan 24, 2020 3:43 pm

Hi,

B-E-N wrote: ↑Mon Jan 20, 2020 12:16 pm Am I using the wrong code in the HTML file for the head code? Why does it not show up in the output?

The file content referenced using a webhelp.fragment.* parameter should be XML valid. Also, if you have special characters (for example, &, <) that break the well-formedness of the XML fragment, it is important to place this content inside an XML comment.

Code: Select all

<html>
<!-- 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-123'); --></script>
<!-- End Google Tag Manager -->
</html>

You can read more in the How to Insert HTML Content in WebHelp Responsive Output topic from our documentation.

B-E-N wrote: ↑Mon Jan 20, 2020 12:16 pm Is it possible to put the code for the body right after the opening <body> tag?

You can do this only by editing the HTML Page Layout Files used in the publishing template. Open the template files and move the webhelp.fragment.before.body fragment to the desired location.

Post by **ckabstein** » Fri Jan 24, 2020 3:57 pm

Hi Radu,

You write the following:

You can do this only by editing the HTML Page Layout Files used in the publishing template. Open the template files and move the webhelp.fragment.before.body fragment to the desired location.

Do you mean that the original HTML Page Layout Files from the WebHelp Responsive plugin should be edited? Or can you define your own page templates that override the original files?

Thanks,
Christina

Post by **radu_pisoi** » Fri Jan 24, 2020 4:25 pm

Hi,

ckabstein wrote: ↑Fri Jan 24, 2020 3:57 pm Do you mean that the original HTML Page Layout Files from the WebHelp Responsive plugin should be edited? Or can you define your own page templates that override the original files?

No, do not edit the original HTML Page Layout files, copy them inside your publishing template archive/folder. You can put them in the page-templates folder for instance.

The location of HTML Page Layout files is DITA-OT-DIR/plugins/com.oxygenxml.webhelp.responsive/oxygen-webhelp/page-templates.

After you copy them, update the publishing template descriptior file to specify the template files:

Code: Select all

<publishing-template>
      ...
      <webhelp>
      ...
      <!-- HTML page layout files -->
      <html-page-layout-files>
        <page-layout-file page="main" file="page-templates/wt_index.html"/>
        <page-layout-file page="search" file="page-templates/wt_search.html"/>
        <page-layout-file page="topic" file="page-templates/wt_topic.html"/>
        <page-layout-file page="index-terms" file="page-templates/wt_terms.html"/>
      </html-page-layout-files>
      ...

Post by **ckabstein** » Mon Jan 27, 2020 12:01 pm

Hi Radu,

I've managed somehow to get the Google Tag Manager code in the correct location, but when I run the transformation, the XML comment does not disappear - which it should, shouldn't it? Is there anything else that we need to set/configure to make it transform properly?

This is the content of the file:

Code: Select all

<html>
<!-- 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-123'); --></script>
<!-- End Google Tag Manager -->
</html>

And this is what's added to the <head>-element in the html output:

Code: Select all

<!-- 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-123'); --></script>
  <!-- End Google Tag Manager -->

Thanks,
Christina

Post by **radu_pisoi** » Tue Jan 28, 2020 4:24 pm

Hi,

We parse all files referenced through a webhelp.fragment.* parameter as XML files. So, they are required to be XML valid.

ckabstein wrote: ↑Mon Jan 27, 2020 12:01 pm I've managed somehow to get the Google Tag Manager code in the correct location, but when I run the transformation, the XML comment does not disappear - which it should, shouldn't it?

No, the XML comment inside the script should be preserved. The comment is transparent for the browser, so the Javascript code inside the comment will be executed. Is it not your case?

Post by **ckabstein** » Wed Feb 12, 2020 6:40 pm

Hi Radu,

I've managed to run extensive tests now with the Google Tag Manager script. The result is that it is VERY important where you put the XML comment tags.
It is not sufficient to just add them in front of and at the end of the script content. You must also make sure that the script content does not start or end on the same line as the XML comment tags. This means that my code must look as follows (I've also added type="text/javascript", just in case):

Code: Select all

<html>
<!-- Google Tag Manager -->
<script type="text/javascript"><!-- 
  (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-123456'); 
--></script>
<!-- End Google Tag Manager -->
</html>

It is also not sufficient to just add a space between the XML comment tags and the script content. It will not work.
I found that there was a Javascript error, telling you

Uncaught SyntaxError: Unexpected token ':'

This is a weird error, because the colon belongs to the script. Only Firefox will reveal visually that something's wrong with the XML comment. Google Chrome will not help you - at least it didn't help me.
I would suggest that this tiny piece of information should be mentioned on the documentation page that you linked somewhere in the thread.
It didn't occur to me that there could be an issue with this.

Best,
Christina

Post by **radu_pisoi** » Thu Feb 13, 2020 11:32 am

Hi,

Thank you for your suggestion!

I will add a task to improve documentation.

Adding Google Tag Manager Code to the WebHelp output

Adding Google Tag Manager Code to the WebHelp output

Re: Adding Google Tag Manager Code to the WebHelp output

Re: Adding Google Tag Manager Code to the WebHelp output

Re: Adding Google Tag Manager Code to the WebHelp output

Re: Adding Google Tag Manager Code to the WebHelp output

Re: Adding Google Tag Manager Code to the WebHelp output

Re: Adding Google Tag Manager Code to the WebHelp output

Re: Adding Google Tag Manager Code to the WebHelp output