Eric Cressey

Tech writer - Content strategist - Developer

Using Google Analytics with MadCap Flare's HTML5 Help

| Comments

Using web analytics with your online help sites allows you to gather real insights into your users’ help experience. In addition, you can use analytics data to identify deficiencies in your help and measure how effective your improvements and updates really are. In this series of posts, I’ll cover how to add Google Analytics to MadCap Flare’s HTML 5 help and how to set up Google Analytics to get the most useful data possible.

If you’ve tried implementing Google Analytics with your Flare help before, you may have run into one of two problems:

  • You put the tracker on your master page and didn’t get any search results or table of contents navigation details.
  • You put the tracker on the default page and didn’t get any page views at all.

Flare’s help consists of a default page that contains the table of contents, header, search bar, and an IFrame where your topics load. Users stay on the default page even as they browse through and search the help. This differs from the usual websites that Google Analytics tracks because help topic page views are virtual page views, since topics load within the default page.

Of course, we want Google Analytics to treat visits to different topics as page views. To do this, we’ll need to adjust the Google Analytics tracking code to send pageview events when the page URL changes. In this example, I’m using Ben Alman’s jQuery hashchange event plugin along with my tracking code.

Get started in a few easy steps

  1. Sign up for Google Analytics and get a tracking code for your website. If you haven’t already, you’ll need to set up a property for your site. When you have it, take note of the Tracking ID for your website. You’ll use this tracking ID with a tracking code modified to send page view events when the page URL changes. Learn more about finding your site’s tracking ID.
  2. Update the following modified tracking code with your tracking ID, replacing UA-tracking-ID with the appropriate information. 

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    /*
 * jQuery hashchange event - v1.3 - 7/21/2010
 * http://benalman.com/projects/jquery-hashchange-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function ($, e, b) { var c = "hashchange", h = document, f, g = $.event.special, i = h.documentMode, d = "on" + c in e && (i === b || i > 7); function a(j) { j = j || location.href; return "#" + j.replace(/^[^#]*#?(.*)$/, "$1") } $.fn[c] = function (j) { return j ? this.bind(c, j) : this.trigger(c) }; $.fn[c].delay = 50; g[c] = $.extend(g[c], { setup: function () { if (d) { return false } $(f.start) }, teardown: function () { if (d) { return false } $(f.stop) } }); f = (function () { var j = {}, p, m = a(), k = function (q) { return q }, l = k, o = k; j.start = function () { p || n() }; j.stop = function () { p && clearTimeout(p); p = b }; function n() { var r = a(), q = o(m); if (r !== m) { l(m = r, q); $(e).trigger(c) } else { if (q !== m) { location.href = location.href.replace(/#.*/, "") + q } } p = setTimeout(n, $.fn[c].delay) } $.browser.msie && !d && (function () { var q, r; j.start = function () { if (!q) { r = $.fn[c].src; r = r && r + a(); q = $('<iframe tabindex="-1" title="empty"/>').hide().one("load", function () { r || l(a()); n() }).attr("src", r || "javascript:0").insertAfter("body")[0].contentWindow; h.onpropertychange = function () { try { if (event.propertyName === "title") { q.document.title = h.title } } catch (s) { } } } }; j.stop = k; o = function () { return a(q.location.href) }; l = function (v, s) { var u = q.document, t = $.fn[c].domain; if (v !== s) { u.title = h.title; u.open(); t && u.write('<script>document.domain="' + t + '"<\/script>'); u.close(); q.location.hash = v } } })(); return j })() })(jQuery, this);

if (!/bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent))

{
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-tracking-ID']);
    _gaq.push(['_trackPageview']);

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


    $(window).hashchange(function () {
        _gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);

    });
}

  3. Open your project in MadCap Flare. Open your project’s default skin.
  4. In the HTML5 Skin Editor, click the Toolbar tab.
  5. Under the Custom JavaScript to include in Toolbar page textbox, click Edit….
  6. Paste the modified tracking code from step 2 into the Toolbar JavaScript window and click OK.
  7. Save your changes.
  8. Build your help and publish it to the URL you specified when you set up Google Analytics.
  9. Login to Google Analytics, select the correct web property and click Admin.
  10. In the Property column, click Tracking Info. Then, click Tracking Code.
  11. Take note of the status at the top of the page. It should say Receiving Data.
  12. Click Reporting at the top of the page.
  13. In the left pane, click Real-Time. Then, click Overview.
  14. Open the published web help and browse around. You should see this activity in the Real-Time Overview.

Congrats! You’ve taken the first step to getting Google Analytics to work with your MadCap Flare web help. In the next post, I’ll cover the filters, goals, and segments you’ll want to set up in Google Analytics.

Comments