Home > How do I track live chat events in Google Analytics?

Categories:


Overview

You can track your SnapEngage live chat events in Google Analytics. To get started, please use the guide and samples below as a reference.

NOTE: Before getting started, you will want to review the Javascript event API that is available from SnapEngage. You can find that in our developer section of the site, or directly here: http://developer.snapengage.com/javascript-api/


Setup Your Code
1. Find the SnapEngage code on your website

The SnapEngage code snippet should be located before the footer, just above the closing body tag of your site. If you have not yet installed this, you will want to do that before moving forward.

2. Verify that your Google Analytics tracking code is on the site

Your Google Analytics tracking code can be found in the Admin section of your Google Analytics account. It will be found in the Tracking Code section.

2015-03-27_1404

Once both sets of code are safely installed on your site, you will want to identify what SnapEngage events you want to track in Google Analytics. Almost all events in our developer section can be tracked. (Click here to see the available events. Please note that these events will need to be coded out to use, so have your developer handy.)

3. Identify which version of Google Analytics you use

You can log into your Google Analytics account and find your javascript Tracking Code in the admin settings.

There are two types of code that Google may provide you:

Please note that there is a very big difference in the syntax between these versions, and using the correct one will support the successful implementation of the tracking of SnapEngage chat events.

Here is a reference guide from Google that can show the difference in syntax: https://developers.google.com/analytics/devguides/collection/upgrade/reference/gajs-analyticsjs

4. Coding out your events

Now you are ready for your event coding. Below you will see samples of the two different versions of analytics. These code snippets are able to be used, however, they only track the following events. If you want additional tracking, your developer will need to assist in coding out events to your requirements:

  • ‘proactivePrompt’ – the proactive chat has fired out to a visitor successfully
  • ‘proactiveEngaged’ – the visitor has successfully responded to a proactive chat

Remember, all additional events that can be tracked can be found here so that your team may code that out for you: http://developer.snapengage.com/javascript-api/

Guidelines for coding out your custom events can be found here:

https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide

5. Place your tracking code in your SnapEngage Code snippet

You are almost there! To track your new events, simply take your SnapEngage code snippet and place the Google Analytics event code into the API section (as noted in the SnapEngage code). Be sure not to remove or modify other parts of the snippet.

Here is your original code snippet from SnapEngage. About halfway down is an API section.

2016-03-08_1602

 

Your final snippet should look like this:
2016-03-08_1604


6. Adding the SnapEngage + Google Analytics code to your site

*If your team has your Google Analytics tracking code on the site (see step 2) please verify that it is in your main code. Use of a tag manager or other method will require you to follow method 2 below. *

Method 1 Google Analytics Tracking Code installed on the page
Use this method if your team has currently installed the Google Analytics tracking code to the pages of the site. If that is the case, all you need to do is take the full snippet (SnapEngage+Google Analytics) and place it in the footer of your website. Once that full snippet is placed, you can then begin to see your chat event tracking in your Google Analytics account.

Method 2 – Using Google Tag Manager

If your team is using Google Tag Manager, there are a few additional steps to take. For more information on using Google Tag Manager, please visit here – https://www.google.com/analytics/tag-manager/?hl=en_US

You may already have your Google Analytics code installed via Tag Manager. You will now want to add your SnapEngage+Google Analytics code through a tag.

Once you have that in there, you will also want to add your Google Analytics Tracking code (see step 2 from above) and add that after the end of your SnapEngage code.

Now, comment out the last line of the Google Analytics Tracking code – ga(‘send’, ‘pageview’);

Your final snippet for that tag should look something like this (the sample below provides both types of Google Analytics in the code):

2016-03-08_1523

 

Just Want to Track Proactive Chat Engagement?

The following code sample can be used immediately if you are wanting to track your Proactive chat engagement (simply copy and paste the proper version).
This event code will track the proactive chat engagement rate for each agent alias. This example snippet can be used for those that want to see the rate of proactive chats and the engagement of these proactive chats.

  • ‘proactivePrompt’
  • ‘proactiveEngaged’

 

ga.js (legacy analytics)

var seAgent;
SnapABug.setCallback('OpenProactive', function(agent, msg) {
seAgent = agent;
 _gaq.push(['_trackEvent', 'SnapEngage', 'proactivePrompt', agent]);
});
SnapABug.setCallback('StartChat', function(email, msg, type) {
if (type == 'proactive') {
_gaq.push(['_trackEvent', 'SnapEngage', 'proactiveEngaged', seAgent]);
 }
});

 
analytics.js

var seAgent;
SnapABug.setCallback('OpenProactive', function(agent, msg) {
seAgent = agent;
 ga('send','event','SnapEngage', 'proactivePrompt', agent);
});
SnapABug.setCallback('StartChat', function(email, msg, type) {
if (type == 'proactive') {
ga('send','event','SnapEngage', 'proactiveEngaged', seAgent);
 }
});

Check if it is working!

In the Google Analytics dashboard, you can find the tracked events under the Content -> Events category:
2013-03-08_2153-(1)
Note when using Analytics in Google Tag Manager:
If you notice custom events are not showing in the GA reports, there is a way to verify that the events are not sent from the browser correctly – see in a debugger (Chrome developer tools or FireBug) that the “utmac” parameter is sent as something like “UA-XXXX-X”, instead of the real Google Analytics account id.

A solution is to set a Tracker Name (in this case in the advanced settings):

00001391


Other items you want to track?

For advanced users, you will want to visit our developer API documentation to script out any additional events you want to track. Most events can be successfully tracked in order to create useful data for your team! http://developer.snapengage.com/javascript-api/

Feel free to chat with us with any questions!


Published January 12, 2012