This guide shows you how to track Drift chat widget interactions and email captures in Google Analytics using Google Tag Manager (GTM). The tutorial will show you how to capture the following Drift interactions in Google Analytics events:

1) Drift chat widget is opened and closed
2) Drift chat widget sidebar is opened and closed
3) A user’s email address is captured in a conversation in the Drift chat widget
4) A conversation started and a message sent along with the Drift conversation id

After you’ve captured the Drift interactions in GTM you’ll learn how to pass this data to Google Analytics and view the aggregate reports. You’ll then go a step further and analyze an individual user journey in Google Analytics and see the Drift chat interactions in chronological order together with the user’s other site behaviors.

Google Tag Manager GTM Drift Event Listener Script

To track the Drift chat widget interactions in Google Anaylytics using Google Tag manager, add the script below in a GTM Custom HTML Tag with a custom event trigger where the event equals gtm.dom. The Drift event listener custom html tag listens for the Drift JavaScript events and pushes data about each Drift interaction event to the GTM dataLayer. The Drift interaction data in the GTM dataLayer can then be used to pass this Drift data to Google Analytics via Google Analytics events using GTM.

GTM Custom HTML Tag Drift Event Listener

GTM Trigger for Drift Event Listener Custom HTML Tag

Create Data Layer Variables in GTM

The dataLayer variables that are used in the Drift Event Listener tag need to be added to GTM. You need to create dataLayer variables for eventCategory , eventAction , eventLabel. The screen shot below shows how the data layer variable should look. To create a data layer variable in GTM, in the left navigation click on Variables. Then under User-Defined Variables click the New button. Then choose your variable type under the Page Variables, click on Data Layer Variable. Then add the dataLayer variable name and make sure the dataLayer version is Version 2. These dataLayer variables will be used in the Google Analytics Event tag to track the Drift interactions in the next section of the tutorial.

Google Analytics Event Tag for Drift in GTM

To send the Drift chat widget interaction to Google Analytics via an Event tag click tags in the left navigation in GTM then click the new button. Under the tag configuration section select Universal Analytics Google Analytics. In the Track Type drop down select Event. Then add {{eventCategory}} , {{eventAction}} , {{eventLabel}} to the Category, Action and Label Event Tracking Parameters. For each type of Drift interaction the values for these dataLayer variables will be dynamically populated in the Google Analytics event tag based on the user interaction with the Drift chat widget.

To test this new Drift tracking click the Preview workspace link in GTM. Then go to a page on your site with the Drift chat widget and GTM included. On the bottom of the page you should see the GTM preview and debug panel.

Drift Event Listener Custom HTML Tag First on GTM DOM Ready Event

When the page with Drift and GTM load in preview mode on the DOM Ready event, click on Tags and you should see that the Drift Event Listeners Custom HTML tag has loaded. This is shown in the screen shot below.

driftInteraction DataLayer Events Fire on Drift Chat Widget Interactions

On each of the Drift Interactions that are tracked in GTM you will see a dataLayer event called driftInteraction in the GTM preview and debug window. See the screen shot below.

When you click on the Data Layer associated with the selected driftInteraction dataLayer event in the GTM preview and debug window the GTM DataLayer event values are shown. The screen shot below shows the dataLayer for a visitor sending a message. The Google Analytics event category is drift, the event action is message sent , and the event label is drift>message sent conversation id: 49373107.

You can also see what Google Analytics Event tag fired when you click on the Tag associated with the selected driftInteraction dataLayer event as shown in screen shot below. The dataLayer variables set above are dynamically populated in the Google Analytics event category, action and label.

Drift Chat Widget is Open or Closed

When a visitor comes to your website your Drift welcome message will pop up and greet them. You can use the Drift chat widget JavaScript event listeners to detect when the Drift welcome message is open welcomeMessage:open or closed welcomeMessage:close on the page. The welcome message is shown in the screen shot below.

Drift Chat Sidebar is Open or Closed

When a visitor sends a message via the welcome message chat overlay, the Drift chat sidebar opens and the sidebarOpen Drift chat widget event fires. When a visitor closes the Drift chat sidebar the sidebarClose Drift chat widget event fires. The chat side bar is shown in the screen shot below.

When a visitor starts a chat conversation using the Drift chat widget the startConversation Drift event fires. You can also listen for the conversationId along with the startConversation event and the message:sent event.

User Email is Captured in Drift

When a visitor submits their email address in a conversation in the Drift chat widget the emailCapture Drift event fires. The screen shot below shows how the email address capture looks and the screen shot above shows how it looks within a conversation thread.

Drift Interaction Data in Google Analytics Reports

To view the Drift interaction data in Google Analytics go to the Event reports. In the Google Analytics left navigation under Behavior click on Events > Top Events. In the Event Category report find drift and click on it. Then for the primary dimension click on Event Label to show the drift specific event label report. You should see a list of the drift interaction events like the screen shot below, that were passed to Google Analytics using GTM described in the tutorial above.

Drift Conversation ID Broken Down by Google Analytics Visitor ID

The event label report shown above gives you a nice aggregate summary of the frequency of Drift chat interactions. To glean further insights on an individual visitor let’s break down a specific conversation id further. First filter the event label report on “conversation” to only show drift conversation start or message sent events.  If you capture a visitor id or a user id in a Google Analytics custom dimension you can break down the conversation start or message sent event labels with the Drift conversation id by the visitor id (also known as the Google Analytics Client ID). The screen shot below shows drift message sent by Google Analytics visitor id. You can see that for the date range selected the top 3 GA visitor ids sent 5, 4, and 3 messages in Drift.

Google Analytics User Level Event Interaction Data for a Drift Conversation ID

If we want to get even more details on all the site interactions for a user that we’ve chatted with on Drift we can create a Google Analytics custom report. You’ll need to track GA Visitor ID and Hit Timestamp to create the custom report shown below. Here is a post from Simo Ahava that describes how to use GTM to capture GA Visitor ID, Hit Timestamp, and more. By filtering the custom report below by the second GA Visitor id in the report above, then sorting by Hit Timestamp, you can see the chronological order of interactions. Starting at the top of the report you can see this visitor came to my post on Pardot form tracking on January 6th just before midnight. He saw the Drift welcome message then he quickly scrolled down the page. You can see more on scroll depth tracking and analysis in this post. The visitor came back about an hour later at 12:50 am on January 7th and opened the Drift sidebar and started a conversation, then sent his email in the email capture within the Drift conversation.

See Drift Conversations by Conversation ID in Your Email

If you want to see the conversation thread and email of the visitor, you can search your email (assuming it is connected to the Drift chat notifications) by the conversation id. In my email I searched for conversation id 49373107 (I don’t want to show the conversation history of the actual visitor above). The screen shot below shows 3 notification emails from Drift with conversations that have this id. These were test conversations from the email test@test.com.

Use R to Query the Drift API

I’ve started to explore the new Drift API using R and the httr  and rjson packages. The R code below shows how to get the messages for a specific conversation Id via the Drift API. Make sure you go to https://dev.drift.com/apps first to get your OAuth Access token which should be included in the token variable in the R script. Make sure in your App Settings in dev.drift.com you click the green Install App to Drift button. Then you will see the OAuth Access Token as shown in the screen shot below the script.