June 24, 2017
Zopim + Google Tag Manager: How To Install Widget, Control It, and Track Events
It’s quite evident that users sometimes face difficulties while navigating through a website. As users, we hate that part when we have no solution even after a few attempts. Many websites have a help-desk, but it’s quite a long and tedious process to pick up the phone and make a call, or send an email and wait hours for a response.
That’s where online chats come in handy. They are a great way to engage visitors and possibly turn then into customers. That’s why I decided to write a Zopim Google Tag Manager guide which describes how to install the widget and, more importantly, track events in Google Analytics. In fact, that’s not all! Continue reading and you’ll see what I mean.
Zopim is a real-time chat solution for websites, which enables you to easily add a chat widget to your website or SaaS interface. In 2014, the startup was acquired by Zendesk and is now called Zendesk Chat.
How to install Zopim with Google Tag Manager?
As you already might know, Google Tag Manager empowers us to add various tracking codes to a website and control them all in one place – GTM account.
Zopim, as well as the majority of online tools, requires you to place a Javascript code snippet on all pages of the website. After you created an account, Zopim will give you a code which looks like this:
Although instructions require you to paste the code between <head> tags, it should work fine even if it is placed between <body> tags. Copy that code and open your Google Tag Manager account.
Click Tags, choose Custom HTML type and paste the code. Set it to fire on All pages.
Done! Now, enable Preview and Debug mode, and test whether the chat widget appears on all pages. By default, it should be located in the bottom right corner of browser window.
The basic part is over. Your visitors can now contact the support team with ease.
Next step – control of the widget.
How to control Zopim Chat Widget with Google Tag Manager?
While the first chapter of Zopim Google Tag Manager guide was pretty quick and easy, this one will require more attention and thoroughness.
Disclaimer: features (described below) are available for Paid Zopim plans only. If you’re using Free plan, consider upgrading.
Another awesome feature of Zopim chat is Javascript API. It enables you to control widget and chat window with small snippets of code.
After you open Zopim Javascript API documentation, on the left side, you’ll see a list of sections. Each one of them contains different elements that you can control, e.g. Chat Badge, Chat Button, etc.
Choose the one you’re interested in.
Expand Zopim Chat Badge
Let’s say, you want to “play” with Chat Badge. Click $zopim.livechat.badge and you’ll see the following list of actions:
- Set color
- Show chat badge
- Hide chat badge, etc.
Click any of these actions and you’ll be automatically scrolled down to the exact part of the documentation. I decided to choose Show function.
What you’ll see there is a name of the function and a sample code which can be easily used in practice. You can also click Run script link to see how it works in action.
By default, Zopim chat widget looks like this:
But with a small piece of code, you can expand it and turn into this (looks more like Call-to-action, right?):
Let’s try this together. Copy the sample code:
|
1 2 3 4 5 |
<script> $zopim(function() { $zopim.livechat.badge.show(); }); </script> |
Head over to your Google Tag Manager account and create a new Custom HTML tag. Paste the code there.
Now, the most important part – triggering. Thanks to Google Tag Manager, you are free to decide when you want that chat widget to be expanded.
My rule of thumb would be to expand the chat widget when the user is looking for help/guidance. Easy to say, hard to do, right?
“When do my visitors need the help?” – you might ask. Well, there is no universal answer. My suggestion would be to experiment and see which works the best for your business. Ask your customers/visitors for honest feedback, that should give some ideas. Ask friends and family to look at your website from a neutral perspective and ask their opinion.
Here are a couple ideas for triggers of this custom HTML tag (which expands the chat badge):
- When a visitor navigates to Contact Us page. Trigger type: Pageview, URL contains /contact-us.
- After spending 90 seconds on a page. Use timer trigger here.
Another important thing to mention – all these scripts must be fired after the main Zopim Widget code has loaded.
Show a Chat Badge With Custom Message
If you wish, you can customize the text, visible in the chat badge. By default, it is “We’re online”, but with the additional line of code, you can easily customize it. Let’s take a Javascript code snippet from the previous example:
|
1 2 3 4 5 |
<script> $zopim(function() { $zopim.livechat.badge.show(); }); </script> |
And add one more line:
|
1 |
$zopim.livechat.badge.setText('Wanna talk?'); |
The final code should look like this:
|
1 2 3 4 5 6 |
<script> $zopim(function() { $zopim.livechat.badge.show(); $zopim.livechat.badge.setText('Wanna talk?'); }); </script> |
This snippet of code will do two operations:
- Expand the badge.
- Change the text to “Wanna talk?”.
The final result should look like this:
Don’t expand the badge too soon
I often see websites which popup chat windows or expand badges too soon. As a visitor, don’t you hate when you’ve just landed on a website and after 2 seconds you get bombarded with various messages asking for something? What’s your most genuine reaction can be here?
Right. So what makes you think this very same solution won’t annoy your visitors? Try to find that perfect time/moment, when the appearance of chat window is appropriate. Let’s remember previously mentioned two examples of decent timing:
- When a visitor navigates to Contact Us page. Trigger type: Pageview, URL contains /contact-us.
- After spending 90 seconds on a page. Timer trigger is awesome this purpose.
But don’t take this for granted, and experiment. See what’s best for your business.
Explore Zopim Javascript API
Don’t limit yourself to only two examples I’ve described. There is a bunch of other options you can make use of. You can also control chat window, pre-chat form, send custom user-related data, etc. Not sure what a particular function does? Click Run script and see it yourself.
Just keep in mind that Zopim Javascript API requires you to have a paid Zopim subscription.
How to track Zopim with Google Tag Manager?
Zopim Javascript API lets you not only send the data to Zopim but also catch particular events, which is very convenient for those who are interested in seeing that data in Google Analytics.
In my opinion, the most important interactions are when the chat starts and when it ends. That’s where the Zopim Listener jumps in.
For your convenience, I have published a ready-made Zopim Google Tag Manager recipe which listens to these two interactions and pushes them as events to Google Analytics. Just click the button below, follow the instructions and start tracking events in minutes. If you’re interested in learning how the recipe works, continue reading.
Zopim Custom Auto-event Listener for GTM
I have written a little piece of code which listens to Zopim Chat’s interactions (Chat started and Chat ended, in particular).
My most loyal readers know that I’m no developer. And that did not change, actually. But I am always looking for ways to learn some new things, and Javascript is one of them. Although I am still a total JS beginner and learning in baby steps, I hope to have some decent skill in the future.
But that does not change the essence of this blog – to help non-developers track what they want with little or no help from developers.
Anyway, let’s get back to Zopim Listener. I wrote a little piece of code which was later reviewed by one of my colleagues/developers. So you can be sure that this code won’t break anything on your site.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $zopim(function() { $zopim.livechat.setOnChatStart(function() { // trigger when chat starts window.dataLayer.push({ "event": "zopimChat", "zopimChatAction": "zopimChatStarted" }); }); $zopim.livechat.setOnChatEnd(function() { // trigger when chat closes window.dataLayer.push({ "event": "zopimChat", "zopimChatAction": "zopimChatClosed" }); }); }); </script> |
Once the chat conversation is started or closed, this listener fires zopimChat event with attribute zopimChatAction. Attribute’s possible values are zopimChatStarted or zopimChatClosed.
Copy listener’s code and head over to Google Tag Manager. Go to Tags and create a custom HTML tag, paste the code there.
As for triggering, create a new trigger with the following settings:
- Type: Pageview – DOM Ready.
- This trigger fires on – All DOM Ready events.
Important: This listener must fire after the main Zopim widget script was initiated. So if you’ve set the main script to fire on DOM Ready event, then you can:
- Either set the Zopim Listener to fire on Window Loaded event (Trigger type: Page view – Window Loaded).
- Or fire listener and main script on DOM Ready event, but set main script’s priority to 1 (while listener remains at 0). The tag with higher priority will fire first. You can set Tag Firing Priority under Advanced Settings of the Tag.
In my case, main Zopim script fires with All Pages trigger, while Listener fires with DOM Ready trigger.
Let’s Create Variables and a Trigger
After the tag is created, save it. Refresh Preview and Debug mode, and then refresh the website you’re currently working on.
Start a conversation in Zopim chat widget.
After Chat started message appears in the chat window, you should see zopimChat event in GTM Preview and Debug console. That event will be our trigger. Click it and then navigate to Data Layer tab.
What you see if all information which is available with the event:
- Event name. It always will be zopimChat.
- zopimChatAction. In this case, it’s zopimChatStarted.
If the visitor ends the chat, you’ll get an event of which zopimChatAction attribute equals to zopimChatClosed.
What we should do next is to “teach” Google Tag Manager how to catch zopimChat events and to read zopimChatAction values. That’s where triggers and variables come in.
In Google Tag Manager, create a trigger with the following settings:
Then, create a variable:
While you can’t test the trigger without having it assigned to a tag, you can easily check whether Data Layer variable was created properly. Refresh Preview and Debug (P&D) mode, then refresh the website you’re currently working on.
Start or end a chat conversation. After zopimChat event appears in P&D console, click it and go to Variables tab. If your newly created variable dlv – zopimChatAction contains either zopimChatStarted or zopimChatClosed, you’re good to go. This variable will be important for us in Google Analytics tag, that we’ll create in the next chapter.
Google Analytics Event
We’ve come to the last part of Zopim Google Tag Manager guide – let’s create a tag which sends interaction data to Google Analytics.
In Google Tag Manager, go to Tags and create new Universal Analytics tag with the following settings:
This tag fires only when zopimChat event is pushed to the data layer and passes the following data:
- Event Category – Zopim Chat
- Event Action – either zopimChatStarted or zopimChatClosed (depends on the context).
Don’t forget to test this event with Google Analytics Real-time event reports. After the Universal Analytics tag is fired, you should see it in GA Real-time reports as well.
Zopim Google Tag Manager Guide: Conclusion
Google Tag Manager strikes again! It’s an irreplaceable tool when it comes to installing various scripts, tracking certain activity and pushing data/interactions to other 3rd party tools/platforms.
In this Zopim Google Tag Manager guide, I’ve explained three ways how you combine Google Tag Manager and Zopim chat (current name: Zendesk Chat):
- How to Install Zopim Chat with Google Tag Manager.
- How to control Zopim Chat with Google Tag Manager.
- How to track Zopim Chat interactions with Google Tag Manager, and send that data to Google Analytics.
The latter two topics/functionalities are available only for paying users of Zopim chat because their Javascript API is not available for Free users.
24 COMMENTS