Drift Chat Event Listener

Google Tag Manager and the Drift chat event listener makes it easy to push Drift chat activity to your analytics tools (Google Analytics, Heap, Mixpanel, Amplitude, Fullstory, etc.). Having the Drift chat interactions data, you can improve your customer support strategy and increase the impact on your business KPIs.

How to track Drift Chat Interactions with google tag manager

Tracking Drift chat interactions in your analytics tools give you valuable insights into the impact these chat interactions have on your marketing funnel, conversions, website engagement metrics, and other business KPIs.

To implement the Drift chat activity tracking, you’ll need Google Tag Manager and the Helpcrunch chat event listener javascript code.

To begin, create a custom HTML tag where you’ll paste the event listener code and fire it on pageview or DOM ready (always recommended).

💡PRO TIP: if you installed the Drift chat script through Google Tag Manager, please use the DOM-ready trigger instead.

The next step in this implementation is to create a custom event with the event name of [driftchat_action], which gets fired on all chat activity

To get more information on what chat activity happened, you’ll need to create a dataLayer variable with the key [chatAction]

[chatAction] returns the following event description;

User started a new conversation
User started a new conversation
User opened campaign
User clicked campaign
User dismissed campaign
User submitted campaign
Chat widget opened
Chat widget closed
Playbook fired
Playbook clicked
Playbook dismissed
User wants to schedule a meeting
User booked a meeting
User provided a phone number
First interaction
Welcome Message is opened
Welcome Message is closed
User clicked a button
User email captured

You can use the [chatAction] dataLayer variable as event parameters or for streamlining your trigger to fire on specific Drift chat interactions.

Also, if you need more information on certain interactions, there are dataLayer variables you’ll have to create, which are available on some chat interactions

[chatWidgetID] –> Returns the chat widget ID, it’s available on all events

[chatSessionID] –> Returns the Drift chat website session ID, it’s also available on all events

[chatConversationID] –> Returns the Drift conversation ID, available on certain events

[chatPlaybookID] –> Returns the Playbook ID

[chatInteractionID] –> Returns the chat interaction ID

[chatCampaignID] –> Returns the campaign ID

[chatTeamMemberID] –> Returns the team member ID, available on meeting request and booking chat events

[chatTeamMemberName] –> Returns the team member name, available on meeting request and booking chat events

[chatMeetingTime] –> Returns the time the meeting was booked, available on meeting booking chat events

[chatMeetingDuration] –> Returns the duration of the meeting booked, available on meeting booking chat events

[chatMeetingTimeZone] –> Returns the duration of the meeting that was booked, available on meeting booking chat events

[chatAuthorID] –> Returns the timezone of the meeting

[chatquestionID] –> Returns the question ID, when a user clicks on the bot option button or replies to a bot question

[chatVisitorEmail] –> Returns the user email, available in the email captured chat event

[chatButtonText] –> Returns the user email, available in the email captured chat event

Connect your analytics tags to the trigger and use the dataLayer variables you created to push more information about each Olark chat interaction.

You should ignore them and don’t use them for triggering your tags.

Having the data in your analytics tools, such as Google Analytics, Mixpanel, Piwik Pro, Heap, Fullstory, Amplitude, etc. gives you actionable insights into your marketing and customer support strategy.

<script>
drift.on('ready', function (api, eventData) {
// eventData content described on the "Configuration and Settings" page.
// fires when a user starts a conversation
window.drift.on("startConversation", function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User started a new conversation",
'chatConversationID': data.conversationId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
//fires when GDPR is clicked
window.drift.on("gdprClicked", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User started a new conversation",
'chatGDPRAccepted': data.accepted,
'chatUserID': data.endUser,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when campaign begins.
window.drift.on("campaign:open", function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User opened campaign",
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when a call to action (CTA) is clicked.
window.drift.on("campaign:click", function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User clicked campaign",
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when a user closes a campaign message.
window.drift.on("campaign:dismiss", function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User dismissed campaign",
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when a user starts a chat or submits an email capture of a campaiggn
window.drift.on("campaign:submit", function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User submitted campaign",
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when a chat widget is opened
window.drift.on('chatOpen', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "Chat widget opened",
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when a chat widget is closed
window.drift.on('chatClose', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "Chat widget closed",
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires whenever a leadbot playbook fires to a site visitor.
window.drift.on("conversation:playbookFired", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "Playbook fired",
'chatConversationID': data.conversationId,
'chatPlaybookID': data.playbookId,
'chatInteractionID': data.interactionId,
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires whenever a leadbot playbook is clicked by the visitor.
window.drift.on("conversation:playbookClicked", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "Playbook clicked",
'chatConversationID': data.conversationId,
'chatPlaybookID': data.playbookId,
'chatInteractionID': data.interactionId,
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires whenever a leadbot playbook is dismissed by the visitor.
window.drift.on("conversation:playbookDismissed", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "Playbook dismissed",
'chatConversationID': data.conversationId,
'chatPlaybookID': data.playbookId,
'chatInteractionID': data.interactionId,
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when the schedule meeting card is pushed to a conversation (or a "calendar drop")
window.drift.on("scheduling:requestMeeting", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User wants to schedule a meeting",
'chatTeamMemberID': data.teamMember.id,
'chatTeamMemberName': data.teamMember.name,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when the user books a meeting with a member of your team
window.drift.on("scheduling:meetingBooked", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User booked a meeting",
'chatTeamMemberID': data.teamMember.id,
'chatTeamMemberName': data.teamMember.name,
'chatMeetingTime': data.meeting.time,
'chatMeetingDuration': data.meeting.duration,
'chatMeetingTimeZone': data.meeting.timeZone,
'chatConversationID': data.conversationId,
'chatPlaybookID': data.playbookId,
'chatInteractionID': data.interactionId,
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when the user phone number is captureD
window.drift.on("phoneCapture", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User provided a phone number",
'chatAuthorID': data.authorId,
'chatMessageID': data.messageId,
'chatPlaybookID': data.playbookId,
'chatInteractionID': data.interactionId,
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires for the first site visitor message in each unique conversation thread, or each distinct conversation ID.
window.drift.on("conversation:firstInteraction", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "First interaction",
'chatAuthorID': data.authorId,
'chatMessageID': data.messageId,
'chatPlaybookID': data.playbookId,
'chatInteractionID': data.interactionId,
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when the welcome message is open
window.drift.on('welcomeMessage:open', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "Welcome Message is opened",
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when the welcome message is closed
window.drift.on('welcomeMessage:close', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "Welcome Message is closed",
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
// fires when the user clicks on a button in chat as a response to a question
window.drift.on("conversation:buttonClicked", function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User clicked a button",
'chatConversationID': data.conversationId,
'chatPlaybookID': data.playbookId,
'chatInteractionID': data.interactionId,
'chatCampaignID': data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId,
'chatquestionID': data.questionId,
'chatButtonText': data.buttonBody,
'chatMessageID': data.messageId,
'chatAuthorID': data.authorId
});
});
window.drift.on("emailCapture", function (e) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'driftchat_action',
'chatAction': "User email captured",
'chatVisitorEmail': e.data.email,
'chatConversationID': e.data.conversationId,
'chatPlaybookID': e.data.playbookId,
'chatInteractionID': e.data.interactionId,
'chatCampaignID': e.data.campaignId,
'chatSessionID': drift_session_id,
'chatWidgetID': drift.embedId
});
});
});
</script>