Tuesday, May 7, 2013

Tracking Chat in Google Analytics with BoldChat (part 1)



Although chat products provide great analytics, there are benefits to tracking chat in Google Analytics, especially now google show real time events.

There are some whitepapers from BoldChat and one particular blog which detail how to do this. You can find the whitepaper here and the blog entry here. These both show how you can track chat interactions as page views, however I feel that this is not the most beneficial approach. There is IMHO much more value to be had using google events to track chat interactions instead of page views.

First and foremost, if you track chat interactions as page views you will have chat data in your page views reports which will skew your normal analytics results. You could filter these page views out with advanced segments but why bother when events are more suitable? Google describe in their documentation that events are more suited to interactions with a page (e.g. a video player), which I believe is more suited to chat.

The next benefit is that you can track all stages of interaction within google which will give you much more insight around your chat operation.

What you will need


  • This will need to be done with javascript so inherently you will need those skills
  • Optionally google offer a great chrome plugin which tracks analytics interactions. I personally found this very useful to see the events being passed to google.
  • A very flexible and highly customisable chat platform, I have used BoldChat because it is very open and the level of customisation allowed me to go quite with my analysis.
  • You will need to test the suggestions below as they are not yet fully tested, but are all working in principle.

Step 1 - tracking chats

Firstly we need to add analytics to the chat window. This also entails ensuring that your google analytics is configured for multiple top level domains (Admin->Tracking Info). So your google tracking code for your website would be something like :-
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_setAllowLinker', true]);
  _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);
  })();
</script>

Update: Line 4 is the key line

A point to note. I found that if you turn on the multiple top level domains feature in google it automatically turns on subdomains and adds:
_gaq.push(['_setDomainName', 'my-domain.org']);
I found that as my development web server is not on this domain, my tracking stopped so I removed this for my testing. For a live site this would probably not matter.

Important Update: it is critical to get this right as I found on my experiments that I was getting all of my events reported but when I set different domain names some of it stopped. In later analysis these where in different sessions. It is therefore really important to pass session to the boldchat window in order for the measures to be maintained. I am in the middle of documenting this in the third of this series as it took some investigation to get it done, in the meantime you need the _getLinkerUrl(targetUrl, useHash) or _link(targetUrl, useHash) functions

Once this is set on the website, then it is pretty simple to do this to your chat window. In BoldChat goto   Setup->Account Setup->Chats->Custom Chat Windows, choose your chat window and click edit.

Once in the edit window, click the Brandings tab and ensure that the Custom Branding radio button is selected. On the left hand side under groups you will see Header/Footer and if you click this the middle column will display a list and you need Footer include. Paste your google code in there. You could put tracking code in the head include or header include sections but bearing in mind we are going to track different pages based on the body class later on we will need the body tag to have loaded in order to test this value. I have since resorted to loading jQuery into the Boldchat window which means I can put all my code in the head section.

You can now test this is working by looking at real time reports in google, in overview mode. If you click a chat button on your website you should see the page view come through.

Step 2 - Tracking chats as events

Now we need to change this page view into an event. In addition, because there are different chat windows (pre-chat survey, chat window and post chat survey) we can add some code to track the different type of chat window. The code for this is inspired by the blog from vkistudios.com which you can read here /http://blog.vkistudios.com/.

You will notice that the line with
_gaq.push(['_trackPageview']);
has been removed from the top 4 lines and instead we are using the track event function i.e.
_gaq.push(['_trackEvent','category', 'action', 'label', value]);
For my analysis I have chosen to have category as "chat" and action as the specific chat action e.g. "pre-chat". I have also assigned a value in case I want to analyse them later.
<script type="text/javascript">  var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_setAllowLinker', true]);//_gaq.push(['_trackPageview']); //this line is commented out to prevent the page view being tracked
(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);
})();

// Code to detect which chat window we are using

var page = document.body.className.substring(document.body.className.indexOf('page-')+5);
if(page =='1'){
      _gaq.push(['_trackEvent','chat', 'chat', 'chat window opened', 3]);
}
else if (page == '6'){
      _gaq.push(['_trackEvent','chat', 'pre-chat', 'pre-chat window opened', 3]);
}
else if (page == '5'){
     _gaq.push(['_trackEvent','chat', 'pre-chat', 'post-chat window opened', 3]);
}
else if (page == '10'){
      _gaq.push(['_trackEvent','chat', 'post-chat-complete', 'post-chat survey completed', 3]);}
</script>


You can see from the above that the javascript from vki studios that I modified, uses the body class name in the chat window as this changes with each type of window.

If you put in code similar to this in place of your google tracking code, you should now be able to see these events coming through in the new Real Time Events in google.

Once this is working for you, you can now look at how chat impacts your sales (for example) by setting up advanced segments in google analytics so you can study the impact in chat on your website. It is also useful to create a custom report where the chat category and chat action are dimension drill downs, while the metrics you can measure are things like total events, revenue etc.

In another part to this blog, we can start customising some more to add other chat events which can be useful to look at.

No comments:

Post a Comment