Adobe Analytics and Drift Browser Events
Overview
When installing Drift alongside the Adobe Analytics suite, you may wish to push events from Drift onto your Adobe data layer. This allows you to use that information and pass it into Analytics to see key events within chat. This example will show you how to listen for conversation events and push these to your Adobe data layer for analysis.
Note:
Remember to fully install and publish to the Adobe Analytics scripts to your website before starting.
For this example, start by checking out our documentation about Receiving Information from Drift. There are a variety of client-side events Drift can publish to the data layer related to different interactions. These categories divide largely into:
- Widget state metadata like agent availability, chat open/closed, online/offline status, etc.
- Campaign activity, meaning playbook targeting, chat started/closed, special CTA clicks, etc.
- Conversation events, such as messages sent/received, buttons clicked, email capture, meeting bookings, etc.
The following code snippet includes a combination of events representative of how many customers would choose to instrument Drift. Check out the link above for more details on capturing client-side information from Drift!
Installation Steps:
These event listeners should sit after the drift.load function from your default install of our JavaScript. Each event listener is then placed inside the drift.ready function to avoid these events from running before the widget has successfully initialized.
drift.load('YOUR_EMBED_ID_GOES_HERE'); //this is the tail-end of your default Drift snippet
//install the Adobe event listeners above the </script> tags
drift.on('ready', function(api, payload) {
drift.on('message:sent', function(event) {
console.log("DRIFT - Message sent");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftMessageSent", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('startConversation', function(event) {
console.log("DRIFT - startConversation");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftStartConversation", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('emailCapture', function(event) {
console.log("DRIFT - emailCapture");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftEmailCapture", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('welcomeMessage:open', function(event) {
console.log("DRIFT - welcomeMessage-open");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftWelcomeMessageOpen", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('welcomeMessage:close', function(event) {
console.log("DRIFT - welcomeMessage-close");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftWelcomeMessageClose", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('sidebarOpen', function(event) {
console.log("DRIFT - sidebarOpen");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftSidebarOpen", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('sidebarClose', function(event) {
console.log("DRIFT - sidebarClose");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftSidebarClose", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('campaign:open', function(event) {
console.log("DRIFT - campaignOpen");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftCampaignOpen", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('campaign:dismiss', function(event) {
console.log("DRIFT - campaignDismiss");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftCampaignDismiss", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('campaign:click', function(event) {
console.log("DRIFT - campaignClick");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftCampaignClick", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('campaign:submit', function(event) {
console.log("DRIFT - campaignSubmit");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftCampaignSubmit", // "open chat", "minimize chat", etc.
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('conversation:playbookClicked', function(event) {
console.log("DRIFT - conversationPlaybookClicked");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftConversationPlaybookClicked",
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('conversation:playbookFired', function(event) {
console.log("DRIFT - conversationPlaybookFired");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftConversationPlaybookFired",
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
drift.on('conversation:playbookDismissed', function(event) {
console.log("DRIFT - conversationPlaybookDismissed");
window.adobeDataLayer.push({
event: "chatInteraction",
component: {
info: {
name: "driftChat",
interactionType: "driftConversationPlaybookDismissed",
location: "driftChatWidget" //"contact us link" or "chat widget"
},
category: {
primary: "driftChat"
}
}
});
});
});
Updated over 2 years ago
If you're looking for a more secure way to capture Drift events, and with finer resolution on key conversational outcomes, look into our server-side tracking capabilities using Drift Webhooks. Capture data and log directly to your data warehouse in realtime to securely monitor the progress of Conversations, Contact attributes and data, and your Users' availability status and booked meetings.