How do I track Google visualization chart events in Google analytics?

Question

I am running Google charts embedded in my site and I need to be able to track user interactions with the charts via select events as documented here: https://developers.google.com/chart/interactive/docs/events?hl=en#the-select-event

Following the analytics.js documentation, I added the following code to the head of my chart Javascript code:

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'click');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

(I replaced the dummy ID with the property ID for the site I want to track)

When I ran this code both in a standalone script in a browser and as embedded in my Wordpress site, the relevant Google Analytics events dashboard reported getting no hits.

I don't have much experience with this API so I am sure I am missing something out. Could anyone tell me what this is? I would really a appreciate a working example where Google chart events can get picked up by GA.

All help appreciated. Nick

Answer 1

First, there is not ga('send', 'click'); . Valid interaction type s are 'pageview', 'screenview', 'event', 'transaction', 'item', 'social', 'exception', 'timing' (and most of them require additional parameters).

Since you want to track events that are initiated by the user I suggest you place the tracking call in the event callbacks (after you have loaded the analytics script at the top of the page).

If you look at the example linked in the documentaion in your question:

// google.visualization.table exposes a 'page' event.
google.visualization.events.addListener(table, 'page', myPageEventHandler);
...
function myPageEventHandler(e) {
  alert('The user is navigating to page ' + e['page']);
}

Then the response to the user interaction is handled in the myPageEventHandler function, the callback for that event. So you could do in that callback whatever change to the visualization is appropriate and then send eg an event tracking call:

function myPageEventHandler(e) {
    alert('The user is navigating to page ' + e['page']);
    ga('send','event','chartevent','click on chart');
}