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>

Video of how to use the listener

Related Event Listener

Helpcrunch Chat

Measure how users interact with your Helpcrunch chat widget, and fire your marketing pixels/tags on interactions that matter.

Hubspot Chat

An event listener that makes it possible for you to track Hubspot chat interactions and trigger your tags when these interactions occur.

Calendly

Track your Calendly booking funnels and interactions, using this Calendly event listener, making it possible to fire your trigger on bookings.

download the google tag manager recipe for tracking Olark chat Interactions

we make you smarter with data

made with ❤️

The DumbData Team
Before you leave, try out these free tools.
FREE GA4 AUDIT TOOL & UTM AUDIT TOOL