How to Track Intercom Events with Google Tag Manager

Do you want to have a more targeted conversation with your audience?

With Google Tag Manager, you can set up Intercom event tracking to help you segment your website traffic.

To make things easier for you, I’ve created a JavaScript snippet that collects data on user interactions when the user is logged in.

In this guide, we will learn how to use this script to track events in your Intercom account with the help of Google Tag Manager. 

An overview of what we’ll cover in this guide:

So let’s dive in!

Basic Setup Requirements

We’ll start with an implementation where the Intercom base tracking code is installed via Google Tag Manager. This code will identify users when they log into their accounts, then send that data to our Intercom account. 

Once we have the data in our Intercom account, we’ll want to see the tracked events for this user in the Activity column. 

To do that, let’s go over to the Setup Guide.

Setup Guide menu for event tracking in the Intercom account

Under this menu, click on the Add custom events option. 

Add Custom Events for event tracking in the Intercom account

This is where you’ll find the tracking codes that we’ll use to track events.

Tracking Codes for custom events tracking in the Intercom account

You can use the first code if you simply want to send the Track Event call along with the name of the event.

But, if you want to track events in a more customized way, I recommend using the second code. With the second code, you can attach custom data to your event so that you can segment your customers based on this data.

That said, they’re both quite useful. So, I’ll show you how to use both tracking codes in this guide.

Tracking Intercom Events with Google Tag Manager

Let’s try using the first code to track events.

In our example, we’ll set up the code to track product page views. It’s quite simple to track because we can identify the product pages using their URLs.

Identifying product pages by their URLs

So, we’ll start by copying the code from the Intercom account.

Code for tracking event in our Intercom account

Next, we’ll go to our Google Tag Manager account and create a Custom HTML tag. 

Creating a Custom HTML Tag for event tracking in Google Tag Manager

Then, paste the event tracking code that we had copied from our Intercom account.

Since this code is in Javascript, we’ll need to add <script> tags around it. 

Pasting the event tracking code in the Custom HTML Tag of Google Tag Manager

In our code, let’s rename this event to the viewed product page in our HTML code. This is the event name that will be displayed in our Intercom account.

You can also simply copy the following script:

<script>
window.Intercom(“trackEvent”, “viewed product page”);
</script>
Viewed product page event for event tracking in Google Tag Manager

When we create multiple Tags in Google Tag Manager, it becomes important to sequence our Tags correctly. In our example, we want this Tag to fire after other general Tags have already fired. 

So we’ll give a Tag firing priority of 1 (one). 

Setting the Tag firing priority of the Custom HTML Tag in Google Tag Manager

We can also use the Tag Sequencing functionality if we’re not able to trigger our events correctly. But this is a complicated setup that depends a lot on your individual implementation, so we’ll skip it in this guide. 

Let’s now attach a trigger to this Tag. We want to fire this on a page view event, so we’ll create a Page View trigger.

However, we don’t want the Tag to fire on all pages. Instead, we’ll fire it only on product pages.

So we’ll configure the trigger to fire on Some Page Views only when Page Path contains /product

Setting up trigger configuration for Intercom event tracking in Google Tag Manager

Let’s Save this trigger and then Save our Tag.

For our Tag, we’ve set the Tag firing priority of 1. We’ll double-check the Tag firing priority of all other Tags and make sure it is greater than 1, so that all the other Tags are fired before the Intercom event tracking Tag. 

And our Tag is now ready!

We should see the Tag fired in the debug console of the Google Tag Manager if a user who is logged in reloads a product page. 

Intercom event tracking Tag has fired in Google Tag Manager

We’ll also see the event recorded under the user account in our Intercom platform. 

New event tracked under the user account in Intercom

With this, event tracking is set up!

🚨 Note: If you click on an event recorded under the Their activity column, you can see other users who performed this same action!

But wouldn’t it be great if we could also see which product has been viewed by the user?

Let’s see how to track that!

Sending Custom Information to Intercom

If you want to attach additional data to your events in Intercom, we’ll use a different code that we can customize to suit our tracking needs.

Go back to Add custom events under the Setup Guide menu. 

This time, you’ll want to copy the custom events tracking code. You’ll notice that this already has more parameters than the tracking code we used earlier.

Custom events code for event tracking in the Intercom account

Next, paste this code in your Intercom events tracking Custom HTML Tag.

Adding Intercom custom event tracking code to Google Tag Manager

Now, let’s customize the code to track product views by users. 

You can add custom information using key-value pairs.

The code we copied from Intercom has keys for order date, invoice number, and order number. Each of these keys can be paired with dynamic values using variables.

