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

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.

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(event){
            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(event){
            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: ' + event.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: ' + event.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.


Did this page help you?