How to install Intercom with Google Tag Manager

- 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.
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.
Unfortunately, this is not too useful to us
because we won't be able to use all
the functionality within Intercom itself.
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.
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 afterwards 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 log in 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 a 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.
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.
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.
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.
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, til next time.

How to install Intercom with Google Tag Manager

Latest Posts