Guides
Dev.DriftGuides

How To Send Conversation Events To Google Tag Manager's Data Layer Object

Suggest Edits

Overview

When installing Drift using GTM, you may notice events being pushed onto your GTM’s data layer. This allows you to use that information and pass it onto your tags. However, there may be a case where you don’t necessarily want to install Drift through GTM or simply want to send more events with personalized variables that you can later use for your tags. This tutorial will go over on how to listen for conversation events and how to push those onto your GTM’s data layer.

📘

Note:

Remember to have your Google Tag Manager snippet code installed on your page. The Drift install snippet needs to be running before the Data Layer Object snippet as it assumes Drift has been loaded and is ready. If the Drift install snippet runs after the Data Layer Object snippet, you will see errors in the console tab.

For this example, we will use the events message:sent and startConversation.

First, you will need to listen to conversation events via API.

Next, let's set up event listeners for this example:

window.drift.on('ready',function(api)
  {
    window.drift.on('message:sent',function(data){
			console.log("User replied to conversation " + data.conversationId);
     });
	
 		 window.drift.on("startConversation", function(data) {
       console.log("User started a new conversation " + data.conversationId);
  	 });
});

🚧

Warning:

These should also sit after the drift.load and inside of the drift.ready function to avoid these events from running before the widget has successfully loaded.

If you have Google Analytics or GTM installed on your page, the data layer object should already exist.

📘

Note:

window.dataLayer = window.dataLayer || []; takes care of creating a data layer for the specific page and if it already exists, it will use the existing one. GA and GTM should take care of this.

We can now use dataLayer.push to push events and variables. For this example, we are going to push the following: event, eventCategory, eventAction and eventLabel.

window.drift.on('ready',function(api)
  {
    window.drift.on('message:sent',function(data){
			console.log("User replied to conversation " + data.conversationId);
      dataLayer.push({
              'event': 'driftInteraction', //These are key value pairs
              'eventCategory': 'drift', 
              'eventAction': 'message sent', 
              'eventLabel': 'drift>message sent conversation id: ' + data.conversationId }) 
            }); 

     });
	
 		 window.drift.on("startConversation", function(data) {
       console.log("User started a new conversation " + data.conversationId);
       dataLayer.push({
              'event': 'driftInteraction2', 
              'eventCategory': 'drift', 
              'eventAction': 'start conversation', 
              'eventLabel': 'drift>start conversation id: ' + data.conversationId
          }); 
  	 });
});

You can push multiple events and variables at once, and pass any combination of events and variables relevant to your unique set up. You can then use this information for your tags. To learn more about Google Tag Manager’s data layer and how the information is processed, visit Google’s dev docs.

Working Example

The following implementation is designed to mirror the core functionality of Drift's Google Analytics native integration, pushed to the Tag Manager data layer. These events and labels include the Conversation ID and the Playbook ID as core attributes, but can be replaced by any of the data available in Drift events, described here.

window.drift.on('ready',function(api) {
  window.drift.on("startConversation", function(data) {
    console.log("User started a new conversation " + data.conversationId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'start conversation',
      'eventLabel': 'drift conversation id: ' + data.conversationId
    });
  });
  window.drift.on("message:sent", function(data) {
    console.log("message sent" + data.conversationId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'message sent',
      'eventLabel': 'drift conversation id: ' + data.conversationId
    });
  });
  window.drift.on("message", function(data) {
    console.log("message received" + data.conversationId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'message received',
      'eventLabel': 'drift conversation id: ' + data.conversationId
    });
  });
  window.drift.on("emailCapture", function(data) {
    console.log("email captured" + data.conversationId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'email captured',
      'eventLabel': 'drift conversation id: ' + data.conversationId
    });
  });
  window.drift.on("phoneCapture", function(data) {
    console.log("phone number captured" + data.conversationId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'phone number captured',
      'eventLabel': 'drift conversation id: ' + data.conversationId
    });
  });
  window.drift.on("scheduling:requestMeeting", function(data) {
    console.log("meeting requested with " + data.teamMember.name);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'Meeting Requested',
      'eventLabel': 'Drift teammate userID: ' + data.teamMember.id
    });
  });
  window.drift.on("scheduling:meetingBooked", function(data) {
    console.log("meeting booked with " + data.teamMember.name + data.conversationId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'Meeting Booked',
      'eventLabel': 'drift conversation and userID: ' + data.conversationId + data.teamMember.id
    });
  });
  window.drift.on("conversation:playbookFired", function(data) {
    console.log("playbook fired" + data.playbookId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'playbook fired',
      'eventLabel': 'drift playbook id: ' + data.playbookId
    });
  });
  window.drift.on("conversation:playbookClicked", function(data) {
    console.log("playbook clicked" + data.playbookId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'playbook clicked',
      'eventLabel': 'drift playbook id: ' + data.playookId
    });
  });
  window.drift.on("conversation:playbookDismissed", function(data) {
    console.log("playbook dismissed" + data.playbookId);
    dataLayer.push({
      'event': 'driftInteraction',
      'eventCategory': 'Drift Widget',
      'eventAction': 'playbook dismissed',
      'eventLabel': 'drift playbook id: ' + data.playbookId
    });
  });
 window.drift.on("conversation:buttonClicked", function(data) {
   console.log("convoId and button text" + data.conversationId + data.buttonBody );
   dataLayer.push({
     'event': 'driftInteraction',
     'eventCategory': 'Drift Widget',
     'eventAction': 'button clicked',
     'eventLabel': 'convoId and button text: ' + data.conversationId + data.buttonBody
   });
 });
 window.drift.on('chatOpen', function(data) {
   console.log("chat tool opened" + data.conversationId);
   dataLayer.push({
     'event': 'driftInteraction',
     'eventCategory': 'Drift Widget',
     'eventAction': 'chat window opened',
     'eventLabel': 'drift conversation id: ' + data.conversationId
   });
 });
 window.drift.on('chatClosed', function(data) {
   console.log("chat tool closed" + data.conversationId);
   dataLayer.push({
     'event': 'driftInteraction',
     'eventCategory': 'Drift Widget',
     'eventAction': 'chat window closed',
     'eventLabel': 'drift conversation id: ' + data.conversationId
   });
 });
});

Updated about 1 year ago