Tracking Highcharts export actions in Google Analytics

Tracking Highcharts export actions in Google Analytics

One of the more fascinating and enriching facets of web development is what is known as “data-driven decisions.” This is where new features, site enhancements, or user interface changes are made based on data pulled from one or more analytics platforms, such as WebTrends or Google Analytics.

A famous example of a successful data-driven decision can be found in “The $300 Million Button,” a use case written by Jared Spool, wherein he explains that a simple change to a button’s label (and its consequent action) resulted in a massive revenue spike for their client’s business.

Now, not every data-driven decision is going to be so grand. The more you track, however, the more informed you can be about which features you should add, improve, or change.

In this article, I’m going to show you how you can add analytics tracking to the export features for a Highcharts visualization. Why would it be useful to track events like this?

  • You can discover the charts your users interact with most and give them more of what they want, allowing you to make better and more cost-effective decisions on current and future visualizations.

  • This type of data can provide more context for why a particular page or section is doing well in your trends, allowing you to make solid recommendations to your colleagues, clients, or stakeholders for updates, enhancements, or supplementary content.

  • Exporting a chart is an active engagement users make with your website content. Tracking these events can give you richer insight into what they’re actually doing on your website, rather than simply knowing that they arrived there (from more conventional metrics such as pageviews or sessions).

  • You can learn which of your export options are most popular and either expand on them with additional formats or customized options, or remove any that are sparingly used to provide your users with a simpler menu to choose from.

First, let’s explore the export options offered by Highcharts.

When you add the exporting module to your website’s script libraries, each of your charts will show a “hamburger menu” at the top right with a list of options. Your users can choose to print the chart, save it as a PDF document, or export it as a PNG, SVG, or JPEG image.

Now the fun begins! 

ADDING THE TRACKING CODE TO YOUR CHARTS

To enable analytics tracking, we’ll add some code to your chart’s options. You can either do this for each individual chart, or, for a more universal solution, use the code in the Highcharts.setOptions() function and place it in a file or snippet that can be included in each page containing a chart.

What we’re going to do in our code is add an onclick event for each option in the export menu. This takes place in exporting.buttons.contentButton.menuItems, which is an array of each of the menu options. For each option, we’ll set the text and then the onclick event, which will consist of the type of export we want and the call to the analytics platform.

Below is a code snippet where I’ve set onlick events for each of the default menu items.

exporting: {
  buttons: {
    contextButton: {
      text: 'Export',
      menuItems: [{
        text: 'Print this chart',
        onclick: function() {
          this.print();
          ga('send', 'event', 'Highcharts', 'print', this.options.title.text + ' | ' + document.title);
        }
      }, {
        separator: true,
      }, {
        text: 'Save as PNG',
        onclick: function() {
          this.exportChart();
          ga('send', 'event', 'Highcharts', 'png', this.options.title.text + ' | ' + document.title);
        }
      }, {
        text: 'Save as JPEG',
        onclick: function() {
          this.exportChart({
            type: 'image/jpeg'
          });
          ga('send', 'event', 'Highcharts', 'jpeg', this.options.title.text + ' | ' + document.title);
        }
      }, {
        text: 'Save as SVG',
        onclick: function() {
          this.exportChart({
            type: 'image/svg+xml'
          });
          ga('send', 'event', 'Highcharts', 'svg', this.options.title.text + ' | ' + document.title);
        }
      }, {
        text: 'Save as PDF',
        onclick: function() {
          this.exportChart({
            type: 'application/pdf'
          });
          ga('send', 'event', 'Highcharts', 'pdf', this.options.title.text + ' | ' + document.title);
        },
        separator: false
      }]
    }
  }
}

The first line in each onclick event is the export command (with the exception of “print,” which simply calls the print() function). Note that the PNG option is the default, and, as such, calls this.exportChart() without any special parameters.

The second line sends the event to the analytics platform, which, in this example, is Google Analytics. The ga() function asks for several parameters: method, type, category, action, and label (more on this in a moment).

For the label, I’m putting together a string that includes both the title of the chart (this.options.title.text) and the title of the page on which it lives (document.title). This way, if there are several charts on a particular page, or, if you reuse charts throughout your website, you can tell which chart on which page is being exported.

Here’s how your labels will be recorded: Title of my chart | Title of my page.

You can view the working version of this example code here:

SETTING UP YOUR GOALS IN GOOGLE ANALYTICS

In order to properly track your onclick events, you’ll need to create a separate goal for each action in Google Analytics. Here’s a screenshot of the Goals section, which lives in the Admin part of the console.

Here is where you can create custom goals. In the goal description, give each goal a unique name and chose the type “event.”

For the goal details, set the category and action to match what you’ve defined in your chart options. Leave “Label” blank, as that’s where your chart’s title will be inserted. If you wish, you can also add a number to “Value” to “weight” your goals (give one more monetary value than another, for example).

Once your goals are created, you should start to see data appear in your account within a few hours. Here’s what this will look like in the Reporting section.

You can go to “Conversions,” then “Goals,” and finally “Goal Flow”, or, for a different view of the data, go to “Behavior,” then “Events,” and then “Overview.”

And that’s it! Now, with your event tracking in place, and your goals set in Google Analytics, you can see precisely where and how users are interacting with your charts.

My hope is that information I’ve shared in this article will give you and your team greater insight into the decisions you make regarding data visualizations and other aspects of your website.

—————
About the Author
Mike Zavarello is a professional web developer and digital communicator who’s been involved with the web in some form or fashion since 1996, starting first in desktop publishing, then in the medical publishing industry, and now the financial sector. Over the past few years, Mike has become enamored of data visualization and how to tell compelling stories using interactive charts.
Mike posts frequently on Twitter as @brightmatrix and is an active participant in the Stack Overflow community. He shares various musings over at his personal blog, blog.bright-matrix.net, and contributes to 3-sided-die.com, a tabletop and video gaming blog.
The information, guidance, and thoughts contained in this article are those of the author and not necessarily the views or opinions of their employer.