Olark chat Event Listener

Measuring user interactions with your Olark Chat widget in your analytics tools gives you actionable insights into how these interactions impact business KPIs such as website engagement, conversions and overall marketing funnel.

How to track Olark chat Interactions with google tag manager

Tracking Olark chat interactions in your analytics tools give you valuable insights into the impact these chat interactions have on your marketing funnel, conversions, and other business KPIs.

To implement the Olark chat activity tracking, you’ll need Google Tag Manager and the Olark chat event listener javascript code.

To begin, create a custom HTML tag where you’ll paste the event listener code and fire it on pageview or DOM ready (always recommended).

💡PRO TIP: if you installed the Olark chat script through Google Tag Manager, please use the DOM ready trigger instead.

What the Olark chat event listener does, is to fire an event on every interaction with the Olark chat widget.

The next step in this implementation is to create a custom event with the event name of [OlarkChatAction], which gets fired on all chat activity

To get more information on what chat activity happened, you’ll need to create a dataLayer variable with the key [chatAction]

[chatAction] returns the following event description;

Visitor_Expanded_Olark
Visitor_Sent_Offline_Message
Visitor_Started_Conversation
Visitor_Message_Operator
Operator_ Message_Visitor
Operator_ Command_Action
Operator_Available
Operator_UnAvailable
User_Hides_Olark
User_Minimizes_Olark

You can use the [chatAction] dataLayer variable as event parameters or for streamlining your trigger to fire on specific Olark chat interactions.

To capture the user data, create a dataLayer variable, using dot notation to select your prefered user data from object [userDetails]

Also, if you need more information on certain interactions, there is an object [chat_details] that has data about the chat interactions

Connect your analytics tags to the trigger and use the dataLayer variables you created to push more information about each Olark chat interaction.

💡PRO TIP: there are two events with the names;

[OlarkChatInfo] fires on page load and gets the user data from Olark, stay persistent on the page but clears after page load

[OlarkChatAvailable] fires on page load, tells us that chat widget is ready and live

You should ignore them and don’t use them for triggering your tags.

Having the data in your analytics tools, such as Google Analytics, Mixpanel, Piwik Pro, Heap, Fullstory, Amplitude, etc. gives you actionable insights into your marketing and customer support strategy.

You can also use the data to understand how these chat interactions impacts conversions, website engagements, your marketing funnel and other business KPIs.

<script type="text/javascript">
//get the user details
olark('api.visitor.getDetails', function(details){
dataLayer.push({
'event': 'OlarkChatInfo',
'userDetails': details
});
});
olark('api.chat.onReady', function(){
dataLayer.push({
'event': 'OlarkChatAvailable'
});
});
//visitor exapnds chat box
olark('api.box.onExpand', function(event) {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'Visitor_Expanded_Olark'
});
});
//
olark('api.chat.onOfflineMessageToOperator', function(event) {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'Visitor_Sent_Offline_Message',
'chatMessage': event.message.body,
'chat_details': event
});
});
// Triggers when the first message has been sent
// Including automated messages from the Greeter or Targeted Chat rules
olark('api.chat.onBeginConversation', function() {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'Visitor_Started_Conversation'
});
});
//track of visitors who have sent a message to an operator
olark('api.chat.onMessageToVisitor', function(event) {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'Visitor_Message_Operator',
'chatMessage': event.message.body,
'chat_details': event
});
});
//tracks Whenever a message is sent to the visitor
olark('api.chat.onMessageToOperator', function(event) {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'Operator_ Message_Visitor',
'chatMessage': event.message.body,
'chatOperator': event.message.nickname,
'chat_details': event
});
});
//tracks Whenever a command is sent from the visitor, e.g chat end, lead
olark('api.chat.onCommandFromOperator', function(event) {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'Operator_ Command_Action',
'chatMessage': event.message.body,
'chatOperator': event.message.nickname,
'chat_details': event
});
});
//tracks Whenever any operator comes online
olark('api.chat.onOperatorsAvailable', function() {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'Operator_Available'
});
});
//tracks Whenever all operators are offline
olark('api.chat.onOperatorsAway', function() {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'Operator_UnAvailable'
});
});
//track chat box minimized
olark('api.box.onHide', function() {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'User_Hides_Olark'
});
});
//user minimizes chat box
olark('api.box.onShrink', function() {
dataLayer.push({
'event': 'OlarkChatAction',
'chatAction': 'User_Minimizes_Olark'
});
});
</script>