DEV Community

Cover image for Drift Event Tracking in Google Tag Manager
Kevinleary.net
Kevinleary.net

Posted on Originally published at kevinleary.net

Drift Event Tracking in Google Tag Manager

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.

Drift GTM Custom Events

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”.

Drift Event Category Variable in Google Tag Manager

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.

Drift Event Trigger in Google Tag Manager

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
});
Enter fullscreen mode Exit fullscreen mode

Helpful References

Top comments (0)