April 1, 2020
How to personalize your Website Using Google Tag Manager

How to personalize your Website Using Google Tag Manager

In this video, I’m going to show you how you
can do personalization with the help of Google Tag Manager. So we can hide, show or replace elements on
the website all through JavaScript. And based on the user who is actually visiting
our website at the moment. All and more coming up. Hey there, welcome back to another video of measureschool.com
teaching you the data-driven way of digital marketing. My name is Julian. And today we want to talk about personalization
with the help of Google Tag Manager. Now, you might have encountered personalization,
especially when you log into a website, and suddenly the website is personalized to you. So they know your name, they know your preferences,
it changed around certain website elements to cater to your needs. And it seems like to website knows who is
in front of the computer. Now we can do all of these changes with the
help of Google Tag Manager as well. In a previous video, I showed you how you
can pull data from Active Campaign into Google Tag Manager. So you have the user profile available in
the data layer. Now that data can be used to personalize the
website, what do we need for this? Well, first of all, a little bit of CSS knowledge. So we know how to select elements with the
help of JavaScript. So you need to have some JavaScript knowledge,
and then manipulate the DOM with JavaScript. So all in all, we need to have a little bit
of knowledge, a little bit of skill of JavaScript, CSS, but then also the data available inside
of the data layer or inside of Google Tag Manager. So we have the means to actually do decision
making and manipulate the website based on our preferences and the personalization of
the user. Today, I want to show you some of these examples
on how you can change around the website, hide elements, redirect the user, or insert
new elements on a website based on the user’s behavior, and the profile of the user. Now, this by no means the best practice here
because for personalization, as normally software out there that does this way better than Google
Tag Manager. But I’m here to also show you the capabilities
of the tool and in some instances, it might be useful for you. So without further ado, let’s dive in. To get started with personalization, you need
to have some data available that comes from the user who’s accessing the website at the
moment. Now, such data could be available inside of
a cookie, it could be available inside of JavaScript, if it’s pushed, for example, into
a variable. Or it could be provided by the system if the
user is logged in at the moment. Now, all of that information needs to find
its way somehow, to Google Tag Manager, we have different methods available to pull data
out of cookies, for example. But the most reliable way and the standard
way of having data inside of Google Tag Manager is the dataLayer. Now I have a dataLayer right here to go over
to dataLayer, we can see the information that is available right now, on this page for this
user. Again, how do you get it there? There are different methods. And most of the time, you would ask a developer
to send that information over after the user has been identified in some way. I’ve done a previous video on how to pull
such data from an Active Campaign contact into your Google Tag Manager account. So you then be able to use it for personalization. Now, let’s take a look at what we have available
here. We have the username, first name, the last
name, the email address, the lifetime value of the user, what he’s interested in, what
he has bought previously, we have the last login information, the last buy information,
last visitor information, the last source he came from, and then the first source when
he first entered our website. And if he’s a newsletter subscriber. Now there is information that I’ve decided
to push into the dataLayer. Depending on your CRM system on your back-end
system, what data you have available about the user, you can push that into the dataLayer,
and then use it for your personalization. So what can we do with this data? Now, let’s take a look at this page. We have a new set of fields here. And let’s start out with something pretty
easy. You want to replace this Hi there, make it
more personal and change the text around. Now, in order to do any kind of personalization,
you will need to have the skills of selecting an element within JavaScript. So you also need to know a little bit about
CSS. And then you need to know some standard DOM
manipulation methods to replace text. In this case, we can try this all out in the
developer tools. Let’s click on Inspect here and see how this
is marked up. We have a widget title here in the ID ninja
forms widget so I’m going to copy this and go over to my console. If that’s not open for you just press the
Escape key will open up down here. And we can select the element with document.queryselector. And in parentheses, we can put in our CSS
selector, in our case it would be the ID ninja forms widget two. And then we want to traverse the DOM to the
next node here, which is the span element of the class widget title. Let’s press Enter. And we can see that this is the right element
that we have selected. If I go down here and hover over it can see
this is exactly the element that I want to manipulate. Now I want to get the text of this element
which can be done with the command texts content and we have here or string hider
and now I can manipulate it just with the equal sign and put in anything I want. And you see the text changes. Now how can we use this command inside of
Google Tag Manager? I have come up with a little example here. You want to change the text. So here’s our first example. And it really uses the same line of code here. The only difference is that here I use a variable,
a dataLayer variable that gets pulled out directly from our dataLayer information right
here into a variable which I’ve already built, which is called
dlv first name. And it pulls the information from our dataLayer. And that is information that I will use inside
of our custom HTML tag account with a variable put in a string high plus the first name plus
exclamation point. And then I run my command and the text will
be set to the replacement texts that have entered here. Doesn’t seem to be right should be text content. All right, now we just need to attach a trigger. Now, which triggered do we choose? In our case, we need to wait because we are
actually manipulating the DOM for the DOM to be ready and be loaded. So we can only use these commands, although
the information is available beforehand, on the DOM ready. So we can make sure that all the HTML elements
on this page have loaded and we can replace this text. So let’s try this out. I have a DOM already trigger already prepared. Let’s save this and refresh our page. And we see here there’s a Hi John now implemented. If you had a different name, this would be
different. And as easy as that you can replace text or
change text around based on the information that you have in the dataLayer. Now, another field that I see here is your
email field. We want to make it a little bit easier on
the user and fill that out automatically as we have the information again in the dataLayer,
and the email field. So I’ve built a variable, that is dlv email,
and it pulls up from the dataLayer this value. Let’s try this out. I have already something prepared the prefill
tag right here. And again, it gets the element and then fills
in the value with the dlv email, really, just one line right here. I’m going to find this on DOM ready. Let’s save this and try this out. And voila, now it’s prefilled the form field,
so the user doesn’t have to type in his email address anymore if he is not yet signed up
to a newsletter. I’ve been using the information from the dataLayer
inside of our tags to do some personalization. But we can also use that data to utilize our
variables and triggers. And let’s look into the data again that we
have available about this user. And we see here he is already a newsletter
subscriber. He came through email the last time. So why are we even showing this widget right
here? Couldn’t we just remove it or hide it? Again, that’s pretty easily done with a JavaScript
command. I’ve already prepared something here, which
simply selects our ninja forms widget and then changes the style to display none, which
is in CSS the way to hide an element. Let’s try this out. But let’s build our specific trigger that
only fires if our user is already a newsletter subscriber. Let’s create a new trigger. Again, this will fire on DOM ready, so the
element needs to be there so we can hide it. And then you choose DOM ready as the event
and only fire it when our dlv subscriber, which I’ve prebuilt previously. So if you look into the variables here we
see subscriber is true equals true, only then we want to hide the
element. Let’s save this and try this out. So we have our hide elements and it hit our
newsletter subscriber field because we know the user is already subscribed. So as you can see, you can use the dataLayer
information, personalization information inside of triggers, as well to fire certain tags
that changed your website. Now let’s look again into the dataLayer and
see what information we have available. Apparently, it’s a high-value customer already
spent $500 in our store. He bought certain products. But what he didn’t buy yet is a new special
product that we have on sale right now. So we should make the user somehow aware of
our sale that’s going on. How about we replace our newsletter field with a banner? Well, I have already prepared something. If we go over to the personalization for replace,
we can find here a little bit of code that actually creates a diff element with the class
of ad and insert a new image which I’ve previously have uploaded. So you need to have your assets like images
uploaded to your server. And then you reference that in your HTML code
and insert this whole thing into the widget area. Let’s try this out, go over to the triggers. And we’re going to build a new DOM trigger,
which will fire on if the user hasn’t bought the product that is on sale. Okay, let’s go over and click on DOM ready. And we only want to show this if the user
and we don’t have yet a dataLayer variable for our bought products array here. So I’m going to create that. Choose a new variable. And we’re gonna build a dataLayer variable
for our bought products. Choose the dataLayer variable, and I’m going
to put that in here. So it pulls out the right values. And if this bought product array does not
contain our sale product, we want to fire our tag. Let’s try this out and save this. Refresh of review and debug mode and refresh
our page. And right now we see it has been replaced
or appended to our widget area, a banner here that shows our sale product right now, and
a little banner that I’ve created. So we have a customized website to show a
banner to the user when he enters, and the information is available based on his previously
bought products. Now banners might not be your thing or don’t
really compute on your website. But there are other ways to actually show
people information that maybe doesn’t change the website around per se, but actually display
something additional. And one of these methods is to actually show
a Hello bar that comes up from the top or a modal window. Let’s try this out. So I have a Hello bar here. This actually works with jQuery. So I’m loading a jQuery bar here, and a little
bit of CSS and HTML. By the way, this is an example that I’ve taken
from the guys at Lunametrics, I’m going to link up the source down below. And under the triggers will just choose again,
he hasn’t bought our product yet. Let’s save this, refresh, go back to our page. And you should see our promotion bar now opens
up, you get a coupon code if you use the word Ninja. Again, super simple personalization that only
the user sees who hasn’t bought the sale product yet. Now again, the same thing we would be able
to do with a modal pop up. So again, here is a bit more JavaScript, downloading
jQuery, also the jQuery modal plugin, then I have a little bit of HTML here, and I’m
calling the modal. Let’s try this out. Let’s save this. Refresh. Refresh our page. And here we can see we have, okay, this is
a bit conflicting. Let’s try this out again, maybe without the Hello bar firing, just gonna get rid of the trigger really quickly. Refresh this and this. And you can see our modal pop up, now opens
up. You could put text in it, I put the image
in from our banner. But really, anything would be possible right
here. And you’re not changing the design around
on the page itself, but actually, adding something extra, which would be this modal pop up. Last but not least, we also have the ability
to redirect the user if he has certain traits. So if you would see that user just came from email, we might want to send
them on to a special category that is for email subscribers. So again, we can use that information to invoke
a redirect. So the user would see a little bit of the
website before he would be redirected. So sometimes not the best method to actually
use JavaScript redirects. Nonetheless, it’s a form of personalization
that I also wanted to show you. So we have here our redirect. And it’s a simple JavaScript redirect where
we send a user on to google.com. We could put in anything that we wanted to,
like demo shop.com, so he will be redirected to the homepage and going to put in a trigger
where, for example, again, we’re going to look into the dataLayer. In this case, we are not manipulating the
DOM so we could just use our user info event here. So instead of using the DOM ready event, we
use the custom event, which is the user info event. And we want to fire this when our last source
that we know the user came from email, contains email, or his email. Let’s save this custom event Last source email. Let’s save that. Let’s refresh this. And when I go to our page, reload that, the
redirect will happen. And I’m automatically sent to the homepage. Now, as you can see, we have a modal popup
going on here. That’s because we have a demo running and
it’s not actual user data that comes in probably put in some kind of cookie. So you prevent the popup from opening up again,
and again. But again, this is just a demo to show you
the different ways of personalization, and we were automatically redirected to our demo
shop. So here you have different methods of personalization
with the help of Google Tag Manager. And I’m gonna make this available in a container
download. So you can upload it right to your Google
Tag Manager account. You can find the link down below. All right, so there you have it. This is how you can personalize your website
with the help of Google Tag Manager and a little bit of CSS and JavaScript knowledge
in order to insert these elements and do all these different tricks. Now, again, this is by no means best practice. Normally, you would have a dedicated website
team that actually does changes that are visible to the user. And I might find weird when suddenly something
pops up in their browser. And they don’t know where it’s coming from. Google Tag Manager certainly capable of doing
these changes, but it’s not always best practice. So consult with your team before you actually
do any of these changes with the help of JavaScript and Google Tag Manager. But I love to hear from you. Where would this be helpful? Where would you use such techniques? And also, do you have any other tricks on
how you personalize the website based on the user’s behavior, based on what you have in
Google Tag Manager? Leave us a comment down below. And as always, if you liked this video, give
us a thumbs up and also subscribe to this channel because we bring you new videos just
like this one every week. Now, my name is Julian. Till next time!

11 thoughts on “How to personalize your Website Using Google Tag Manager

  1. Hey Juliann, great video tutorial as always. Great idea to be able to provide personalization, but without having to dive into dev on the site itself. This could be a great GTM container export to import into another install, to do this with amoCRM instead of ActiveCampaign. Or with Klaviyo.

    Would like to contact you to discuss hiring you or a well-trained student or students you may have available or know that can perform Analytics/Tracking/GTM work. Mahalo! – Ed Bisquera

  2. Julian, excellent video. Can we use the data in the data layer to personalize the Facebook ad copy dynamically in the retargeting ads? As we already have the data who abandon the cart or left a lead etc.

  3. Hi there, what a great video 🙂

    I once saw a website that showed my logo on their products for customization.
    Do you know how to make that, or what's it called?


Leave a Reply

Your email address will not be published. Required fields are marked *