As we saw in our previous article, Google Tag Manager is a powerful tool that allows us to track all sorts of events on our website. It also means we just require 1 small code snippet implementation on site, and from there we can add/remove pixels and tracking code without bothering our web developer friends!
Drift Chat is our tool of choice for conversational marketing (also known as on site chat bots).
We find this a valuable lead generation tool for own website and for clients. It helps us quickly route new and potential customers to the correct people in the business faster than just using the traditional method of form fill > email > phone call.
Although GTM doesn’t support Drift tracking natively, we can build our own set of triggers and variables to measure conversation metrics (i.e. user replies, or chat box closed).
In this article we're going to:
- Set up the custom listener tag. We will use this tag to push values into the data layer.
- Trigger set up: DOM Ready and Custom Event.
- Create Analytics events by using custom variables.
1. Setting Up The Listener Tag
This is probably the most challenging step we are going to face while setting up our tracking events. We're going to create our custom event for Drift chat and push it to the data layer.
Apart from GTM knowledge, an understanding of Drift’s API is needed to set up the tracking. Fortunately, we have already included a fully working code below.
<script>
// First things first. We initialize the Widget
window.drift.on('ready',function(api){
// We are going to start including events we want to track after this line
window.drift.on('startConversation',function (event){
// After we start listening to the event, we will push the values into
//the datalayer
// The Datalayer will include, apart from the custom event, the event
//values we will push later on to GA: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
{
dataLayer.push({
'event':'driftAction',
'eventCategory':'Drift',
'eventAction':'Converstion started',
'eventLabel': 'Conversation started'
});
}
})
window.drift.on('campaign:dismiss',function(event){
{
dataLayer.push({
'event': 'driftAction',
'eventCategory': 'Drift',
'eventAction': 'Box Dismissed',
'eventLabel': event.campaignId+ 'Dismissed'
});
}
})
/**
**Sidebar Events
**sidebarOpen is the event that fires when the sidebar opens.
**sidebarClose is the event that fires when the sidebar closes
**/
window.drift.on('sidebarOpen',function(e){
{
dataLayer.push({
'event':'driftAction',
'eventCategory':'Drift',
'eventAction':'Sidebar opened',
'eventLabel': 'Sidebar opened'
});
}
})
window.drift.on('sidebarClose',function(e){
{
dataLayer.push({
'event':'driftAction',
'eventCategory':'Drift',
'eventAction':'Sidebar closed',
'eventLabel': 'Sidebar closed'
});
}
})
/**
** Welcome message
**/
window.drift.on('welcomeMessage:open',function(event){
{
dataLayer.push({
'event':'driftAction',
'eventCategory':'Drift',
'eventAction':'Customer was welcomed',
'eventLabel': event.conversationId
});
}
})
window.drift.on('welcomeMessage:close',function(event){
{
dataLayer.push({
'event':'driftAction',
'eventCategory':'Drift',
'eventAction':'Welcome message closed',
'eventLabel': event.conversationId
});
}
})
window.drift.on('message:sent',function(data){
{
dataLayer.push({
'event':'driftAction',
'eventCategory':'Drift',
'eventAction':'User replies',
'eventLabel': data.conversationId
});
}
})
/**
** Here we are going to get the visitor's email
** Remember that we can't push this into Analytics
**/
window.drift.on('emailCapture',function(e){
{
dataLayer.push({
'event':'driftAction',
'eventCategory':'Drift',
'eventLabel':'User Introduced email',
'email': e.data.email
});
}
})
})
</script>We will create a new Custom HTML tag and paste the code above. The trigger we will use in this case is “Dom Ready” trigger in all pages where our drift shows.
This is what the custom HTML Tag looks like
2. Trigger Setup
In order to create a DOM Ready trigger, we will head to “Triggers > New Trigger”.
In the trigger configuration, we will use the “Page view > DOM Ready” trigger type.
DOM Ready rather than Page Views
After selecting it, we will fire it on “All DOM Ready Events”. We can save the trigger after this step.
The next step is to create our own defined trigger for the Drift event listener we have set up earlier. This trigger will fire when any of our custom events happens, for example when a message is sent by a user, as we have define it on our listener tag.
We will add another trigger, this type we select “Custom Event” under “Other” category. We will name it driftAction which will fire when “All Custom Events” with that name happen.
Important: Preserve capitalisation! JS is case sensitive
Almost done!
At the moment we have all of the custom HTML Tag implemented. We're now listening to the custom events, but have to push everything into Google Analytics to measure the impact Drift has on the webpage. So, let's go ahead and create the final tag and variables.
3. Creating The Variables
We need to create new variables that will store information from the values that we are going to push to GA. For example, the "eventAction" variable we will set up now, will have "user replies" as a value when a message is sent, or "Welcome message closed" when someone closes the welcome message.
To create these variables, 3 in total, we will head to "Variables > User-Defined Variables > New variable". The variable type is "Data Layer Variable" (as these values are pushed into the data layer), with "eventAction" as the name. We will repeat these steps for "eventCategory" and "eventLabel" as well.
Creating the variables
Finally, the last step. We will create a new "Analytics Universal" tag following these instructions:
Tag Creation to push values into Google Analytics
And we are ready to publish and see how is it working.
Conclusion
We've seen how we can use the Custom HTML Tag to build our own listener to track Drift events. GTM gives us flexibility to track information in multiple situations, break it down to variables and use it across the website.
For example, we could create a tag with a trigger that would change a certain text on the website by using CSS selectors in case that the user has dismissed the box without any other interaction.
Once set up properly you'll have another set of events in Analytics from which to make more informed marketing decisions and another step in the user journey to help understand how your people are moving through the funnel from research to purchase/conversion.
