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!