How to Install Intercom with Google Tag Manager [Tutorial]

Intercom is a great for making Analytics actionable. Intercom comes with a live chat, onboarding & retention and customer support features, such as a help desk and a knowledge base.

In the first part of our Intercom video series, you’ll learn how to install Intercom with the help of Google Tag Manager and identify the user once he logged in.

Links mentioned in the video

Intercom dataLayer Specifications: http://bit.ly/intercomdatalayer
Intercom: http://intercom.com
More Google Tag Manager Tutorials: http://bit.ly/2pucVyY

In this video I’m going to show you how to install Intercom with the help of Google Tag Manager. All and more coming up right after this. (upbeat music) Alright, today our journey starts at intercom.com where you need to go ahead and, first of all, sign up to an account. I trust that you will be able to do this. Once you have signed up you’ll be greeted with the Intercom platform and setup guide. We will go through how we can actually set up Intercom on our webpage with the help of Google Tag Manager. There are many other customizations that you might want to do to Intercom, but we’ll go ahead and go through the install Intercom tutorial here. 

Now, I’m gonna go through a general installation with Google tag manager, but if you have another platform running where there’s already a plug-in available such as WordPress, you might go ahead and do that.

Create a General Intercom Tag in GTM

But, since we want to install this through Google tag manager we’ll go with the Basic JavaScript. Now, here we get the code that we need to install and I have a demo website that I already installed Google tag manager on, so this is the corresponding Google tag manager account. All we need to do with code is copy it, go ahead into our Google tag manager account, go to tags, click on new here and then we can install our Intercom general tag on all pages. We’ll go ahead an configure this. Now, there is no tag template available so we’ll need to go with the custom HTML option and we’ll integrate our code right here. 

Just so we explain this a little, you define here your app id. This is what identifies your account uniquely to other Intercom accounts under a DOP as well. And, down here we have the base tracking code that should be deployed on all pages. All we need to do is go on to triggers and choose our all pages trigger, say this and try this all out. We go into the preview and debug mode, refresh this here and reload our page and now we see our Intercom code is being deployed. Also, we see the little icon pop up on our page so now we have successfully installed Intercom.

How to Capture User Details from Each User

Unfortunately, this is not too useful to us because we won’t be able to use all the functionality within Intercom itself. The website now says okay, now we have installed Intercom correctly, but when we go to the platform we don’t really see anything about a user and can’t utilize any of the customization features of Intercom with our chat widget or our analytics so the real power really comes through when you install a customized version where you transport over the user details over to Intercom. That’s actually the next step that we will go through. 

So, in our guide let’s go back here, to get into our install Intercom section. Let’s go to the next step. Now, we can choose to start a free trial with the services of Intercom. What I wanna do is skip this step because I just want to install the platform for right now. So, we can also skip this step, go back into our guide and there are more steps to complete. We will go with the install Intercom on your webpage. So, we have installed Intercom. 

Now, we want to identify the user. This is actually the step that I wanted to get to and here we have a modified version for users who are actually logged in to our system. Now, as you see, there are custom data points that need to change when the user is logged in to your system. So, for example, here we have the full name that needs to be replaced, the email of the user and we also have a attribute here called created at. Now, with Google tag manager we can replace these values with our variables, but we need to have them available in the data layout beforehand.

GTM Data Layer Specification for Intercom

Now, the data layout is Google tag manager’s construct of transferring data from the actual application layout, so we have a WordPress site running here into Google tag manager and then forward on the information. So, how do we get data layer information custom into your system?

This is something you will probably need to ask your developer to help with to make this a little bit easier. I have come up with a specification document that you can send over to your developer which I am also gonna link up in the description below and it will let your developer know what you want to be doing here. Push user information into the data layer once the user is logged in. It also gives the relevant links to the vendor documentation. All you need to do is give him some examples. So, first of all, the red values should be custom. So, that’s something your developer then can take and put it into the system.

