{"id":9476,"date":"2016-07-14T12:50:11","date_gmt":"2016-07-14T10:50:11","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=9476"},"modified":"2026-01-12T09:02:56","modified_gmt":"2026-01-12T09:02:56","slug":"219-tracking-highcharts-export-actions-in-google-analytics","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/219-tracking-highcharts-export-actions-in-google-analytics\/","title":{"rendered":"Tracking Highcharts export actions in Google Analytics"},"content":{"rendered":"<p dir=\"ltr\"><span style=\"font-size: 1em;\">One of the more fascinating and enriching facets of web development is what is known as \u201cdata-driven decisions.\u201d 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.<\/span><\/p>\n<p><span style=\"font-size: 1em;\">A famous example of a successful data-driven decision can be found in <\/span><a style=\"font-size: 1em;\" href=\"https:\/\/articles.uie.com\/three_hund_million_button\/\">\u201cThe $300 Million Button,\u201d<\/a><span style=\"font-size: 1em;\"> a use case written by Jared Spool, wherein he explains that a simple change to a button\u2019s label (and its consequent action) resulted in a massive revenue spike for their client\u2019s business.<\/span><\/p>\n<p><span style=\"font-size: 1em;\">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.<\/span><\/p>\n<p><span style=\"font-size: 1em;\">In this article, I\u2019m 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?<\/span><\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\">You can discover the charts your users interact with most and <strong>give them more of what they want<\/strong>, allowing you to make better and more cost-effective decisions on current and future visualizations.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">This type of data can <strong>provide more context for why a particular page or section is doing well<\/strong> in your trends, allowing you to make solid recommendations to your colleagues, clients, or stakeholders for updates, enhancements, or supplementary content.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Exporting a chart is an <strong>active engagement<\/strong> users make with your website content. Tracking these events can give you richer insight into <strong>what they\u2019re actually doing on your website<\/strong>, rather than simply knowing that they arrived there (from more conventional metrics such as pageviews or sessions).<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">You can <strong>learn which of your export options are most popular<\/strong> 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.<\/p>\n<\/li>\n<\/ul>\n<p><span style=\"font-size: 1em;\">First, let\u2019s explore the export options offered by Highcharts.<\/span><\/p>\n<p><span style=\"font-size: 1em;\">When you add the <\/span><a style=\"font-size: 1em;\" href=\"https:\/\/www.highcharts.com\/docs\/export-module\/export-module-overview\">exporting module<\/a><span style=\"font-size: 1em;\"> to your website\u2019s script libraries, each of your charts will show a \u201chamburger menu\u201d 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.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-20297 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/10\/07120253\/Screenshot-2020-10-07-at-13.01.17.jpg\" alt=\"\" width=\"321\" height=\"216\" \/><\/p>\n<p dir=\"ltr\"><span style=\"font-size: 1em;\">Now the fun begins!<\/span><span style=\"font-size: 1em;\">\u00a0<\/span><\/p>\n<h2 dir=\"ltr\">ADDING THE TRACKING CODE TO YOUR CHARTS<\/h2>\n<p><span style=\"font-size: 1em;\">To enable analytics tracking, we\u2019ll add some code to your chart\u2019s options. You can either do this for each individual chart, or, for a more universal solution, use the code in the <\/span><a style=\"font-size: 1em;\" href=\"https:\/\/www.highcharts.com\/docs\/getting-started\/how-to-set-options\">Highcharts.setOptions() function<\/a><span style=\"font-size: 1em;\"> and place it in a file or snippet that can be included in each page containing a chart.<\/span><\/p>\n<p><span style=\"font-size: 1em;\">What we\u2019re going to do in our code is add an onclick event for each option in the export menu. This takes place in <\/span><a style=\"font-size: 1em;\" href=\"http:\/\/api.highcharts.com\/highcharts#exporting.buttons.contextButton.menuItems\">exporting.buttons.contentButton.menuItems<\/a><span style=\"font-size: 1em;\">, which is an array of each of the menu options. For each option, we\u2019ll 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.<\/span><\/p>\n<p><span style=\"font-size: 1em;\">Below is a code snippet where I\u2019ve set onlick events for each of the default menu items.<\/span><\/p>\n<pre>exporting: {\r\n  buttons: {\r\n    contextButton: {\r\n      text: 'Export',\r\n      menuItems: [{\r\n        text: 'Print this chart',\r\n        onclick: function() {\r\n          this.print();\r\n          ga('send', 'event', 'Highcharts', 'print', this.options.title.text + ' | ' + document.title);\r\n        }\r\n      }, {\r\n        separator: true,\r\n      }, {\r\n        text: 'Save as PNG',\r\n        onclick: function() {\r\n          this.exportChart();\r\n          ga('send', 'event', 'Highcharts', 'png', this.options.title.text + ' | ' + document.title);\r\n        }\r\n      }, {\r\n        text: 'Save as JPEG',\r\n        onclick: function() {\r\n          this.exportChart({\r\n            type: 'image\/jpeg'\r\n          });\r\n          ga('send', 'event', 'Highcharts', 'jpeg', this.options.title.text + ' | ' + document.title);\r\n        }\r\n      }, {\r\n        text: 'Save as SVG',\r\n        onclick: function() {\r\n          this.exportChart({\r\n            type: 'image\/svg+xml'\r\n          });\r\n          ga('send', 'event', 'Highcharts', 'svg', this.options.title.text + ' | ' + document.title);\r\n        }\r\n      }, {\r\n        text: 'Save as PDF',\r\n        onclick: function() {\r\n          this.exportChart({\r\n            type: 'application\/pdf'\r\n          });\r\n          ga('send', 'event', 'Highcharts', 'pdf', this.options.title.text + ' | ' + document.title);\r\n        },\r\n        separator: false\r\n      }]\r\n    }\r\n  }\r\n}\r\n<\/pre>\n<p>The first line in each onclick event is the export command (with the exception of \u201cprint,\u201d which simply calls the print() function). Note that the PNG option is the default, and, as such, calls this.exportChart() without any special parameters.<\/p>\n<p>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).<\/p>\n<p>For the label, I\u2019m 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.<\/p>\n<p>Here\u2019s how your labels will be recorded: <span style=\"font-family: 'courier new', courier;\">Title of my chart | Title of my page.<\/span><\/p>\n<p>You can view the working version of this example code here:<br \/>\n<iframe width=\"100%\" height=\"470\" frameborder=\"0\" data-cookieconsent=\"marketing\" data-src=\"https:\/\/jsfiddle.net\/brightmatrix\/00wrak9v\/embedded\/result,js,html\/\"><\/iframe><\/p>\n<h2>SETTING UP YOUR GOALS IN GOOGLE ANALYTICS<\/h2>\n<p><span style=\"font-size: 1em;\">In order to properly track your onclick events, you\u2019ll need to create a separate goal for each action in Google Analytics. Here&#8217;s a screenshot of the Goals section, which lives in the Admin part of the console.<\/span><\/p>\n<p>Here is where you can create custom goals. In the goal description, give each goal a unique name and chose the type &#8220;event.&#8221;<\/p>\n<p><span style=\"font-size: 1em;\">For the goal details, set the category and action to match what you\u2019ve defined in your chart options. Leave &#8220;Label&#8221; blank, as that\u2019s where your chart&#8217;s title will be inserted. If you wish, you can also add a number to \u201cValue\u201d to \u201cweight\u201d your goals (give one more monetary value than another, for example).<\/span><\/p>\n<p>Once your goals are created, you should start to see data appear in your account within a few hours. Here&#8217;s what this will look like in the Reporting section.<\/p>\n<p>You can go to &#8220;Conversions,&#8221; then &#8220;Goals,&#8221; and finally &#8220;Goal Flow&#8221;, or, for a different view of the data, go to \u201cBehavior,\u201d then \u201cEvents,\u201d and then \u201cOverview.\u201d<\/p>\n<p>And that\u2019s 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.<\/p>\n<p>My hope is that information I\u2019ve 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.<\/p>\n<p><em>&#8212;&#8212;&#8212;&#8212;&#8212;<\/em><br \/>\n<em> <strong>About the Author<\/strong><\/em><br \/>\n<em> Mike Zavarello is a professional web developer and digital communicator who\u2019s 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.<\/em><br \/>\n<em> Mike posts frequently on Twitter as <a href=\"https:\/\/twitter.com\/brightmatrix\">@brightmatrix<\/a> and is an <a href=\"http:\/\/stackoverflow.com\/users\/2596103\/mike-zavarello\">active participant<\/a> in the Stack Overflow community. He shares various musings over at his personal blog, <a href=\"http:\/\/blog.bright-matrix.net\/\">blog.bright-matrix.net<\/a>, and contributes to <a href=\"http:\/\/www.3-sided-die.com\/\">3-sided-die.com<\/a>, a tabletop and video gaming blog.<\/em><br \/>\n<em> The information, guidance, and thoughts contained in this article are those of the author and not necessarily the views or opinions of their employer.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to add export tracking to your website&#8217;s charts (and why you would want this kind of analytics).<\/p>\n","protected":false},"author":41,"featured_media":9477,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1098,1094],"coauthors":[742],"class_list":["post-9476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-connectors","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=9476"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9476\/revisions"}],"predecessor-version":[{"id":29069,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9476\/revisions\/29069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/9477"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=9476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=9476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=9476"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=9476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}