Add Google Analytics to your online HTML documentation to track page views

Google Analytics (GA) is a free service offered by Google which can track various anonymous information about users visiting a web-site, such as which page have many views and for how long. It can generate many detailed reports on how those users behaved and is a key tool to understand the audience needs and expectations from any online material. Integrating Google Analytics into an HTML documentation is very useful to gain precise knowledge of what viewers were searching for and can be easily done with HelpNDoc’s powerful template system.

Track HTML documentation views with Google Analytics

Step 1: Get the Google Analytics tracking code

A specific tracking code is needed to let Google Analytics know which domain is currently being tracked. To obtain the code for the domain where the online documentation will be placed, just go the the Google Analytics settings page for the domain and copy the provided code. It should look like the following piece of code with a custom setAccount value:

<script>

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-123456-7']);
  _gaq.push(['_trackPageview']);

  (function() {
   var ga = document.createElement('script');
   ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www')
            + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(ga, s); })();

</script>

Step 2: Insert it in your HelpNDoc template

HelpNDoc provides a very convenient way to control the HTML output of the generated documentation: just create or edit a template to instruct HelpNDoc on how to generate the documentation. We will leverage this by copying the default HTML template and add our tracking code where needed:

  • As a best practice, it is advised not to edit the default templates provided in HelpNDoc’s installation directory: simply copy the default HTML tempalte from C:\Program Files\IBE Software\HelpNDoc\templates\html\default to the personal template folder located at My Documents\HelpNDoc\templates\html\default
  • We can now change the template name: rename the folder from default to analytics and edit the template.info file to set a new name for the template such as HTML template with Google Analytics
  • Finally, add the tracking code into our topics’ HTML head section by editing the topics.pas.html file and add the above Google Analytics code within the head section of the HTML template file

Step 3: Publish your documentation to collect statistics

Now we can generate the HTML documentation from any HelpNDoc project specifying the newly created template in the generation window, upload it to the web-server and voila! Google Analytics will freely collect data for you and will present easy to read and very powerful reports with a clear indication on what the viewers are doing with your online documentation.

Categories: articles