💡 Top Tip: You can also send other custom information such as price of the product, title of the product, total quantity of the product and other aspects that let you segment your customers.

Let’s use the above example of a user who visits a product page. If we want to know which product they were looking at, we can add the page path (the part of the URL that comes after the domain) as a key-value pair.

So, we’ll add a “pagePath” and its corresponding GTM variable in our code. (You can remove any other key-value pairs for data that you don’t need.) We can then Save the Tag. 

<script>
window.Intercom(“trackEvent”, “viewed product page”, {
“pagePath”: {{Page Path}}
}
});
</script>
Adding custom events tracking code in Custom HTML Tag in Google Tag Manager

Our Tag is now set up and ready to send custom information.

Now if a user clicks on a product page on our demo shop, we should see the viewed product page event in our Intercom account under the Activity column.

If we expand this event, we’ll see the PAGEPATH to this product page.

Product page path tracked for the product view event in our Intercom account

However, this current implementation bases our tracking on page views, which are very basic events. 

A more meaningful implementation would be tracking button clicks. Especially for an eCommerce shop, tracking “Add to cart” and “Checkout” button clicks can tell us much more about user behaviour and preferences.

Tracking Button Clicks with GTM

So let’s track an “Add to cart” click.

We’ll start by deploying a generic All Elements click trigger.

Then name the trigger and Save it.

Creating an All Elements trigger to track button clicks in Google Tag Manager

This trigger will send click variables to Google Tag Manager if you click on a button. You can see which variables under the Variables tab of gtm.click while in GTM preview mode.

Variables under the gtm.click menu of the debug console in Google Tag Manager

But to be able to see the click variables, you’ll first need to activate them.

Activating Click Variables

Let’s go to the Variables menu of Google Tag Manager and click on the Configure button under Built-In Variables

Configuring built-in variables in Google Tag Manager

Then, activate all the Clicks variables. We’ll only need to do this one time. 

Activating click variables in Google Tag Manager

Once the click variables are activated, we’ll see them in the debug console in preview mode when the user clicks on a button.

The unique variable that gets registered when we click on a button is the Click Text. On this demo site, the Click Text for the Add to cart button is ‘Add to cart’.

Click variables for event tracking in Google Tag Manager

Similarly, if we click on any other button, the click variables will be different. We will use this unique click variable to filter our click trigger.

Creating a Click Trigger

The next step is to create a click trigger that fires on “Add to cart” clicks. 

First, we’ll change the firing option from All Clicks to Some Clicks. Then, we’ll add the condition such that Click Text equals Add to cart.

Trigger Configuration for click variables in Google Tag Manager

Save the trigger and that’s it!

Our trigger is now ready! Next we’ll create a Tag to attach to this trigger.

Creating a Click Tag

We want a Tag that fires on the “Add to cart” button click. So this Tag will be quite similar to the product pageview Tag, with just a little modification.

What we can do here is Copy our earlier Tag that tracked product page view.

Copying the product page view Tag in Google Tag Manager

Next, we’ll rename the event to “add to cart” and while leaving the page path key-value pair unchanged.

Creating an Add to cart event Tag in Google Tag Manager

Then, just attach your new “Add to cart” trigger that fires on the “Add to cart” button click. 

Don’t forget to Save the Tag.

Attaching the Add to cart button click trigger in Google Tag Manager

Testing

Once the event Tag is configured correctly, it will fire on the “Add to cart” button click. 

Add to cart button click Tag fired in the debug console of Google Tag Manager

You’ll also be able to see the same event in your Intercom account. The Activity column for the user will have the add to cart event tracked along with the PAGEPATH that we had sent in our Tag.

Add to cart button click event fired in the Intercom account

You can then Publish this version to make it live to all the users.

Other Events You Can Track

So this was an example of tracking a button click event in Intercom account with Google Tag Manager. 

There are so many other events as well that can be tracked using Google Tag Manager. For example, you can track when a user buys a product, when they perform a certain action, or when product sales reach a certain level. 

This tracking can then be used to customize your user experience by sending tailor-made messages or by segmenting the users to better target them based on their needs.

Summary

So that’s it—this is how you can install event tracking with the help of Google Tag Manager into your Intercom account. 

Combining Intercom with event tracking can help you run successful marketing campaigns, or even just provide a more customized user experience! Your website visitors will have an easier time finding what they’re looking for, and you’ll have an easier time generating leads and conversions because of it.

Do you track your Intercom events with Google Tag Manager? How has this helped your campaigns? Let us know all about it in the comments below!

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
0 Comments
Inline Feedbacks
View all comments

Blog Categories

Join 30,000+ marketers getting exclusive resources and our latest content!

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.