How to personalize your Website Using Google Tag Manager

Personalizing your website may help improve your customer experience since you can control what you hide or show on your website to cater your user’s needs. In this video, I will share some techniques on how to setup personalization using Google Tag Manager, JavaScript and CSS

#Personalization
#GoogleTagManager
#measure

? Links:

Pull data from your ActiveCampaign:
Container Download https://measureschool.com/wp-content/uploads/2018/09/Personalization.json

? Learn more from Measureschool: https://measureschool.com/products

?Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

? Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

? Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

? FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

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!

SHOW MORE...

2
Leave a Comment

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Preston TaylorMichael Eugene Romero Recent comment authors
newest oldest most voted
Michael Eugene Romero
Guest
Michael Eugene Romero

so it will only works if the user is log in to your website?

Preston Taylor
Guest
Preston Taylor

@TechMarketerIO:disqus – Is it possible to do this based upon REFER SOURCE = Facebook. If facebook user clicks through on advertisement, you could change out the leaderboard banner above your products to call out a specific sales event?