There are also some test cases that you can go through afterward to see if everything is working. So, let’s say I have given this to my developer and implemented it. He goes ahead and puts this into the backend system of our website and then we are ready to test. What would we do? We would go to our application, actually log in. So, here we have a login account, just gonna go with the John Doe account here and I’m gonna log in and we’re gonna see if in the data layer and on the left side, we have a new event called user. Once we click on that we can go to the data layer and see what data layer information is now available here in our data layer.

For us, data layer information now shows that there was an event called user with the user name, the email address, and the user id and this is information that we want to send over to Intercom. To use this data we actually need to build some data layer variables to pull out the right values from this data layer. So, let’s go ahead and do that. Let’s go over to Google tag manager, into our variables, and build new user-defined variables. This will be a data layer variable. We will pull out the name key. So, let’s go on to configuration, use data layer variable, and just need to match up what are the keys that we want to pull out, in this case, name. Let’s save that and repeat that step for all the other keypad values and in the end, you should have these three variables or more if you want to send over more information, available in your Google tag manager account.

You can try them out by going to refresh and then refresh your page when you are logged in. And again, we have a user event here. Then, when we go on page view, we want to go into variables and see how they are filled. So, we have dlv email, dlv name and our user id. This is data we want to send over to Intercom right now.

Create GTM Tag for User Identification

So, we can go ahead and configure our new identify tag. We’ll go over to Google tag manager, into tags and make up a new tag. This will be our Intercom and is actually for identification for all logged-in users. 

As a tag configuration we’ll go ahead and choose custom HTML. Let’s go back to our demo account here on Intercom, copy this code and input that here. Alright, again we have some Intercom settings and our base code. This time we’re gonna change around the name and here is where we’re gonna put in our variable. And, variables are indicated with these double curly braces. Now, all we need to do is put in our name, this was dlv name, copy that. Same would be true for email, except that we need to change email and created at is actually something you can use, but it’s optional.

I’m actually gonna use the user id and put in our data layer variable of the user id. Whoops, this actually needs to be user id. Alright, this should do it. 

What do we take as a trigger? Well, a trigger is something we haven’t defined yet. We don’t want to fire it on all pages, ’cause that would mean that all our pages would assume the data would be actually already available and we actually wanna build a trigger when the data is available. So, on our page view we need to be certain that this information is actually filled. Now, the most important key that we want to transfer is the email, so you can just check for the email if there is an email present in this field, if not, then don’t fire this tag.

So, what we can do in Google tag manager is just come up with a new page view tag that checks for the email. Let’s go into the configuration and at the page view event we’ll choose page view, but only on some page views where our dlv email contains an at symbol. For example, you could also do something more complicated to avoid false negatives but in my testing, this was sufficient. Let’s save this, and save our tag. Let’s reload our page. 

Now, the problem that you might see here is that this code will fire double. It will actually fire once on all pages and then again if the email is present. So, what we want to do in our general tag is actually go ahead and add our second trigger as an exception. So, once our exception is true, so the email is present, this will actually not fire and only our second code will fire. Let’s save this, refresh our preview and debug mode and go back to our page and let’s reload this.

Testing

And, we see our Intercom identify logged in call fired, transferred the information over to Intercom, so let’s go ahead now and see if this step is completed. That updated quite well and if you go into our platform we should see a new user coming into the system shortly after. So, now, here we go. Once we have reloaded we have our user, John Doe, which is now in the system. You can click on him and we see all the information that Intercom tracks by default. You can track a little bit more sophisticated, but that’s something we’re gonna cover in the next video.

Don’t forget now that we have Intercom installed with Google tag manager, we’ll go ahead and submit this as a version and publish it to all your users. The best practice is to give this a version name and then publish this to all your users so it’s live on your website and now the users get tracked with the help of Intercom but also have the little chat widget available to get in contact with you. So, there you have it. 

Summary

This is how you can install Intercom with the help of Google tag manager. Now, this is a series of two videos and in the next video, I’m gonna show you how to install Intercom events with the help of Google tag manager. Now, if you’re new to this channel, we do marketing tech reviews, tutorials and give you tips on better tracking on this channel. So, if you haven’t yet, consider subscribing over there and also check out our next video where we’re gonna talk about event tracking with Intercom. My name is Julian, till next time.

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

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.