Pull data from your ActiveCampaign:
Container Download https://measureschool.com/wp-content/uploads/2018/09/Personalization.json
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?
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.
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.
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.