The drift documentation provides a different method, but it requires code level changes to your site. Drift is already sending custom events to Google Tag Managers dataLayer
, so these JavaScript event handlers are not necessary anymore. It’s likely that Drift will likely update their documentation to reflect this approach if they haven’t already.
Google Tag Manager Setup
The approach I use allows you to track all Drift events in Google Tag Manager with a single tag. It’s straight forward, easy to understand, and simple to setup. It’s also very stable when it comes to change management.
Step 1: Drift Event Category
Variable
Create a new variable with the following properties:
- Type:
Data Layer Variable
- Variable name:
Drift Event Category
- Data Layer Variable Name:
eventModel.event_category
This will capture any eventModel.event_category
values in the dataLayer when a custom event fires. We’ll use this to identify any custom events categorized as a “Drift Widget”.
Step 2: Drift Event
Trigger
Add a new custom trigger with the following properties:
- Type:
Custom Event
- Trigger name:
Drift Event
- Event name:
.*
Check the Use regex matching
option to match all event names. Next, set the “This trigger fires on” option to be Some Custom Events
and enter the following criteria: Drift Event Category
equals Drift Widget
.
This will fire on all custom events with “Drift Widget” set as eventModel.event_category
in the dataLayer.
All Drift Events Sent to Google Tag Manager’s dataLayer
The following events are pushed into Google Tag Manager dataLayer
automatically by Drift.
Button Clicked
When the user clicks on a button in chat as a response to a question. As an example, you could use this for custom event tracking in an external system or triggering a particular event on your website in response to a button press with certain text during a conversation.
dataLayer.push({
event: "Button Clicked",
eventModel: {
event_category: "Drift Widget",
event_label: "Playbook ID: {ID}",
non_interaction: false
}
});
First Interaction
Fires for the first site visitor message in each unique conversation thread, or each distinct conversation ID.
dataLayer.push({
event: "First Interaction",
eventModel: {
event_category: "Drift Widget",
event_label: "undefined",
non_interaction: false
}
});
Playbook Clicked
When the user interacts with a playbook from a greeting by clicking on the message or the widget button.
dataLayer.push({
event: "Playbook Clicked",
eventModel: {
event_category: "Drift Widget",
event_label: "Playbook ID: {ID}",
non_interaction: false
}
});
Playbook Fired
Whenever a leadbot playbook fires to a site visitor.
dataLayer.push({
event: "Playbook Fired",
eventModel: {
event_category: "Drift Widget",
event_label: "Playbook ID: {ID}",
non_interaction: true
}
});
Playbook Dismissed
When the user dismisses a message from a playbook by clicking on the close button next to the message.
dataLayer.push({
event: "Playbook Dismissed",
eventModel: {
event_category: "Drift Widget",
event_label: "Playbook ID: {ID}",
non_interaction: false
}
});
Message Received
When the user receives a message from a team member.
dataLayer.push({
event: "Message Received",
eventModel: {
event_category: "Drift Widget",
event_label: "Conversation: {ID}",
non_interaction: true
}
});
Message Sent
When the user replies to a conversation.
dataLayer.push({
event: "Message Sent",
eventModel: {
event_category: "Drift Widget",
event_label: "Conversation: {ID}",
non_interaction: false
}
});
Chat Started
When the user starts a new chat.
dataLayer.push({
event: "Chat Started",
eventModel: {
event_category: "Drift Widget",
event_label: "Conversation: {ID}",
non_interaction: false
}
});
Email Captured
When the user identifies through an email capture campaign, completes an email capture form inside the widget, or if they simply type their email into a message.
dataLayer.push({
event: "Email Captured",
eventModel: {
event_category: "Drift Widget",
event_label: "Playbook ID: {ID}",
non_interaction: false
}
});
Phone Number Captured
Whenever a user provides a phone number in chat. Currently, it only works for US phone numbers.
dataLayer.push({
event: "Phone Number Captured",
eventModel: {
event_category: "Drift Widget",
event_label: "Playbook ID: {ID}",
non_interaction: false
}
});
Meeting Booked
When the user books a meeting with a member of your team.
dataLayer.push({
event: "Meeting Booked",
eventModel: {
event_category: "Drift Widget",
event_label: "Playbook ID: {ID}",
non_interaction: false
}
});