Tuesday, May 7, 2013

Tracking Chat in Google Analytics with BoldChat (part 2)


In the last post, we changed tracking chat as page views to tracking chat as events and also added different events depending on the type of chat page appearing (pre-chat, chat window and post chat survey).

This post is focussed on developing this approach still further to track other chat events, such as when a visitor clicks a chat button, when they accept a chat, decline a chat or ignore it. These are all critical measures and are usually supplied very satisfactorily in the chat platform, so why would we need to do this with google analytics ? My end goal is to be able to combine chat data with some qualification measures to see just how valuable chat interactions are, i.e. is it possible to measure "incremental" sales contribution that chat delivers on a website? The value measures will be dealt with in the next blog, this post is about adding more chat pipeline measures.

Probably the most critical  measures when using chat invitations are the acceptance rate, decline rate and ignore rate. Measuring these in fine detail will optimise your chat results if you adjust your chat approach. As an example; if the chat acceptance rate is low and the decline rate is high, it could be argued that either the chat invite graphics and text are not relevant enough or that the invite is just too early in the visitors online journey - or both. Similarly, if the ignore rate is very high, it could be that visitors are not seeing it. It is critical to continually test different approaches to maximise acceptance and minimise declines and ignores.

Button chats

In the next post, I am going to dig deeper into the appearance of buttons so we can track information such as "for how many visits or page views was a chat button not available?"  This is important because when all chat operators are busy the chat button will either not be displayed or a different button will be displayed. This may indicate opportunities for having more chat operators, or changing opening hours for the chat operation. For this post, however, I am going to focus on when a visitor clicks a chat button to request a chat.

In BoldChat if you go to Setup->HTML->Generate Chat Button HTML you will see something like this: -
<!-- BoldChat Live Chat Button HTML v4.00 (Type=Web,ChatButton=Chat Button Dept 1,Website=- None -) -->

<div style="text-align: center; white-space: nowrap;">
<a href="https://livechat.boldchat.com/aid/466112173820034708/bc.chat?resize=true&cbdid=461747837706183791" target="_blank" onclick="window.open((window.pageViewer && pageViewer.link || function(link){return link;})(this.href + (this.href.indexOf('?')>=0 ? '&' : '?') + 'url=' + escape(document.location.href)), 'Chat466112173820034708', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=480');return false;">
<div><script language="JavaScript" type="text/javascript"> var bccbId = Math.random(); document.write(unescape('%3Cimg alt="Live chat by BoldChat" src="' + (('https:' == document.location.protocol) ? 'https:' : 'http:') + '//cbi.boldchat.com/aid/466112173820034708/bc.cbi?cbdid=461747837706183791" border="0" id=' + bccbId + ' /%3E')); var bccb = {id: bccbId, bdid: '461747837706183791', rdid: null, type: 'chat'}; var _bcvma = _bcvma || []; if(window.pageViewer && pageViewer.addButton) pageViewer.addButton(button); else _bcvma.push(['addButton', bccb]);</script>
</div></a>
<span style="font-family: Arial; font-size: 8pt; color: black;"><a href="http://www.boldchat.com" style="text-decoration: none; color: black;">Live chat</a> by BoldChat</span>
</div>
<!-- /BoldChat Live Chat Button HTML v4.00 -->

This would be something like the code you would paste into your web site to display a chat button.

The code we are looking for is the onclick=" property of the link on line 4.

Specifically this would be: -
 onclick="window.open((window.pageViewer && pageViewer.link || function(link){return link;})(this.href + (this.href.indexOf('?')>=0 ? '&' : '?') + 'url=' + escape(document.location.href)), 'Chat466112173820034708', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=480');return false;"

Again we are going to add a google analytics event instead of a page view using
_gaq.push(['_trackEvent','category', 'action', 'label', value]);
To track the button click, we can insert the google code as the first javascript statement in the onclick property of the link, as follows: -
 onclick="_gaq.push(['_trackEvent','chat', 'button', 'standard button', 3]);window.open((window.pageViewer && pageViewer.link || function(link){return link;})(this.href + (this.href.indexOf('?')>=0 ? '&' : '?') + 'url=' + escape(document.location.href)), 'Chat466112173820034708', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=480');return false;"
From now on whenever this button is clicked it will track in google.

Chat invites. 

Chat invitations get a little trickier. BoldChat provides excellent facilities to customise your chat invite. It is relatively easy to add javascript to the simple button invitation type on both the chat invitation link and the close button, but to go further and track ignore rates we have to dig deeper . We could either use something like jQuery to detect events on the invitation code or (in this case) use the BoldChat Javascript invitation type which allows us access to the ignore event. The next blog will go into more detail and see if there are easier ways to do this, but for now the javascript invite type is pretty handy. The javascript invitation type enables you to totally customise how your invitation behaves, this provides full flexibility, but does involve a fair degree of coding to get your invite just the way you want it. For this example we will use the BoldChat sample javascript invite.
// Sample function to handle invite
(function(obj){
    window.bcInvite = obj;
    window.hideInvite = function(){ document.body.removeChild(div); }
    var name = obj.Variables.login.BestName;
    var div = document.createElement("div");
    div.setAttribute('style', 'position: absolute; left: 0; top: 0; background: #FFFFFF; border: 1px solid black');
    div.innerHTML = '[' + name + '] Would you like to chat?
<input onclick="window.hideInvite(); window.bcInvite.Accept();" type="button" value="Yes" /> 
<input onclick="window.hideInvite(); window.bcInvite.Decline();" type="button" value="No" />';
    document.body.appendChild(div);
    setTimeout(function(){
        window.hideInvite();
        window.bcInvite.Ignore();
    }, 60000);
})
The lines we are interested in are line 9 & 10 both which start <input type="button" and line 12 which has a setTimeout function.
For the <inputs> we can see in both cases there is an onclick property where we can add our tracking code.
&ltinput onclick="_gaq.push(['_trackEvent','chat', 'accept', 'chat invite accepted', 3]);window.hideInvite(); window.bcInvite.Accept();" type="button" value="Yes" /> 
<input onclick="_gaq.push(['_trackEvent','chat', 'decline', 'chat invite declined', 2]);window.hideInvite(); window.bcInvite.Decline();" type="button" value="No" />';
 
In the above code I have added google event tracking for each event, which will track invite accepts and declines.
    setTimeout(function(){
        _gaq.push(['_trackEvent','chat', 'ignore', 'chat invite ignored', 3]);
        window.hideInvite();
        window.bcInvite.Ignore();
    }, 60000);
})
For the ignore measure you can see that I have added a new line, just after the line with setTimeout, to track when the chat is ignored.

These changes give almost all the measures that are needed to track chat. The objective was to achieve this without using a JavaScript library such as jQuery or mootools (which would have been easier, but my aim was to achieve this in a cross site approach without dependancy on a particular library).

A quick test on my development website Netsil shows the following results.

These statistics need some tweaking and I also need to track the appearance of the invitation for comparision, but for now you can see that I have had 5 visits, 2 chats (one acceptance and one chat button) and 3 invitations where they have been declined or ignored.

In the next post, I will document my view of the best way of: -
  • using jQuery to track these events and the invitation event
  • using plain javascript to track these events and the invitation event
  • build a way to measure the net contribution of chat to the website's sales
  • look at how to measure which chat related sales were incremental - which is after all the holy grail.


No comments:

Post a Comment