Install Drift with Google Tag Manager

A lot of our customers like to use GTM to deploy and fire their Drift JavaScript tags and perform other kinds of Web Tracking. If you have already installed your GTM snippet correctly, following along with our installation instructions should be familiar and easy! 

 

 

Step-by-Step:

 

1) From the Chat Widget Settings, select to the expand the Install tab by clicking it:

 

 

 

 

2) Click to expand the JavaScript, and then copy the JavaScript code that you see on this page:

 

 

 

 

3) In your Google Tag Manager Dashboard, choose the container (site) that you want to install Drift on. 

 

 

 

4) Choose to Create a New Tag

 

 

 

 

4) In the pop-out with an Untitled Tag, choose to create a “Custom HTML Tag”

 

 

 

5) Paste the Drift code you copied earlier into the empty HTML box:

 

 

 

 

6) Make sure you name your Tag!

And before you can save, you'll need to choose a Trigger.

 

 

 

7) For your Trigger, choose to fire on “All pages” unless you’d like to do something else specific to Tags and Data Layers you've created within GTM 😃. You can always customize where the Chat Widget shows on your site from within your Drift Widget by following the the Drift guide here.

Remember to hit Save!

 

 

 

 

8) After saving the tag, you're not quite done. Remember to Submit your changes permanently (and preview them first if you would like).

 

 

 

7) After you Submit your changes, you can describe your Version and hit Publish:

 

 

 

 

8) You can also track more specific Drift interactions and email captures in Google Analytics using GTM. If you are looking to track the basic Drift events like 'Conversation started, 'Meeting booked', or 'Email captured', you can use this help doc to learn more about our Google Analytics integration. 

Apart from that, you can use the a Drift Event Listener script to listen for the Drift JavaScript events and pushes data about each Drift interaction event to a GTM dataLayer. This is slightly more technical, and we would encourage you to have a dev help you set this up! It would be another custom HTML tag inside of <script> tags that looks like this:

  window.drift.on('startConversation',function(event){ 
    { 
	   dataLayer.push({
              'event': 'driftInteraction', 
              'eventCategory': 'drift', 
              'eventAction': 'start conversation', 
              'eventLabel': 'drift>start conversation id: ' + event.conversationId
          });
    } 
  })

Then the dataLayer variables that are used in the Drift Event Listener tag need to be added to GTM. For a lengthier explanation of this, check out this neat tutorial that one of our customers made

 


Did this help answer your question?

thumbs up
thumbs down

Thanks for the feedback! 🙏🏽


Help by drift