Auto-Event Tracking with Google Tag Manager – Lesson 6 GTM for Beginners

In our previous lessons, you have learned how to utilize GTM to deploy tags on page loads. And today, we are going to discuss the power of GTM that detects actuals user interactions then fire our tags. In Google Tag Manager this is called Auto-Event tracking.

In this video, we will discover how it works by creating a trigger to fire a tag during a button click.

🔗 Links:

Take the Quiz: https://measureschool.com/lesson6

Introduction To Google Tag Manager 2019 | Lesson 1 (GTM for Beginners) https://www.youtube.com/watch?v=WPEdkc_feNM&feature=youtu.be

How to Install Google Tag Manager (2019) | Lesson 2 (GTM for Beginners) https://www.youtube.com/watch?v=0ty8Z8fjgvQ

Analytics Audit and Tag Planning | Lesson 3 (GTM for Beginners) https://www.youtube.com/watch?v=uZkhtCg8OYc

Google Analytics Tracking Migration with GTM | Lesson 4 (GTM for Beginners) https://www.youtube.com/watch?v=FVNd2MnT9QU

Conversion Tracking Installation with GTM Lesson 5 (GTM for Beginners) https://www.youtube.com/watch?v=TBGEEoeRNFQ

MORE AUTO-EVENT TRIGGER VIDEOS:

Form Tracking: https://www.youtube.com/watch?v=PZA-5Nav0Bo

YouTube Tracking: https://www.youtube.com/watch?v=-_sbCHBVjzA

Scroll Tracking: https://www.youtube.com/watch?v=mcQdCl-B3lw

Element Visibility Tracking: https://www.youtube.com/watch?v=faBNebOHxsU

Link Tracking: https://www.youtube.com/watch?v=tc1Ydy612_Q

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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 lesson, we’re going to talk about how you can deploy tags upon interactions such as button clicks with the help of Google Tag Manager. All and more, coming up.

Hello there. Welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And in our last lessons, we have learned how we can utilize Google Tag Manager to deploy tags on the page load such as all the pages that we have on a page or just a specific page. But one thing that we haven’t talked about yet which is really a power of Google Tag Manager is the auto-event tracking feature. This feature let us pick up any interactions such as button clicks or form submit, or scrolls or YouTube plays on our website and then fire our tags. So we will not be just restricting ourselves to certain pages where we want to deploy our tags.

But actual interactions that the user takes on our website. How exciting. Speaking of exciting, there is a quiz that I prepared for you at measureschool.com/lesson6 where you can test your knowledge after this video. So pay close attention, we got lots to cover let’s dive in.

In the last lessons, we have fire our tags on two particular triggers. This is the all pages trigger which is deploying these tags on all the pages. We have Google Tag Manager installed and we have created a specific trigger, which is our purchase trigger. And what happens within Google Tag Manager is that every time the page reloads. So if you go to a new page here, our trigger gets evaluated and Google Tag Manager decides whether to fire our tag or wait for the next time a page loads to evaluate your trigger again. So for example, here on this page view, we have our Facebook page with all pages trigger.

And if I click on it and scroll down, we can see here our all pages trigger evaluated to true. This is the little check mark here and our tag fired and deployed our tag. As opposed to this Facebook ads event on the purchase event. This didn’t fire because we specified a filter rule right here which states that the page URL needs to contain checkout order received, which is obviously not the case. Now, all of these triggers are the rules that determine whether your tags would fire or not. And they get evaluated on certain events. And these events are like checkpoints that you see here on the left side. Every time we reload the page three events get sent by default, which is the page view, the DOM ready, and the window loaded. And right now we are evaluating on the page view event. This means at this event at this point in time, our trigger gets evaluated and checked for certain conditions. Now, what we want to do in this lesson is actually trigger a tag upon a button click, for example, this. But when this button click happens, we don’t actually have anything inside where we can check upon this event whether our condition turn true. So we need to somehow let Google Tag Manager know that there is a click that happened. And this is what we’re going to use auto-event triggers for. Let’s take a look at how they work. So when we deploy Google Tag Manager and our trigger, then our trigger determines whether we should fire our tag and deploy the code that sends information for example, to a tool like Google Analytics. With the auto-event trigger, we actually deploy two functionalities. One is the listener functionality to pick up the interaction and then the filter functionality to determine whether we should turn our trigger true and fire our tag and deploy the code. So how does that work? If you have a page where you have Google Tag Manager installed, then we can already determine when the user changes the page.

There’s more going on on a page for example clicks. Now if you want to pick up these clicks and forward them on to our tool like Google Analytics, we need to deploy our auto event tracking, which means we install a listener functionality through the trigger and listen to all the clicks that are happening on the website. And these get forwarded on to the filter which then determines Okay, only this click something we want to evaluate. And if it’s true, we want to find our tag like a Google Analytics event tag. So let’s install this with Google Tag Manager. So back at our demo shop, we have here a button that we want to track. The click on the Add to Cart button is the interaction that we want to pick up with Google Tag Manager. The first thing that we need to do is to deploy our listener functionality through our trigger. So let’s go up to Google Tag Manager here and click on triggers and build a new click trigger. Just going to call this click and as configuration, we can choose our trigger type here. And we have many different interactions that we can choose from. But we are interested in particular in the click interaction and we’re going to choose all elements. Now if you adjust a link you could also choose this but. Since we are trying to track a button here we go with all elements and in order to see how its functions we will not put our filter conditions in here just yet. We’ll just go ahead and go with all clicks and save this for now. Let’s refresh and go back to our page. Let’s refresh that.

And now you will see every time you click on the page you will see a new event happening in our preview and debug mode. Here’s a GTM, here’s a GTM click, there’s a GTM click, there’s a GTM click with many GTM clicks now in our preview and debug mode. Now what we would need to do is evaluate our filter condition upon this GTM click, and this is where variables coming. Now variables are little placeholders that get filled every time a new event happens here. We have the page path the page URL the page hostname, but these don’t really change. Since we are still on the same URL, we are still on the same path and the hostname. We would need to have some kind of variable that actually reacts on click, and they are some built-in ones that we can activate. Let’s go over to Google Tag Manager and here under variables we have our built in variables and we can configure new ones. And here are different variables that we can activate and specific ones for our click trigger. So I’m just going to go ahead and activate all of these click triggers and one cell activated, you can hit refresh here, go back to our page, reload page.

Let’s go to a product page and again if I click anywhere we see that GTM click happens. We can click on this title here we could

Click on the Add to Cart button. Now earlier, we noticed that when we click the Add to Cart button the page reloads. And this is something we don’t want to happen, since we want to look at these GTM clicks. So I’m going to click on this with the Command key press or the control key pressed on Windows, and this will open this in a new tab. Sometimes this method doesn’t work. You could also press the Escape key or use an extension in order to stop the browser from redirecting you on. Now as you can see here now, we have different GTM clicks and we can look at the variables to see how our click variables get filled. So here we have to click classes. Apparently, I clicked on a bad come. Here I clicked on the side header and the text of this header was right here.

We can also see here a click text sometimes because when I clicked on the headline and sometimes an ID or other information is present. What we need to do right now is to figure out how our desire click, in this case, it was the ninth click here, differs from all the other clicks that are happening on the website itself. And we do this by looking at the variables itself and figure out what is really unique about my ninth click. So in my case, I can look at the click text and it says Add To Cart. If I go to the other click see this changes all the time. So the attribute that is very unique about this button is the click text. So we can use this attribute to filter down on our interactions on our clicks that are happening on the page. This is the time now where we can go into our trigger that we have prepared and turn it into a specific one that only fires on Add To Cart clicks. So let’s go back into the configuration and then this time we want to trigger and fire our tags upon only some clicks where the click text equals Add To Cart. Let’s save this.

And in order to see what’s happening, we actually need to attach the trigger to a tag. So I’m going to go over to tags here and build a new Google Analytics event tag. We’re gonna click tag configurations and choose my Google Universal Analytics tag template.

And this time, we want to not fire a page view but rather any event into Google Analytics. So we can pick that up later on. Now, event tracking has certain parameters, the category action and label you could also fill the value but it’s not really necessary. And this is just a classification on how you want to see the data later on in Google Analytics. So for me, I’m going to go with a category called click and the action add to cart and then the label I’m actually interested on which page this happens. So I’m going to go ahead and fill this out dynamically with my page path. So this will be automatically replaced when the user clicks on the Add to Cart button with the URL that he’s currently on. Then I’m going to choose my Google Analytics settings variable which we had set up previously. And attach my trigger that we have just set up. So let’s add this and save.

Let’s refresh our preview and debug mode. Go back to our page. Reload that and let’s try this out again. I’m going to click on the title. Let’s see if something happens. Nothing happens on this event. Let’s click on this box here. Nothing happens either. But now I’m going to click on Add to Cart button with the Command key pressed and we should see on our seventh click we have a tag that fired. This is our Google Analytics event Add To Cart click. Again a little bit of a Q&A here we have Google Analytics firing. And if you click on it, you see events that fired. This is our click Add to cart and label and so on. Now, if you wanted to see this information, later on, you can go into your Google Analytics. Here we go.

And we can go into the real-time reporting under events to see what events have entered the account. And here we see our event category, click and add to cart. We also would see if you click through that this happened on the event label product happy Ninja, which is the page path that I’m on right now. Now, the real-time reporting is not really looking at long term data. If you wanted to analyze this, later on, you can go under the behavior report. And here under events, you would see all the events that fired into your account and analyze them. Now there are none in here right now because it usually takes a little while to enter all the data into these reports. But this is where you would find your event data. So now we have successfully built our first auto-event trigger. Let’s also for completion sake put us into our Events tab here in our tag plan.

We have already something prepared here button click, Add to Cart. And this fires an event Google Analytics and let’s put in a tick box here. This is also active. Now that we have already created the trigger. We can obviously reuse this. For example, let’s fire any event to Facebook advertising so we can do remarketing and build a custom audience. All we would need to do is in Google Tag Manager go over to our tags and create a new tag. This would be to Facebook ads it’s going to be a custom event that is upon Add To Cart click.

As the configurations which was again custom HTML. What is the custom HTML that we would use? Let’s go over to our facebook pixel and look at the configurations. Set up a new event here we go and we can go with eCommerce and retail. They have certain events here. The add to cart event is what we want to send on so this would be the code that we would need.

Going to copy this go over to Google Tag Manager and enter our code right here. So this is the Facebook track event. You know that we have already sent our library so the big code in another tag so that’s something we’re not going to set up again and now we’re gonna just use our already configured click Add to Cart trigger to fire our Facebook ads event. Let’s refresh, go back to our page add to cart with the Command key pressed. We see now there’s another facebook pixel helper that we have our Add To Cart event that we just fired. And in the facebook pixel helper, you should also see our test events here. Well, let’s do this again since we haven’t had it open.

Now we see our Add To Cart event just fired with our desire code. And the page URL is also sent over. So this is how you can set up your auto-event trigger with the help of Google Tag Manager and send an event to Google Analytics, Facebook Ads or even Google Ads. Don’t forget at the end if you want to take this live to all your users, you will need to submit a version and deploy this on your website.

All right, so there you have it. This is how you can track button clicks with the help of Google Tag Manager. Obviously, there are other interactions like form submit, scrolls, or the element visibility trigger, a very cool trigger that you should check out. I have some videos linked up down below from our channel we explained those in detail. Now even more exciting thing is did you understand everything? Well, check your knowledge at measurechool.com/lesson6. We have a little bit of a quiz prepared for you so you can see if you understood everything. And I hope to see you in the next lesson which we’re gonna have linked up up here if it’s already there. And if you haven’t yet, then also consider subscribing right over there because we bring you new videos just like this one every week. Now, my name is Julian. Till next time.

SHOW MORE...

Conversion Tracking Installation with GTM Lesson 5 (GTM for Beginners)

After installing GTM correctly and migrated our existing tracking with the help of our tag plan, it is now time to track our conversions.

In this 5th lesson of our GTM for beginners series, let’s learn how we can measure the success of our site by installing conversion tracking. This is a step by step guide on the proper installation and configuration of the Facebook Conversion Pixel and Google Ads pixel.

🔗 Links:

Take the Quiz: https://measureschool.com/lesson5

Introduction To Google Tag Manager 2019 | Lesson 1 (GTM for Beginners) https://www.youtube.com/watch?v=WPEdkc_feNM&feature=youtu.be

How to Install Google Tag Manager (2019) | Lesson 2 (GTM for Beginners) https://www.youtube.com/watch?v=0ty8Z8fjgvQ

Analytics Audit and Tag Planning | Lesson 3 (GTM for Beginners) https://www.youtube.com/watch?v=uZkhtCg8OYc

Google Analytics Tracking Migration with GTM | Lesson 4 (GTM for Beginners) https://www.youtube.com/watch?v=FVNd2MnT9QU

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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 fifth lesson of our GTM for beginner series, we’re going to find out how we can install conversion tracking with the help of Google Tag Manager. All and more, coming up.

Hello there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian, and we are on our fifth lesson of our GTM for beginner series. Now in the last lessons, we have already installed Google Tag Manager, plan out our migration and then migrated all our existing tracking over to Google Tag Manager. So we now have data flowing into our account. And this is already great data because we know where the user is coming from and what he’s doing on our website. The crucial part that is actually still missing is did the user take the action that we want him to take and this is commonly referred to as conversion tracking. This is very important data that we need to forward on to our paid traffic sources, for example, Google Ads or Facebook Ads because we want these tools to know if the user, the user that they sent us actually converted. And that way we can find out how effective were our ads so did the traffic that these platforms actually sent us turned into paying customers, for example. Now, in order to do conversion tracking, you actually need to install a tracking code on a specific website, or when the user actually does the conversion action. And with Google Tag Manager, we can do this pretty easily. But before we learn all about this, if you want to test your knowledge right after this video, then head over to measureschool.com/lesson5 we have a little bit of a quiz prepared for you. So pay close attention because we got lots to cover so let’s dive in.

In this, as we want to install conversion tracking on this demo shop. But first of all, what our conversions? They are simply how we define success on our website. What is the interaction we want our users to take? So in order to install conversion tracking, we need to pick one interaction that we would define as conversion. For an e-commerce shop, this is pretty easy because we want the user to actually buy products. So let’s see what a conversion would look like. Let’s conduct a test conversion. I’m going to put something into my cart and simply go through the checkout process.

And once I place the order, I have taken the action that we want our users to take. And I get to this page, the auto received page or the thank you page, which only people can get to that actually went through the checkout and purchase the product. So this is the action that we want our users to take. How would we measure this? The interaction that we can easily measure is a page load or a page view. And the page view can take as a measurement is if the user has actually reached this thank you page.

This is interaction we can pick up with Google Tag Manager and then send it on to our tools. Conversion Tracking works differently in different tools. So for example, for Facebook, we need to install a certain pixel. For Google ads, we would need to define a conversion here under our conversion report. And in Google Analytics, it’s actually a little bit more diverse. You can configure a destination goal, an event code or e-commerce tracking, which is specialized for eCommerce shops. But this is a bit more complicated and we have some tutorials on this channel if you want to set us up for your store. We won’t be doing this in this lesson. Let’s concentrate on Facebook and Google Ads for now. So for Facebook Ads, we can go up to the pixel setup here and we have done this in our previous lesson. I’m going to install a facebook pixel manually which will give us some HTML code we have installed this last time. Then on the next section here we can actually install and track events.

And these are specialized interactions that we can send over. One of these interactions is the purchase event. And if you read closely through the documentation here you will get all the information that we need in order to send this over. I’m not going to send over any kind of event parameters for now just to keep it simple. And we’re just going to send over the signal that a purchase has happened on our store. What we will need to do is deploy this kind of code on our page. Before we get started let’s document this in our tag plan here so we’re going to deploy a Facebook conversion pixel.

Description is purchase event and as the notes, I’m going to put in the page that we actually are deploying this on which is the page right here.And then we can also put in a new tick box once we activate this. With that information present, let’s go ahead and install this in Google Tag Manager. Now in Google Tag Manager itself, if we look at our already deployed tags, we see that they all are firing on the all pages trigger, which is a built-in trigger that deploys our tracking codes on every page where Google Tag Manager is installed. Now obviously you don’t want to deploy this conversion action on every page. We want to deploy it only on this order receipt page because then the user has taken the action that we wanted him to take. So let’s first work on our trigger and we’re going to build a special trigger for this that only fires on our thank you page. Let’s go over to triggers and then new and under the trigger configuration, we can choose when our trigger or rule should be evaluated. So every time the page view happens, every time a click happens, and many other events that we are good to in later lessons. For now, we already said that when the user lands on the page when the page actually loads, we want to evaluate whether the users actually on the thank you page. And that’s why we’re going to choose the page view trigger type. And this will determine when the trigger is actually evaluated. So here’s the page view event. But we want to not deploy this on all page views but only on some. And this will give us the chance to further restrict or define our trigger to only fire on certain circumstances. So underneath here, we have some rules that we can define. First of all, we will need to choose a variable and right here we have the page hostname, page path, page URL, referral present in order for us to evaluate against. You don’t need to understand everything about them. But right now the page URL is when we want to determine if the user is actually on this page. So we can build a rule that if the page URL contains and there are other matching options, some go more detail, and you can get more specialized with it. But contains will do for now. If the URL contains, let’s look at the URL, checkout/order received, for example, if that’s the case, then I want to deploy my tag.

Now, why didn’t I use, for example, the equals option or another option right here or copy this whole URL? Well, there are some dynamic values in this URL. So for example, this changes every time we have a new order, this is the order number that actually comes up. So we would need to possibly go through more test conversions in order to find this out. But check out received or order received is a pretty unique part of the URL. And the user would actually not be able to get here through a random link on the website. He would need to go to the checkout and convert in order for him to get to this order, receive page. So it’s pretty unique and this is what we going to use for our trigger. Let’s give this all a name this fires on the page view event. And once we get to our purchase section. Let’s save this.

And we have now defined our trigger when we want to deploy our tag. Now we get to the actual tracking code that we want to deploy. And we go over to the text on the facebook pixel. We have seen this little tracking code right here. It actually works in combination with the tracking code that we have deployed last time. So right here we have our Facebook tracking code. And only if this upper part is deployed, we will be able to deploy our code right here. Since we always do this on all the pages is the old pages trigger, we can say that we wouldn’t need to repeat ourselves in the next tag. But what we want to make sure is that this fires actually before our tag fires. There are different methods of doing this and an easy way is to use a tag priority option which would give priority to this tag, the higher the number is. So if you put in 100 here, for example, then this tag would fire earlier than all the other tags that have a lower priority. So I’m going to implement this for our tag and update this. Let’s save this. And now build our new tag, which doesn’t have a tag template available. So there is no tag template right here. But we can utilize custom HTML tag where we can enter our little code that we have copied here.

Whoops. So here we go. We don’t have to put a tag priority this time into this field as it’s when it’s empty, lower than the other tag priorities that have a number in them. So this will fire after our initial Facebook ads code and we can now attach simply a trigger which is our page view purchase trigger. Now let’s give this all a name and save this. And now we can try it out by going into the preview mode. And once we are in it, we can go back to our page, reload that, and right now we are on the thank you page. So it’s expected for our code to fire.

So here we have our debug console and we see our Facebook Ads event, the purchase event fired just fine on this thank you page. Obviously, you should do multiple checks. Let’s do a little bit of Q&A and go into our facebook pixel helper. We see our purchase event fired right here. And in Facebook itself, it’s always important that your data is actually received. So when we go back to our facebook pixel right here, we can actually go to test events and this will put Facebook into this listening mode. And if we go back to our page and just reload this, our Facebook ads purchase event will fire again. And we see here that we now have a new purchase code that was sent over just now. So this seems to work just fine and our conversions are now tracked and properly installed with the Facebook Ads. The heavy lifting , in this case,is simply to build the right trigger in order to fire this on the thank you page. And since we have done this now and we have this trigger available, we can actually reuse it. That’s a big advantage of Google Tag Manager to stay flexible and deploy also our Google Ads conversion tracking. And we have another video on this but it basically works the same, you have a purchase pixel once we have configured everything you’ll be able to get the configuration data right here and be able to implement it into your Google Tag Manager account. I’m just gonna for completion sake also make this available in our tag plan with this configuration, and let’s also put this on to a new checkbox. And now we going to use this data to simply build our new tag. This time, Google obviously has a template available. Here’s a Google Ads conversion tracking template where we simply need to put our conversion ID in. That’s something we have saved here and our conversion label. The other fields we can live on touch for now. And we simply reuse our trigger that we have built before for our purchase tracking. Let’s gives this all a name.

And try this out by refreshing our preview and debug mode, and refreshing our page. And again, we can now see that our Google Ads conversion purchase pixel has also fired on this thank you page. Obviously, we should also look into our other tools. We have the tag assistant here that shows us that Google Ads tracking works. And you should also be able to see incoming data in your Google Ads account,. Although you wouldn’t need to go through an actual Google ad in order for it to show up in the conversions right here.

So I won’t to this for now but it shows the case that we can really utilize our firing trigger over and over again, if we had a new tool that we want to connect to this conversion. Now, as always, if you have tested this thoroughly, our conversion tags are firing correctly on this page. If you go to another page they actually, hopefully not firing. Yes, that’s the case. So these are not firing because the conditions of our trigger, which we can see by choosing event, and clicking on them right here, we see that our page URL does not contain other received. And therefore this whole trigger failed. And our tag is not deployed which we want. Only if you go through the checkout and get to the order receipt page, our conversion tracking fires correctly. So once you’re sure and done your Q&A, we are ready to deploy our tracking. Let’s click on the submit button and give this all a name.

And then we are ready to publish a new version to all our users. And it’s now deployed on our website. So this is how you can deploy conversion tracking with the help of Google Tag Manager.

All right, so there you have it. This is how you can do conversion tracking with the help of Google Tag Manager and forward this on to your paid traffic sources, but also Google Analytics if you wanted to. We have more tutorials on this channel where you can find out how to send different conversion data to different tools, but also how to install conversion tracking if your case is not an online shop, like we have it right here. But as always, if you want to test your knowledge right after this video, then head over to measureschool.com/lesson5 where we have a little bit of a quiz prepared for you to see if you understood everything or if you have any knowledge gaps and need to recap or go back in this video to understand it. And if you want to follow along with the next lesson, then be sure to subscribe to our channel right over there. Because we’re bringing new videos just like this one. We have maybe the next tutorial already linked up up there so you know where to go afterwards. Now as always, my name is Julian. Till next time

SHOW MORE...

How to Track Contact Form 7 with Google Tag Manager

In today’s video, let’s go through the steps on how you can correctly connect Contact Form 7 to GTM so we can successfully track form submissions. We will create triggers and variables to forward the appropriate information to Facebook Pixel, Google Ads and Google Analytics. To make it work, I have created and will share with you a Javascript code that you need to install inside the listener functionality in GTM.

🔗 Links:

Contact Form 7 Documentation: https://contactform7.com/dom-events/

JavaScript Listener: https://gist.github.com/measureschool/ae71aa19c9b2abac16b26d44a7c545bc

Full GTM Container Download: https://measureschool.com/wp-content/uploads/2019/02/ContactForm7.json

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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 connect a Contact Form 7 to Google Tag Manager so you can successfully track a form submission and forward this on to your Facebook Pixel, Google Analytics, or Google Ads. All and more, coming up.

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And on this channel, we do marketing tech tips, tutorials, and tips and tricks just like this one. So if you haven’t yet, consider subscribing. Today, I want to talk about how you can connect a Contact Form 7 to Google Tag Manager. And then we can track our form submissions, and also the different form fields that go into that and forward this all on to our Facebook Pixel to Google Analytics or to Google Ads. Now, we got lots to cover so let’s dive in.

So here we have a contact form 7 on our demo shop here. And this is a standard contact form 7 that I’ve installed onto this WordPress blog. So if you do the same, it would look maybe something like this. Or completely different depending on how you set up your form. And this is a standard form. So you can fill it out here with some test data and send it off. I have a field here, what are you interested in, this will become important later. Let’s send this off. And we get our little message down here that this message was received and sent on. Now, this is where a lot of form tracking methods trip up because it actually doesn’t redirect the user on to a thank you page. But just gives us this message down here, especially for contact form 7. There’s actually something that the plugin does by itself. And this is in mid DOM events. What our DOM events? These are events that are emitted in the JavaScript runtime environment.

So there are events emitted such as the WP CF 7 invalid if the AJAX form completion has not been completed successfully. And some other events. What we’re interested in is the submitted event that actually fires when the form submission has completed successfully. And in order to listen to such events, we need a little bit of JavaScript. They describe this down here. Now, we can try this all out by just copying these lines of code, going over to our Contact Form seven, opening up the developer tools, which you can do on the more tools. And here are the developer tools. And then when we go to the console, it will give us access to the JavaScript runtime environment. And here, we can enter our code. And when the event is submitted, we’ll be able to fire something called alert fire. You will see in a second, but this is all about, I will enter another line of code, the console log to see what event details are transferred over into JavaScript that’s presented here. And this is now listening for the event. So let’s go ahead and send off another contact form submit and send this off. And here we now see the alert. So this is already working. This is a JavaScript alert fire, OK. And now, it should also have push something into the console here. And here, we see a custom event was fired. And we have all kinds of event details. I want to show you that we actually have data about the contact form itself in this detail object here. And we have data about the contact form ID, so the ID that our Contact Form holds. And then also about the input fields and how they were filled out.

So we have information about the name, we have information about the subject. And also information about this last point here, what the user has filled out, what are you interested in product. And that can be found here as well. This is really useful because we can pull this all into Google Tag Manager later on if we choose it. So just with this little JavaScript here, we can do already a lot. And in order to make this work with Google Tag Manager, we just need to install this little JavaScript inside of a listener functionality. I have already prepared this here, here’s a contact form 7 event listener. And I will have this code that I’ve written here, linked up down below. And here, we can see that this is the same code more or less, we are listening to the form Submit. And then we actually pushing something into the data layer. And this is how we communicate with Google Tag Manager. So from JavaScript to Google Tag Manager, we push data into the data layer in order for us to be able to get the form ID, but also the field inputs into the data layer, and then fill our tags later on.

Now, this part just listens to the contact form and pushes data into the data layer if the right event happens. So we can deploy this on all pages, no problem. Or you could also narrow this down to only the pages where you have a contact form installed. So let’s try this out. Let’s go into our preview and debug mode. And let’s go over to our Contact Form reload that. Let’s close the developer tools here. And we get all familiar Google Tag Manager debug console. And we have our event listener deployed. Now let’s go ahead and fill out a test again, send this off. And you might have seen in the debug console that we now have a form submit right here in our Google Tag Manager debug console. When we click on that, we can actually look at the data layer and see what information has been transferred. And we have the event, form submit, we have our form ID, and we have our different fields that were submitted as well. So this is really useful if you want to pull out and put this into a tag. Now, how do you build a tag deployment out of this? Since this pushes data into the data layer, we, first of all, would need to build a trigger of that every time a form submit happens in the data layer. So let’s go ahead in Google Tag Manager and go into our triggers, and then build a custom trigger for our form submit.

We’ll choose our custom event, as the event is custom to our data layer. And we’ll put in our form Submit. And that’s already it, we can now click on Save, and have built a trigger based on the successful form Submit. Now let’s build some variables. Because we want to pull out some data here, for example, the form ID or the fields menu 597 with the product name here with the interest of the user, what are you interested in. So we can use that in our tag deployment as well. Let’s go over to Google Tag Manager and build new variables. And these are data layer variables. So a data layer variable for our form ID, and we simply need to use data layer variable here and right, the right key in here, in this case, it would be form ID, all right. And let’s also build a data layer variable for our interest here.

And in this case, it’s a bit tricky because we need to actually get into this fields array, and then choose the right number here, in order to pull out the right value in our case would be 012345 starts at zero. So the last number of this array is the number five. And then we want to get to the value of this data layer of this object. So we’ll get to the product. Let’s try this out. First of all, we want to get fields, and then a dot, the number five and the value. Let’s save this and refresh, just so we can see how everything is filled.

Let’s try this out. And this time, I’m going to use service here. Let’s send this off. We get our form submit in the data layer. And in the variables we should now see our dlv form interest is service. So this was correctly changed. And then our form ID is the form ID of our form that was submitted. Now that we have the data that we want to transfer over to our tags available. Let’s build some tags.

First of all, let’s start out building a Google Analytics tag. In this case, it would be useful to use a Google Analytics event tag for form Submit. And we’ll choose Universal Analytics. And as a track type we’ll choose event. And here we’re gonna type in our category in our case would be always the same. And let’s transfer over the actual contact form ID. I’m going to fill this out with our variable as well. And then as the label, let’s put in the interest. So we have that available as well. So that should be filled out dynamically based on what the user has entered. Now, you might be asking, why isn’t he sending over the other details, for example, the name or the email that’s actually considered personal identifiable information. And it’s prohibited by the terms of service of Google Analytics to be sent over. So don’t make the mistake of sending any kind of personal identifiable information over. With our interests, that is fine. So we would be able to know how many people have first of all submitted the form but then also be able to segment or to filter down on the specific interests that the user have. The other day can be left the same. If you have a settings variable, you can utilize that here. If you don’t have a settings variable, you can enter your tracking ID, let’s see, here’s the tracking ID, put it in here. And then as a trigger will choose our contact custom form submit trigger. Let’s save this and refresh. And let’s try this out again.

This time I choose consultation. Let’s send this off. We see our form submit happened, our Google Analytics event form submit happened. And in our Google Analytics, real-time reporting, we should see a new event. Yes, they’re just an new event that happened a form submit of the form ID 771. And if you click on that you see the interest was consultation. So everything is working from this part. And we could go ahead and deploy this to allow users, I want to show you how you can also connect the same data to a Facebook event. So here I have a Facebook event form submission. If I click on it, you can enter something like this, this will check a form submit an event called form submit, and then we can enter the interest. And again here we can utilize our variable with the two curly brackets and choose dlv form nterest in the drop down menu. And this will then be transferred over to Facebook that’s attached to the right trigger and save this.

And the same is true for a Google Ads conversion tag that you might want to fire upon this form Submit. And here I have a conversion ID from my account the conversion label from my account. And I simply want to fire this on our custom form submit. Let’s save this and try out these new events. So let’s fill this out again. And I’m going to service, send this off.

We have a form submit here we see our Facebook event five or Google Ads event fired and our Google Analytics event fired. You can also see that in our tag assistant, we have our Google Ads conversion tracking that fired and our Google Analytics event hit. Then we have our facebook pixel as well. A form submit was transferred with a custom parameter interest of service. And so you could for example, retarget or build an audience of users who have chosen service in your form and send that off. Don’t forget at the end, this is not yet live. It’s just happening in your browser. You still need to submit this as a version so it goes live to all your users.

All right, so there you have it. This is how you can connect your contact from seven to Google Tag Manager and then forward this on to the tags that you choose. If you found this interesting, then please give us a thumbs up and if you have any more questions, leave them in the comments down below. And if you haven’t yet, consider subscribing right over there. And I’ll see you in the next one. My name is Julian. Till next time.

SHOW MORE...

Google Analytics Tracking Migration with GTM | Lesson 4 (GTM for Beginners)

In lesson 4 of our GTM for beginners series, let’s go through the whole process of migrating your existing tracking to GTM. We will make use of the tag plan we have created on our previous lesson to guide us in every step and maintain data quality towards a successful tag deployment.

Test your knowledge https://measureschool.com/lesson4

🔗 Links:

Tag Plan https://docs.google.com/spreadsheets/d/1ns8u4OqLXc2UPc7FXOC3PKhUSVxd11VF0JrzO5IZJ94/copy

Introduction To Google Tag Manager 2019 | Lesson 1 (GTM for Beginners) https://www.youtube.com/watch?v=WPEdkc_feNM&feature=youtu.be

How to Install Google Tag Manager (2019) | Lesson 2 (GTM for Beginners)
https://www.youtube.com/watch?v=0ty8Z8fjgvQ

Analytics Audit and Tag Planning | Lesson 3 (GTM for Beginners)
https://www.youtube.com/watch?v=uZkhtCg8OYc&t=5s

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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 lesson, we’re going to learn how we can migrate over our existing tracking over to Google Tag Manager and henceforth deploy everything through GTM. All and more.

Hello there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And in our fourth lesson of our GTM for beginner series, we are actually going to get into implementing our tags with GTM. So we’re going to use the tag plan that we have prepared last lesson and going to put this into action, actually go through the whole migration process of taking our tags that are installed currently and putting them into GTM and making sure that everything works correctly. Now, we got lots to cover but if you want to test your knowledge after this video then head over to measureschool.com/lesson4 and I have a little bit of a quiz prepared for you there where you can test and see if you understood everything. For now ,we’ve got lots to cover. So let’s dive in.

Back in our Google Tag Manager account, we have a clear new installation of Google Tag Manager installed on our website. We did this in the second lesson. And we have already set up a tag plan. So we have all the data available that we would like to now implement. Now, we have found out that we have Google Analytics installed. We also click through the website in order to see where it’s installed. And that is installed probably on all of our pages. So we have Google Tag Manager, we have Google Analytics here, Ads remarketing and the global side tag. We have written everything down and now we are ready to implement. So let’s go over to Google Tag Manager and click on tags here or new tag right here. And this will open up our tag screen. Now, all tags, triggers and variables in Google Tag Manager receive a name from us that we can freely choose. This is part of the management aspect of Google Tag Manager. Imagine you have multiple tags, multiple tools running on your website, you want to be able to identify them later. And that’s where a naming convention comes in. So how do you name a tag correctly? It depends on your preferences. I normally utilize a naming convention. It first of all, let’s me know what tool I’m dealing with. In our case it would be Google Analytics.

The purpose of said tag in this case, we are just doing simple page you tracking. And the scope of where I’m installing this so is this just for one user, for all the users, for one specific circumstance. In my case it would be on all pages so this is the scope I will use. Now, if I have multiple Google Analytics tags, I would be quickly able to figure out which tag I would need to change in order to change the general page view tracking. So with this name out of the way, you can also put this into a folder. I won’t go into this right now. But there is the ability to sort all your assets into folders within Google Tag Manager. And then we get to the tag configuration. For the tag configuration, you can just click on this big field here. And we’ll open up the tag type option. This is where you can see different tools that you can install via Google Tag Manager. Now, once you scroll down here, you might not find what you’re looking for. And this is totally fine because we later on have the ability to also utilize the custom HTML tag, which I’m going to show you in a second. But for Google Analytics, we have this option right here. And I would always use this option if it’s available as it will give you a template or little bit of a form. So if I click on here, you see that it gives me all these different configurations that I might would have had set up inside of the code. Now, I don’t need to know coding for this, I can just fill out this form. So it makes it easier if you choose a tag type if it’s available. And then it takes me already through the steps. I can here choose the track type. So what kind of interaction do I want to send over to Google Analytics? We have the ability to send events, transaction, social timing, decorate links, and so on. For now, we want to send a page view over and then we can choose a Google Analytics settings variable right here. Now, there is no variable set up right here. For now. I will ignore this point and just use the enable override settings. Now, this option is really where Google Analytics would like to know your configurations for this tag. And since we might be reusing this information over and over and certain other tags, which will do in later lessons, we can set up

a variable, a placeholder so we can reuse it again. So let’s do this right now. Let’s choose a new variable here and build a Google Analytics settings variable. Again, you can give a name to the settings variable. In my case, it would be my tracking ID that I would like to save in the settings variable. So I’m going to go over to my Google Analytics account here under tracking information, I have my tracking code. And you might know we can do this much faster by going just into our tracking tag plan and copying this from our notes. Let’s go over here. I’m going to put this in as a name so I know where it’s actually been sent. And then I’m going to utilize this as well in my tracking ID field right here. Once I have to set up I can save it and this will now be used inside of this Google Analytics settings variable field and we will be able to utilize this again and again in other tag settings as well. Now, there are tons of more settings that we can do to this tag.

But let’s keep it simple. This will actually deploy already, your page view tag with the help of Google Tag Manager. So we don’t have to care about any of the other settings. Let’s go into the trigger which we need to choose. Now, triggers are simple rules that determine when should we deploy this tag. We can set up triggers to deploy only on one given page, for example, our conversion page. But in our case, obviously, we want to deploy it on all pages because we have looked this up. And so we want to migrate our Google Analytics page view tracking. And for Google Analytics page view tracking it’s actually important that you deploy it on all pages, as Google Analytics will take that data and put it all together into sessions and users, so it needs to be deployed on all pages. We’re going to click on this triggering option and this will give us our menu of all the triggers that we have already saved. Now, I don’t have any trigger save just yet. We will do this in a later lesson. For now. We’ll just go with the all pages trigger right here.

This is something that is already pre-configured for us and it’s wildly used. So it’s an option that is available to us. Now, what does that mean? The all pages trigger actually determines where is Google Tag Manager installed, where’s our snippet and sold and every time our snippet is executed, or on a page, it will also deploy our pageview tag. If you don’t have the GTM snippet installed on a given page, no Google Tag Manager will be deployed at that time. So now we have configured our tag. We can save this obviously, and it will be put into our tags right here. So we have a nice overview of what tags we have installed in our Google Tag Manager account. But as we have discovered, this is not yet live on our website. To determine if it’s firing correctly, we can go into the preview mode right here.

And this will put our browser and only our browser into a special state. We will be able to go to our website, reload this website. And we get a little GTM debug console down here. And this gives us more information about what is happening on our page in terms of tracking and Google Tag Manager. So we see here we on a summary tab, and we can see our Google Analytics Universal Analytics fired one time. If we click on this tag, we can actually see all the different configurations that were done to it. And also the firing trigger. Now, firing triggers are always evaluated or looked upon if they turn true or false on a event. And these are the events that you see right here. So on the page view event and again, click on the tag in here we see that our trigger turn true and it’s firing on the first possible moment. This is like a waterfall diagram. First, the page view happens, then this message happens, then the DOM ready and then the window loaded. So our tag fired on this event called GTM JS which is the pageview event with these settings.

Now, we shouldn’t just take Google Tag Manager’s word for saying that our tag deployed correct. There are certain steps that you can take in order to ensure and check whether something has fired. First of all, we have our tag assistant. And our tag assistant shows us right here. Google Analytics is deployed, it shows it yellow. So we’re going to go in, and it gives us an error saying the same web property ID is track twice. So we are sending two page views over. This is expected behavior because as you might know, we already have a Google Analytics tag installed on our page. And this is hard coded. So we have down here, in the last lesson we looked at this, a Tag Manager code installed. Now on the live page, we would actually need to remove that later on. But let’s go through our testing and debugging even further. The ultimate test is to actually look if your data is received by your tool. In this case, it would be Google Analytics. So let’s go over to Google Analytics. There’s an easy way to do this, and this is the real-time reporting. In the real-time reporting under the overview, we can see the different pageviews that are happening right now on our page from real users. And we would like to know if our pageview counted as well.

Now, we could go in and just reload this page and generate a new pageview then go over to our analytics page and see whether we see any difference here. And there was a pageview with two page was actually at the same time tract, which hints at that this is our pageview tag as we are deploying two pageviews. Just a little trick that you could also use utilize is to attach something called UTM parameters to your URL. So for example, with a question mark and GTM source equals test press enter. The UTM source will be recognized by Google Analytics and we can go over in analytics to our Traffic Sources here. And now we should see a test pageview. No, we don’t see one. Maybe because we didn’t enter a correct you UTM source actually UTM parameters always need to have multiple parameters so the UTM source needs to be filled out, the UTM medium and the UTM campaign. Let’s test this. Reload. Wait a second and here we go we have a medium test and a source test. So this was definitely us. If we click on it, this would actually put a filter up here on our page and when we go to content here we can see where the user that is filter down to test actually is at the moment. In our case would be happy ninja. Now let’s follow along. Let’s go over two albums here and see if this updates correctly. Yes, we see an update that is working. So we have the pageview tracking code correctly installed.

This is important to notice in our real-time reporting and make sure our data is tracked correctly. Just for data quality sake, we want to get complete data and not broken data right? Okay. So with that in mind, we have installed Google Analytics with Google Tag Manager. We have tested if everything works with preview debug mode, with our extensions, and then also ultimately with the tool that receives the data, everything seems to work fine. Now, we can go to the last step and publish this to all our users. For that, we would go over to the submit button and enter a message so we would know what we have done in this version of what the change would be.

If you have done more changes, you could also leave that in the version description down here and then we can publish and create a version which will then set our Google Tag Manager code live to the website which would mean that now our Google Tag Manager code deploys our Google Analytics live on our website. Now, we are still in the preview and debug mode. But if we would leave this, we load our page. We don’t see the debug console down here anymore. But as we can see in our tag assistant, our Google Analytics code gets deployed. It still the deploys two times because we still have the hard coded version on our page. So in this instance, we would need to get rid of the hard-coded version. In our case, I’m running here on a WordPress blog, going to go into my WordPress settings. This might differ from your platform that you are using, I have it in the theme. So I’m going to edit my theme, my header php. And get rid of the implementation of my Google Analytics tag. This is this line of code that is implemented in the global side tag here. And I’m going to update this file. And now we can go back to our page, look at our tag assistant. And this time, it’s only firing once.

on the one pageview request and therefore, we are not doubling our pageview every time we send over a hit to Google Analytics. So now we have gone through the implementation process, tested in debug, deployed and also correctly migrated our code from the page source here into Google Tag Manager. So it’s only deploying once and not twice. That’s something you need to make sure if you have any hard-coded pixels on your page. Now, you might be saying stop, stop. We have some other codes here that we want to implement. Let’s do this a little bit faster this time and port them over. So first of all, we have Google Ads here with this remarketing code. So I’m going to go over to the tags and build a new tag for AdWords or Google ads and this will be a remarketing tag on all pages. We have a tag template available here as well Google remarketing. We need our conversion ID which we have saved right here.And let’s put this in here. We don’t need to change any other settings. As a trigger rule, we choose all pages again.And then we get to a new tag which is Facebook ads, which also collects page views on all pages.

Now, this time we don’t find a tag template here. And therefore we can utilize the custom HTML tag which lets us input any kind of HTML code that we would like to deploy. Now, we have our facebook Pixel right here but in our page source we actually can see

right here what code we would need to port over. You can also again, look this up in your Facebook Ads Manager. We did this in our third lesson. So I’m not going to repeat this right here. But this is the code that I would need to implement. Be aware that you need to have script tags around your JavaScript right here in order for it to work. This is what we want to deploy again on all pages. Let’s save this. Do a quick test in our preview and debug mode. We have our Facebook Ads firing, our Google Ads firing on all pages. Let’s go over to another page to test this again.

Yes, this works as planned. In our tag assistant, we have hopefully our remarketing tags deployed and in our Facebook Pixel helper we have our pageview that still firing. Now again, I would recommend to go to the tools and see if you can view if there’s data actually received by the tools itself. I’m going to skip this step and go ahead and publish a version. Let’s publish this. And it’s live on our website.

And we can go ahead again and remove any kind of hard-coded tags. In my case, again, inside of our demo shop which is running on WordPress, I would need to remove them from the HTML which I have implemented in the header php of my theme. So right here we have our facebook pixel and we have our global site tag. This time we can delete both of those right so two and update the file and when we go back, we still have our Google Analytics, our remarketing and now Google Tag Manager deployed. And we still have our facebook pixel deployed as well. And that’s because we have now deployed them through Google Tag Manager. Let’s leave our preview and debug mode here and everything is still firing.

Now, when we look into the page source, you should not be able to find our codes anymore as we have removed them. So there are no more quotes here. But still, the data is gathered by our systems as we have deployed them now through Google Tag Manager. So we have successfully migrated our existing codes from our tag plan into Google Tag Manager and deploy them to all our users.

All right, so there you have it. This is how you can migrate your existing tracking over to Google Tag Manager and then deploy it. We went through the whole tag migration process and if you want to test if you understood everything, then head over to measureschool.com/lesson4 where we have a little bit of a quiz prepared for you. And if you want to follow along with the next lesson where we’re going to install our conversion tracking, then maybe this video is already available, head over to this video over there. Or if it’s not, then definitely subscribe to our channel right over there. Because we bring you new videos just like this one every week. Now, my name is Julian, til next time.

SHOW MORE...

Analytics Audit and Tag Planning | Lesson 3 (GTM for Beginners)

In lesson 3 of our GTM for beginners series, we will be discussing how to effectively plan a migration to GTM. This is a very important stage to ensure data quality before the implementation in GTM. I will also share with you a tag plan that will help you and your team document all the tags and tracking that were used from your website.

🔗 Links:

Tag Plan https://docs.google.com/spreadsheets/d/1ns8u4OqLXc2UPc7FXOC3PKhUSVxd11VF0JrzO5IZJ94/copy

Introduction To Google Tag Manager 2019 | Lesson 1 (GTM for Beginners) https://www.youtube.com/watch?v=WPEdkc_feNM&feature=youtu.be

How to Install Google Tag Manager (2019) | Lesson 2 (GTM for Beginners)
https://www.youtube.com/watch?v=0ty8Z8fjgvQ

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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 lesson, we’re going to plan out our migration and set up a tag plan. All and more, coming up.

Hey there and welcome back to another video of measureschool.com teaching you the data-driven away of digital marketing. My name is Julian. And in this third lesson of our GTM for beginner series, we are going to go into the planning stages. This is very important before we implement anything with Google Tag Manager. We need to be aware of what we actually want to implement. And in this lesson, we’re going to plan out a migration of Google Tag Manager. So if we have any kind of data already gathering on our systems, we want to make sure that we document this in a tag plan. And then we’ll be ready to actually put it into place in Google Tag Manager that will ensure data quality, which is very important, and give us some documentation. So if we everyone need to explain or try to figure out what we have implemented in the first place, we can refer back to a document. And that’s where I came up with the tag plan, which I’m also gonna link up in the description down below. So if you want to check that out, you can download it and make a copy for yourself. But now we’ve got lots to cover so let’s dive in.

Welcome back to Google Tag Manager. Now, Google Tag Manager is a great tool to organize your tools and deploy new tags. But in most of the cases, you’re not actually working with a brand new website, but there are already tags installed on your website. And we would need to migrate them over to Google Tag Manager. The first step that we want to take in this lesson is planning out our implementation. So we would look at our website. What tracking do we have installed? What tracking would we need to transport over to Google Tag Manager? And generally document our journey so we’ll be able to decipher our tracking later on and where was it implemented. At this stage, I would encourage you to talk to anybody who is involved in the website that might have something to do with the tracking. It might be marketing people or developers who have installed the tracking code on your website. There might be already some kind of documentation of what was installed or sense of what tools I actually used that gather data on your website. Unfortunately, sometimes it’s the case that nothing was documented, nobody really knows what tracking codes are installed. And if the website is a little bit older, it might be that many codes are installed that are not used anymore.

Even though Google Tag Manager later on gives us an interface where we can see all the different codes, we may want to document them beforehand. So we don’t run into the same problem in a few years when we are trying to figure out our tracking again. So I encourage you to audit your tracking beforehand, what do you have installed, and then plan out your future implementation. And that’s why it’s very handy to come up with a tag plan. Now, this is something that you can do outside of Google Tag Manager, I do it here in a spreadsheet. But any format would really work. And this is a little template that I came up with where we will document our progress. And what we want to implement with Google Tag Manager later on. This document will be super helpful if anybody from your team asked you what tracking codes do we have installed, or future employees or freelancers that join to help you out with the website and ask you what the tracking configuration looks like. So here, we can enter all the tools, we will look at the different pages that we have that are relevant for tracking and any kind of event interaction tracking and audience tracking.

Now, we will do this on the example of our demo shop. Depending on your website, how big it is, how many people are involved, and the kind of tools who are running, this can be much more complex. I want to keep it simple here and just go through an example. So let’s say I have talked to my team, they told me they are using Google Analytics, Google Ads, and also the facebook pixel. So I have a little bit of a sense of what might be installed on the website. And the first hint if something is installed is actually looking into the page source. So we right click here on view page source. And this will give us our HTML that was downloaded. We have obviously our Google Tag Manager installed. And if we scroll down, we can look at all the different codes that might be installed here, especially in the head section of the website. And we see a global site tag here from Google Analytics. And we also see the facebook Pixel. So that gives us a hint of what is installed on this page. If you don’t want to really look through code, you can also install browser extensions that will help you with this. One of these extensions is the tag assistant by Google. I have it installed here and it will show us which tags are from Google. The marketing vendor install, we have Google Tag Manager obviously.

Additionally, we have the global side tag which deploys our Google Ads remarketing and Google Analytics tag. Facebook has a similar extension called the facebook Pixel Helper where we can see okay, this page, the page view is tracked with the facebook Pixel. But if you have different other marketing vendors, there might be extensions out there that are specialized to tell you what data is sent over from those tools. If you want to have a more general one, you can get the wasp Inspector, which will add functionality to your Chrome Developer Tools, which you can find under more tools, then here under developer tools. We see a new tab down here, which is wasp. And if we reload this page, it will give us a lot of information of what marketing tags were found, and where they actually coming from. Very helpful tool that I’ve been using for a while. And I definitely recommend it. With that information, we can go ahead and fill out our sheet here. So we have as a tool, Google Analytics and Google Ads. And we also are running the Facebook Pixel.

Now, these are all active and gathering data. You could go obviously into your tools and check whether they are still used. And give a little bit of a description for Google Analytics. We are doing basic page view tracking for Google Ads. We are actually doing remarketing with this tag. And the facebook Pixel is also remarketing and conversion tracking. Then you can put in some notes. I would encourage you if you want to be fast later and know where data is going to actually look up certain configurations. In our case for Google Analytics, we can log into our Google Analytics account and go to the right account and look into the configurations how it’s actually configured. So I’m going to go to my demo account here, look under the admin section, and then actually look up the tracking code that would need to be installed. And right here we have our tracking ID. This is the piece of information that I need later on for my tag deployment. I’m going to enter this into the notes. We also have our Google Ads. Let’s go over to our Google Ads account, here under Tools, we can go to conversions. And here we find our purchase tracking code that is installed.

Let’s click through and look at the tag set up. And here, we already find Google Tag Manager. And we would need to have the conversion ID. So let’s input that here. And we also have the Facebook pixel. Now again, we can go into our tool, Facebook, and look this up right here. It depends on your implementation what data you would need. In our case, it’s this ID here, which we also saw in our plugin. So here’s the facebook pixel ID, this is something I would need later on. Now, again, you can see how this might be useful if you have multiple codes running. And you want to figure out where to which account is what data sent and overall it just helps us with the documentation for later reference. So that is it. This is a pretty small implementation of these three tools. We don’t have any thing else installed on our little demo store here. So let’s think about of what additional information we want to track later on with Google Tag Manager. And this is important because we want to purposefully build in tracking on to our website. We don’t want to take the approach of just mindlessly deploying any kind of tracking, see what data we can get, and then forget about it. But rather purposefully built in the tracking gather data that we want and get insights from that. Otherwise, we face the problem of data overwhelm where we have a lot of data available, but don’t really know what to do with it. So let’s take a look at this website here and write down some pages that might be important for us. On a shop, we obviously have the homepage, the product pages, we have maybe the interaction of the add to cart click, we have the cart. And if you go further, we have actually the most important part of an online store, which is the thank you page or the order confirm page which is right here. This is a page that will become very important for our tracking later on. Because we want to use this as a conversion goal in our later tracking deployment. So I want to remember this page. And I’m going to do this by copying the URL here, it’s go over two pages. And the path that we had this is the exact path. We have a little bit of a description. And any kind of notes that we want to put in. This is our thank you page.

Again, you could do this much more extensive here and put in different other page templates or important pages that are relevant to your tracking later on. Now, let’s talk about some interaction, some events that we want to track later on. And this is really the power of Google Tag Manager. We will be able to track any kind of clicks or form submit on an online store, I would say an important interaction are button clicks here on the Add to Cart button, for example. So let’s put that into our tag plan. So we have that available later on and know what to do when we implement. Now, there’s another idea here the audiences if you wanted to build custom audiences, for example, with the facebook pixel, that’s also something you could define here in order to build that into your tracking. With this very limited and small tracking plan. We want to go into the next video and start migrating over our existing tracking into Google Tag Manager, and also build in our new tracking and send it on to our tools with the help of Google Tag Manager.

All right, so there you have it. This is how you can plan out your migration audit a little bit of your account and then put that into a tag plan. Now I know the examples that I’ve given a little bit simplified. Probably, if you have a bigger company, you probably have more pages that you need to go through and put this all in. But trust me, if you put it all into a tab plan beforehand, you don’t forget anything. And you don’t wake up with faulty data because something was forgotten or not re implemented into Google Tag Manager. With that in place. We are now ready to take this to the next step and actually implement tags with Google Tag Manager and get into the weeds of it. So join me for the next lesson. If you haven’t yet, consider subscribing to this channel right over there because the new lesson will obviously come out next week. Now, my name is Julian. See you on the next lesson.

SHOW MORE...

How to Install Google Tag Manager (2019) | Lesson 2 (GTM for Beginners)

In lesson 2 of our Google Tag Manager beginner series, let’s cover how to properly install GTM in your website with the most used CMS, WordPress. Get some tips and learn more about container snippets and where to correctly place them in your HTML codes so you’d be ready for your first tag deployment.

🔗 Links:

Lesson 1: https://www.youtube.com/watch?v=WPEdkc_feNM

Test your knowledge: https://measureschool.com/lesson2

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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 install Google Tag Manager correctly on your website. All and more coming up.

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And this is our second lesson of our beginner series of Google Tag Manager. If you haven’t seen our first lesson, then head back where we give you a little bit of an overview on Google Tag Manager. Link will be in the description below. In this lesson, I’m going to show you how you can install Google Tag Manager correctly. And like last time, we have a little bit of a quiz prepared for you after you’ve gone through this tutorial. You can test your knowledge at measureschool.com/lesson2. But for now, we got lots to cover. So let’s dive in.

All right, today, our journey starts at tagmanager.google.com. This is the page that you can go to login to your Google Tag Manager account. Now, you will need to have a Google account in order to use Google Tag Manager which means if you already have a Gmail account, or a YouTube account, or any account for the Google services, you most likely will be able to use it here as well. I have a demo account here already set up, you just enter your password. And then you are in, you can access Google Tag Manager. Now, most likely, if you are completely new to the system, you won’t see here anything. You will right away, go to this step. And this is where you start setting up your Google Tag Manager account. Now Google Tag Manager accounts are divided in the account level. And then the container level. You can have multiple accounts. And within that account, you can have multiple containers. Now, Containers are really the snippets or the central code that exists for your website. So best practice is to name your account after your company. So for example, Demo Inc. Choose your country, then you can choose whether you want to share data with Google. And if you click on continue, you go to the container setup. Now, the container is something that is unique for your website where you going to install Google Tag Manager. So I’d recommend to enter your website here, just the domain. Really doesn’t matter what you call the container so you can recognize it later on, I would recommend the URL here. And afterward, you can use the container in different instances. We will be installing Google Tag Manager on the web. There’s also a container available for iOS, Android, and AMP pages. But the setup of these is completely different to what we are doing here on the web. Check out our other tutorials if you want to learn more about these three other methods. We’ll go with web right here, and then create our Google Tag Manager account. We need to adhere to some TOS. And if you have read this all you can accept it, click yes here and your new Google Tag Manager account will be initiated.

Once you have gone through the process, we already greeted with our Google Tag Manager snippet. If you don’t see the snippet when you open up your Google Tag Manager account, you can always click on your Google Tag Manager ID up here. And it will open this window up as well. Now, this already gives us some installation instructions. We need to place this part of the code in the head section of our HTML and this part of the code in our body section of the HTML. Now, this will probably be the last snippet or piece of code that you will need to install onto your website and you will need to have some kind of greater access to the website itself in order to install this. There are different methods of installing this code. So let me talk you through the options.

First of all, if you have a developer working on your website who is responsible for the technical infrastructure of the website, I would consult with him in order to install those correctly. Secondly, if you have a CMS running a content management system such as WordPress, Shopify, Magento, Joomla, or any other backend system that actually generates your website, you might be able to install a plugin to install these codes via plugins. There are many out there. I would just encourage you to take your CMS system, for example, WordPress and then Google for Google Tag Manager installation on WordPress. And most likely there will be already a tutorial that will explain the right setup. We also have some tutorials on some of the content management systems here on this channel.

Thirdly, you can also install this manually on your website. If you have access to the code of your website and feel comfortable doing this then I’ll lead you through the steps right now. This is probably what you do developer would go through or what the plugin does in the background. As an example, I have a WordPress installation right here. WordPress is the most used content management system in the world. So if you are running a WordPress blog, you can follow along with these instructions. But if you’re not running WordPress on your website where you want to install Google Tag Manager, these instructions most likely will differ. Now, content management systems are normally governed by a theme which you can control the design of the website itself. Within WordPress, you can log into your back end system, then go to Appearance right here. And under editor, you can see your different themes that you have set up, but also have access to the theme files itself. Now, notice that I have set up a child theme here because I don’t want my changes that are due to the theme files right here effect when a new update comes up to the parent theme, which is storefront. So it’s a best practice to have a child theme if you’re working in WordPress. I have this already set up. I’m going to go over here. And then I have my theme header file that I can click on. This is a PHP file that governs all the different sites that are generated by WordPress on my front end.

And right here, I can see that there’s a head tag that is generating my HTML. And then here’s the closing head tag. And then we have here the opening body tag as well. Now, I can take my codes. First of all, the first code is in the head section itself. I’m going to copy this go over to my theme. And I want to place it as high up as possible into the HTML. This is important because the website itself will get passed from top to bottom by the browser. And we want to fire our tracking codes with Google Tag Manager as soon as possible so the likelihood of them firing is higher. So I’m going to place them directly under the opening head tag here. And then I’m going to grab my second code, go back to the theme files and look for the opening body tag which is right here. And right underneath and gonna paste my Google Tag Manager code. Now, I’m going to update this file and it should be written to my theme files. If this is not something that you can do in your WordPress theme, then you might need to directly access these files via FTP in order to change them. But now I should have Google Tag Manager installed. If I go over to my page, reload the page, I can click right click and then view page source. And I can see the HTML of my website of how its marked up. We have our Google Tag Manager code right at the beginning here. And if we scroll down with all the generated code by the CMS system, we should also find our no script part of Google Tag Manager, which is right under the opening body tag in our HTML as well.

So Google Tag Manager is correctly installed on this website. Now, we can go through all the different sites that we have on our website and look into the HTML, but it would be rather cumbersome. A better way of validating is simply to go into the preview and debug mode. So in Google Tag Manager, we can put our browser and only our browser into a special mode which will pop up a debug console down below. So I’m going to reload. And we see we have this popping up down here, nothing fires at the moment. But this way, we can go through the pages. And just make sure that this pops up down here in order for us to validate that Google Tag Manager is on all pages. And if you don’t see this tag manager console pop up, you most likely haven’t installed Google Tag Manager correctly on your website. So just make sure that this is visible on all the pages if you enter the preview mode inside of Google Tag Manager. So this seems to be working correctly. And we have installed Google Tag Manager and now ready to deploy our first tags. But before we do so, I would encourage you once you have set this up to actually submit the first version in Google Tag Manager in order to initialize GTM correctly.

Click on Publish. This will go live to all the users although we have zero tags triggers and variables installed just yet. So this is how you can install Google Tag Manager on your website. And now we are ready to deploy our first tag with Google Tag Manager.

All right, so there you have it. This is how you can install Google Tag Manager on your website. If you think you understood everything, then maybe test your knowledge at measureschool.com/lesson2 to where we have a little bit of a quiz prepared for you, for you to go through and test your knowledge and see if you understood everything. And if you want to follow along with our Google Tag Manager for beginners series, then why not subscribe to our channel right over there. Because we bring you a new lesson next week. Now, my name is Julian. See you on the next one.

SHOW MORE...

Introduction To Google Tag Manager 2019 | Lesson 1 (GTM for Beginners)

What is Google Tag Manager? In our Google Tag Manager for Beginners course, we are going to slowly introduce you to this powerful Tag Management tool. In this video, you are going to get a quick overview of the core functionalities as well as an understanding of what GTM is used for.

🔗 Links:

Test your knowledge: https://measureschool.com/lesson1

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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 give you a quick overview on the core functionalities of Google Tag Manager, why it’s such an awesome tool to use for your tracking deployment, and how you can utilize it to level up your analytics.All and more, coming up.

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. On this channel, we do marketing tech reviews, tutorials and tips and tricks videos around analytics and tracking. So if you haven’t yet, consider subscribing down below. Now it’s 2019. And I wanted to redo our very popular Google Tag Manager for beginners series. In this first lesson, we’re going to talk about the core functionalities. And I give you a quick overview of what Google Tag Manager is all about. If you want to test your knowledge at the end of this video, then I have a quiz prepared for you. You can head over to measureschool.com/lesson1 and fill out this quiz. And I’m going to give you results later on in some more resources. But for now, we got lots to cover. So let’s dive in.

Welcome to Google Tag Manager. Now, before we dive into the interface and what you can do here, let’s first define the problem that Google Tag Manager helps us to solve. So let’s say you have a website where you want to extend the functionality via third-party tools, such as tracking tools like Google Analytics, or to advertising like on Facebook ads. Oftentimes, these tools ask you to install tracking code onto your page. And these tracking codes look a little bit like this. These are JavaScript code, and also oftentimes referred to in marketing terms as marketing tags. And you see them quite often with third-party tools. So for example here, Google Analytics has its tag. Facebook has it’s tagged with the Facebook pixel. Or Google Ads also ask you to install its tag to you your page. To install them most of the times, they asked you to place the codes in the head section of the HTML of your page. What does that mean? Well, I have a little example here where we have our tags already installed. And we can view the HTML code by right-clicking and viewing page source. So here’s the HTML document. And if we scroll down, we can see that we already have our tags installed here. Right here we have our Google tags and then we have our facebook pixel. And this is where you would normally place your tags. Now, we can see that these tags are currently installed with the help of the extensions the Google Tag assistant. So here we see we have our Google Ads remarketing and our Google Analytics. And we also have our facebook pixel help extension, which shows us that the Facebook pixel is deployed correctly.

Now, how does Google Tag Manager fit into all of these? Well, let’s take a look at an example where I have Google Tag Manager deployed. As we can in the tag assistant, we still have Google Analytics deployed and the remarketing. Additionally, Google Tag Manager and the Facebook pixel helper tells us that the Facebook pixel has been deployed correctly. The difference is when we look into the view page source here that we can find our tracking codes nowhere except the Google Tag Manager code. And this is a tag in itself, this is the Google Tag Manager container snippet, which is placed on this website. And this is what Google Tag Manager at its core really does. You get one central Google Tag Manager snippet that you installed onto your page. And henceforth, you can control and deploy tags through a central Management Console. And this is this interface. So when we go over to tags here, we can see the different codes that we have installed.

And if you use a tag template, we don’t actually have to mess with any kind of these codes here. But it gives you a graphical user interface where you can configure everything and see how everything is configured. Now, as the name implies from this central tool, we can manage all our different codes, implement them, but also see what is installed under which circumstances. And Google tag manager comes with a heap of useful tools. For example, the preview mode. If I click this button here, it will put my browser and only my browser into a special state which allows me on my website, where I have Google Tag Manager installed to see a preview window down here, which gives me more information of which tags have been deployed on this particular page view. So I go over to the next page, I see again, which tags have been deployed. Now, this seems to be always the same. And that’s because I attached a trigger, which is like a rule to these tags to tell them when they should be deployed. And in our case, that would be the all pages trigger. So I want to fire these tags on all the pages that the users visit on our website. But Google Tag Manager is actually very well equipped to fire tags under specific circumstances that you define. So as an example here, let’s fire tag when the user clicks on this Add to Cart button. And that’s really the power of Google Tag Manager. Because we can define triggers to fire on interactions, such as a button click or a scroll on our website. So let’s define here a new tag. This will be a Google Analytics event tag for our Add to Cart cart.

As a tag configuration, we’ll just choose our tool here. I would choose the track type event. Don’t worry if you don’t understand what I’m doing right here. We will explain this in later lessons.

And now I can define my firing trigger. For that, I will go on to the triggers that I have available. And I’m going to define a new trigger, this will be a click trigger for our Add to Cart button.

And I have a host of different interactions that I can choose. You see, we have element visibility, form submission, scroll depth, and so on. But we want to go with a click trigger where we can choose

under which conditions this should fire. In our case, that would be the click text. And I wanted to contain Add to Cart.

Let’s save this. And now it’s attached to our tag and see if this works. Let’s save this. And this again, when the power of the preview mode comes in, we can refresh this.

And now we’re going to try it out by clicking on our Add to Cart button. And we see that our Google Analytics event tag has fired. And when we go over to Google Analytics, let’s go into the real-time reporting and see under our events it was received right here by Google Analytics as well. So really easily, you can set up interaction based tracking with the help of Google Tag Manager without actually going through the exercise of coding anything up just through this central management console. Now, this tracking itself is not yet live on the website. It happens only on my browser because what Google Tag Manager has built in is a preview system, which we have used with our preview console down here. And then a version control system. So in order to deploy the striking to all our users who visit the website, we need to submit this as a version. So click the on the submit button, you can name your versions

and then publish them to all your users.

And at that moment, it will become live on your website. And this is a best practice system because Google Tag Manager actually keeps track of the versions that have been deployed. So at any time, if you find that your tracking is not working anymore or a mistake has been made, you can easily roll back to a prior version where you’re tracking was working correctly. In that regard, Google Tag Manager is really an awesome tool for handling your marketing tags efficiently through this central management console and simply deploying your tags faster because you just have one central snippet that all your tags go through.

All right, so there you have it a quick overview of the core functionalities of Google Tag Manager. Did you understand everything? Well, if you want to test your knowledge, head over to measureschool.com/lesson1 where I have a little bit of a quiz prepared for you that you can go through and then you’ll get your results and see where you can improve. And if you want to learn more about Google Tag Manager, stick around and subscribe to our channel right over there. Because we bring you new videos just like this one. And our next lesson just next week. And if it’s already there, you can click right over there as well. As always, my name is Julian til next time.

SHOW MORE...

Enhanced Ecommerce Promotion Tracking (Part 2)

Google Analytics Enhanced Ecommerce Tracking can be installed with Google Tag Manager. In our last part (link below) we discovered how to track the view of a Promotion with the Element Visibility Trigger. In this part, we are going to track the click of the Promotion.

Part 1 – https://www.youtube.com/watch?v=AiONF_O9Dbk

🔗 Links:

Enhanced eCommerce tracking demo shop: https://enhancedecommerce.appspot.com

DataLayer Documentation: https://developers.google.com/tag-manager/enhanced-ecommerce#promo

Container Download: https://measureschool.com/wp-content/uploads/2018/12/EECPromo.json

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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

Welcome back. In this video, we’re going to take a look at how we can track our enhanced eCommerce promo clicks with the help of Google Tag Manager and our custom JavaScript variable. So like in the last tutorial, we already had a closer look at how we can set up such a dataLayer inside of a custom JavaScript variable. Now, we want to also track our actual clicks. Now, these enhanced eCommerce tracking dataLayers was built the same. But for our dataLayer here we have a promo click as the action. And this is something we would need to change in our tracking deployment for promo clicks. So let’s take a look at the specification here. Down below, we here have the measuring promotion clicks. And we want to do the same as with the other one. Now, I’m going to just copy the whole thing here, the whole dataLayer push. Okay, so this would be this year, going to copy this and going to go over to Google Tag Manager and build an enhanced eCommerce tracking promo view. I’m just going to copy this and going to call this enhance promo click. Now, we had our dataLayer before, I’m just going to replace this.

So here we have our dataLayer. As I said, we are not really pushing anything into the data, we just need the eCommerce object. So we can get rid of anything right here, dataLayer push and back here. Now, this is built, especially for a tracking scenario where you would forward the user on and you want to ensure that the data is actually transferred. This is done within the event callback, we can get rid of this portion as it is deployed through a variable here. So I’m going to get rid of these data points as well. And this should give us our enhanced eCommerce tracking object except for the event up here. This one is also something we wouldn’t need as we are not deploying a dataLayer. We want to simply have our eCommerce data object. Now, you see this promo object ID, project object name, and so on. This actually needs to refer to the same data that it was actually viewed. So we need to have the same data in here as we had from the one that is viewed. So I’m going to just save this, for now, go over to our view here and copy out our promotions view here. All right, let’s go over to the click data and type that in as we had before. So now we are clicking on the same data as via viewing. And if you know about enhanced eCommerce tracking, you know that you need to keep data consistent. Otherwise, the data reports inside of analytics won’t be filled correctly. So we have this now prepared. And again, we need to go through and build a tag for this. In our case, this can also be copied. So let’s copy our event here. This time, it will be a promo click event. Also going to change the event tracking parameters, this will be a promo click. And we obviously want it to pick up different data, not the view data, but the click data. So this is now specified as well. And we want to change our trigger out. So let’s click here and get rid of our visibility trigger. And in our case, it would be simply a click trigger. So let’s go here for our clicks. And I’m going to go with the all elements trigger. And let’s keep it generic for now, I’m going to build a generic click trigger.

Let’s save this. Before we move on, I need to configure my built-in variables. So we actually have our click element, click ID, and so on enabled. Let’s refresh our previous debug mode. Go back to our page and see how our variables get filled. I’m going to click on the ad. Now, this didn’t do anything. Let’s refresh here again. Oh, that’s why we had a semicolon error in our class some JavaScript variable. Let me just figure out what this is all about. It’s probably simply because we have some white space here. Let’s get rid of this and save this, refresh. And this time it does it. Okay refresh our page and I’m going to click on this with the command keypress. We have our GTM click our EE promo click already fires, that’s fine, but we want to restrict it to only fire on our ad. So we’re going to look into our triggers here, all variables and we see here our click classes get filled. And we have some information here about the click classes. Let’s go with the WP image 71. So if that’s inside of our variables filled, then we want to fire this so I’m going to turn our generic click trigger into a specific one on our ad click and I’m going to install a filter and that filter will be on the click classes if it contains WP image 71. Let’s save this. And again, try this all out.

Press this button and we see our click has fired. If I click anywhere else, it also generated GTM click but nothing fires. So this works fine. And we have now deployed our data. Let’s see if it is received by Google Analytics. Let’s go back to the real-time reporting on the events we see that there are some new events here. We had our promo click, three times promo click and that data should then also have attached our enhanced eCommerce tracking data. We can actually check inside of our let’s go on to inspect here this will open up our developer tools and we have under the console. Let’s reload our page actually. Here is our Google Analytics information. The page view has fired now also our page promo view should have fired and now click with the command keypress. Yes, we get our data in here as well the creative and so on. Everything that we have filled in. This time it’s a promo click so that data was transferred over to Google Analytics. We already saw this here in the enhance eCommerce click was just registered. Now let’s look into our conversions under eCommerce reports, marketing, and internal promotions and go to the right date.

And we see our internal promo clicks were also registered here. So this data was transferred correctly.
Now, this is it with this little tutorial. Just to recap, we have put in the right dataLayers into an enhanced eCommerce tracking variable. And this is a custom JavaScript variable that just returned our eCommerce object with the right data. And then we have triggered an event tag through Google Analytics that transport that data over to Google Analytics correctly. So it doesn’t use the dataLayer. It doesn’t read from the database, it reads from our custom JavaScript variable. And this is how you can fill these reports without actually deploying a dataLayer. But doing everything through Google Tag Manager, which is quite beneficial if you have only one promotion running on your page just like this.

All right, so there you have it. This was it with our little tutorial here on promotion tracking with enhanced eCommerce tracking features. Now, it’s always astounding to me that you can utilize all the built-in mechanisms of Google Tag Manager such as the element visibility trigger and then also the click trigger to make this deployment happen. I’d love to hear from you if you run into any problems or if you want to use this tracking deployment. If this helps you please leave us a comment down below. I always love to hear from you guys. And if you liked this video, then give us a thumbs up and also subscribe to this channel if you haven’t yet because we bring you new videos just like this one every week. Now, my name is Julian, til next time.

SHOW MORE...

Track Your Internal Promotions with Google Analytics Enhanced eCommerce Tracking and GTM (Part 1)

Enhanced Ecommerce Promo Tracking can be done with Google Tag Manager and an Custom JavaScript variable. If you have Ads leading your website visitor deeper into your website you might want to install this tracking technique. We will use the Element Visiblity Trigger as well as a Click Trigger and a Custom JavaScript variable to deploy our tracking. No dataLayer implementation needed

🔗 Links:

Enhanced eCommerce tracking demo shop: enhancedecommerce.appspot.com

DataLayer Documentation: https://developers.google.com/tag-manager/enhanced-ecommerce#promo

Container Download: https://measureschool.com/wp-content/uploads/2018/12/EECPromo.json

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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 track internal promotions like banners on your homepage with the help of Google Analytics Enhanced eCommerce tracking and Google Tag Manager. All and more coming up right after this.

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian and today I want to answer a question from our MeasureMasters Community. MeasureMasters Marco asked, how can I installed Enhance eCommerce promo tracking with the help of a custom JavaScript variable? Thanks for this question, Marco. We actually need to define a few things up front. What is Enhanced eCommerce promotion tracking? Well, the Enhanced eCommerce tracking is a feature set of Google Analytics that carries throughout different reports in Google Analytics. And you can track a whole lot with this but we want to focus on the promotion tracking.

Now, what are promotions in the sense of the enhanced eCommerce tracking? Promotions are, for example, banners on your homepage, where you actually want to bring the user deeper into the website or making them aware of a certain promotion that is going on right now. So for example, you could have a banner on the homepage saying we have 20% off on our shoes right now. So if the user clicks on this, then he goes to the category and he buys later the product may be. Now, you want to track how many people actually viewed this promotion, and then clicked on it and ultimately bought right. With the enhanced eCommerce tracking, promotion tracking, you can do all of this.

Now, Marco is asking here about how he can do this with a custom JavaScript variable, which is really interesting because normally, you would need to deploy extensive dataLayers in order to track enhance eCommerce tracking. We can do this all now with the help of Google Tag Manager, at least in the promotion tracking part of this because we can make use of a custom JavaScript variable. This gives us the information that we want to send over to Google Analytics. And we can do this all with the built-in tracking mechanisms of Google Tag Manager. We can utilize the element visibility trigger to track the view, and then also the click with our click tracking trigger. And this is what I want to show you in this tutorial. Now it got a bit longer so I split it up in two parts. In this first part, we’re gonna take a look at how we can actually track the view. And this is done with the element visibility trigger. And then in the second video, we’re going to take a look at how we can track the actual click on our promotion with the help of the click trigger. Now, we got lots to cover so let’s dive in.

Welcome to the Enhanced eCommerce tracking demo shop. This is something you can access yourself at enhancedecommerce.appspot.com and this shop was built by Google to show off how you need to implement the enhanced eCommerce tracking to get full functionality of it. In order to see what needs to be implemented into the dataLayer, you can always click on this information icon here. And you see if the user clicks on this product, we need to deploy this kind of dataLayer. But today we want to concentrate on a particular dataLayer and this is the promo dataLayer. Right here we have a promotion going on. And when we click on it, we go to a product and then we can buy the product. Now, in the enhanced eCommerce tracking specification, you can in particular track when the user sees this promotion impression, and then also clicks on it. And the data layer that you need to implement for click is this dataLayer right here. And for the view, we actually have them on that page view when the page loads. Now we have product impressions here. But also down below here we have the promo view. So these are two dataLayers that would need to be sent over for the impression or promo data to work.

Once that data available and sent over to Google Analytics, what would it look like? If we go over to analytics, we can go under the conversions then under eCommerce and marketing then internal promotions. This is where the data would show up. If we have enhanced eCommerce tracking installed, you could see the name of the promotion then how many times it was seen, how many times it was clicked. And from there, it calculates the CTR. And if the user has bought a particular product, later on, we would be able to also see the transactions that are connected to this internal promotion click. So really interesting data. By the way, you can also use this for non-eCommerce tracking websites. It is just what Google Analytics calls and enhanced eCommerce tracking feature. And if you are flexible and can ignore the eCommerce label, you can also track, for example, internal promotions for a lead generation website or certain elements on the homepage that you want to classify as promotions.

Now, in order to get that data in there, you normally would need to deploy these dataLayers on your page. So every time somebody clicks, this dataLayer needs to be pushed into Google Tag Manager’s dataLayer. From there Google Tag Manager can pick that up via a page view or an event tag and send that on to Google Analytics. In this video, I want to show you how you can accomplish this with the help of custom JavaScript. Why do I want to show you this? Well, there are cases where you really have only one promotion on your shop. So for example, here in our shop, we have one ad that is down here, it also goes to a product page and would be perfect for our internal promotions. But we don’t want to go back and forth with the developer. We know that there’s just one ad here that we want to track. And this is actually pretty nicely done with a click trigger and an element visibility trigger. So how would we set something up like this? Let’s start at the beginning, we would need to have the information that we get from our dataLayers here inside of our custom JavaScript variable somehow. Let’s set up these variables first. So I’m going to go over to the specification of the enhanced eCommerce tracking for Google Tag Manager. It gives us here all the different dataLayers that you can set up. We want to concentrate on measuring promotions. And let’s first of all, look at measuring promotion impressions. So the actual view. It gives us this dataLayer here. Let’s simply copy it and go over to Google Tag Manager. And under variables, we’re gonna build a custom JavaScript variable.

And a custom JavaScript variable always needs an anonymous function. So you need to enter an anonymous function and a return statement. Now, in this anonymous function, we want to implement our dataLayer right here. But we don’t want to push actually to the dataLayer, we have all the information available for Google Tag Manager to send onto Google Analytics. So what we can do is actually just push our eCommerce dataLayer. In that case, we would simply get rid of that dataLayer push here. And also at the end, we want to get rid of our parentheses. And that way, now we have a simple enhanced eCommerce object installed here. Now, what do we want to do with as object? We actually want to return it. So I’m going to put the return statement in front of our object here. And it will simply return an object with our promo view information in there. It’s correctly formatted because we took it out of the specification. And we can now customize this dataLayer. Now, in this particular dataLayer, you need to know a little bit about how you can read dataLayer information. I want to actually not track two promotions, two promotions are tracked here, I only want to track one promotion. I’m going to get rid of this first promotion here. And then I want to customize this. So every promotion needs to have an ID, it doesn’t matter which ID you gave them. Only if this is an ad that comes up over and over again, you want to have the same ID. Just going to go with one here we will name this ID and our case it is an ad for the flying ninja.

Now you can put in a different creative if you have different creatives for flying ninja and a position. These, by the way, are pushed into dimensions that you can also access by the secondary dimension. So if you put in creative here we have internal promotion creative, this would be the creatives and we also have the position.

So if you want to customize them, you can. For me, this doesn’t really matter because I just have one single ad. So I’m going to just keep this a skyscraper and slot two. But if you want to customize them, go ahead. All right, let’s give this all the name. This is a custom JavaScript variable for an enhanced eCommerce promotion view. And let’s just try this out to see what the preview debug mode says about our variable so we can check whether it was correctly formatted and everything is running. So let’s go to variables. And we see here our custom JavaScript variable is now of the return type object and it’s simply has enhanced eCommerce tracking object in here. This is the information that Google Analytics needs in order to build these reports here. So now we would need to transfer to somehow to Google Analytics. How would we do that? Well, through Google Tag Manager and a Google Analytics tag. Let’s go over to tags and build a new Google Analytics tag.

And this time, it will be an event tag because we just want to send this data over. It needs to have something to transport it. And I will choose event. And this will be an event promotion view. As a tag configuration, we take our Google Analytics tag. And as a track type, this time I choose event this will be a category of enhanced eCommerce. And as the action promo view, it doesn’t really matter what you put in here, this is just the event that transport it over. But I will choose the noninteraction hit true because I don’t want to mess with my bounce rate. And as the Google analytics setting variable, I have this already prepared so it goes to the right account. Now we need to tell this tag to pick up this enhanced eCommerce tracking data that we had prepared. So I’m going to go with the enable override settings and go to more settings. And here under the eCommerce section, I can enable the enhanced eCommerce tracking. This one will be set to true I can specify if I want to use the dataLayer or read from a variable. Now in normal enhanced eCommerce tracking, you would have the dataLayer filled and then pick up the data from there. So you would use the dataLayer. But in our case, we can choose the custom JavaScript ee promo view that we have just prepared. All right, that should do it. Just to show you what data will be sent over. We also want to check under the advanced configurations the use debug version true. This we transport some information into our developer tool. So we can actually see these enhanced eCommerce tracking data being sent to Google Analytics.

So I’m going to set this to true for now. Later, if you actually publish this, I would go back and set us to false because you don’t want to have that data always in your debug console. All right, and then we just need to choose a trigger, which trigger do we choose? We have an old pages trigger that would obviously mean that the ad would be triggered, or the promo view would be triggered on all the pages. We only want it to be seen on our particular page here. How can we target this page or every time the app is seen? This is actually pretty far down. So at the beginning, the user can actually see it. So I don’t want to send an impression over once the user lands actually on a page only if you scroll down and sees this ad. And this is something you can use the element visibility trigger for. So let’s go ahead and build one. I’ll go here to the plus and as a type, we choose element visibility. And now we can select a method to actually trigger this either an ID or CSS selector. Obviously, you would need to know a little bit of CSS and figure out what the right selector is. I’m going to go here and right click and go to inspect element. And this will give me the HTML markup. And luckily, for us, we have here our section, our section of the ad. And it has an ID, media image two. So I’m just going to double-click on that and copy it and fill that into the ID. In most cases, you will probably need to use a CSS selector, which gets more complicated as you try to filter down on the elements that actually should be viewed here. So I’m going to go with the ID though. And I can choose whether they should fire every time the element is seen. This would be this one once per element. So if you have multiple elements only once it will fire or once per page. I will choose once per page for our example here. And how much should be seen of that element? 50% is fine with me. Now, I don’t need to worry really choose any filters here as this will only fire if the media image two is actually seen. Now, let’s just give this a name. This is the visibility trigger for our ad. Let’s save and save this again here. And now let’s try to this all out, refresh our page.

Well, it’s already fired here because it just down there. Let’s reload again. Somehow remembers where I was at a time. Now let’s go to another category here.

Let’s go to the t-shirts and see if this works. Okay, now we are on the t-shirts page and we just gonna scroll down. And we see element visibility now fired. And our ee promo view has fired as well. Now, this information is sent over to Google Analytics. How can we make sure that it was actually sent? That’s where this debug view came in that we have activated in our tag. We can open up the developer tools again, right-click Inspect Element and here under the console, we should now have information available of what data was actually sent over to Google Analytics. First of all, we had our pageview. This is something that fires normally on the page as we have a pageview trigger installed. And then afterward, we should see an event and this event should have our enhanced eCommerce tracking data in here as well. So here’s our event. And we also sent over an EC add promo. And this is our ID, our name and so on. So this was sent over to Google Analytics correctly. We can look this up in the account on the real-time reports here on the events. You see events last 30 minutes, we have our enhanced eCommerce tracking promo view that was sent over. Now, this only tells us that the event was received by Google Analytics. But did it actually pick up the right information from our enhanced eCommerce tracking dataLayer or the eCommerce object that we send over? Let’s go over to our conversions and under eCommerce, marketing internal promotions, we need to set the right date. Just going to pick the last date and here we see some information already been received. So we have here our internal promotion and our promotion views and the clicks or something that test it out beforehand, which we’re going to get to in a second. All right, so this is how you can already send over information about the promo view. In the next video, we’re gonna take a look at how we can send over our click data to Google Analytics as well.

SHOW MORE...

Dynamically change Links with GTM – Part 4

Changing all links to a particular website can be done in GTM (we have already discovered several techniques in previous videos). But what if you want to dynamically change a link based on where the user came from? In this video we are going to change around our amazon affiliate links based on the source the user came from so we’ll be later able to identify which traffic source converted the best.

🔗 Links:

Watch the series from the beginning: https://www.youtube.com/playlist?list=PLgr_8Hk8l4ZEv-TJjciytxsMHJ3Pysorc

Part 1 – Change Links with Google Tag Manager (Part 1) https://youtu.be/B1oMtqohZzk

Part 2 – Change Links (Search & Replace) with Google Tag Manager (Part 2) https://youtu.be/Op4X5N99jFQ

Part 3- Attached Information to a Link Dynamically with Google Tag Manager (Part 3) https://www.youtube.com/watch?v=2qnWGvPoEVY

Custom HTML Code: https://gist.github.com/measureschool/75e91074d3bad83c85fcb4c7880af565

Container Download: https://measureschool.com/wp-content/uploads/2018/12/ChangeLinks.json

Source Cookie Video: https://www.youtube.com/watch?v=x2pR4bCW7Mg

🎓 Learn more from Measureschool: http://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀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

Welcome back. In this video, we’re going to discover how we can attach something to the link. But this time dynamically. So if I click on this link, we now have our affiliate ID attached here, which we have done in the last video. But what if I wanted to change this affiliate ID around based on where the user came from? Well, you might know that in our Amazon affiliate account, you can place different tracking codes. I just have two right here, one for Adwords, and one for Facebook, and one generic one. Now, I would like to know how many people are coming through the AdWords channel onto my page, and then I forward onto Amazon and then actually buy. Now, I obviously need to somehow dynamically change the links around if this user was an AdWords or Facebook user, or something else based on where the user came from. And we will be able to utilize a technique that I have showed up in a while ago, well long time ago, which is the source cookie alternative that I’ve presented here, which writes your sources into a cookie. So let’s go back to our page already have this deployed here. So at the heart of this is a tag that sets the source cookie. And this only on the landing pages, depending on where the user came from. In our case, I can look up this cookie inside of our developer tools under application. I have here the cookies from our website, and we see a source cookie, which lists all the different sources that the user came from, given that they have been UTM tags. So in our case, if I would come from a UTM source, or let’s just make this up, I come from now, let’s say.

So we come from our email newsletter these are UTM tags, we should be able to write this down into our cookie. And we see right here it was extended to include our newsletter as well. Now if you user comes back through something else, for example, an AdWords click, which usually has the GCL ID automatic attached, then there should be also written into our source cookie, let’s see, whoops.

Here we see we have Google Ads now attached to our source cookie. Now, every time somebody enters through Google Ads, I want to now attach to my Amazon link a different affiliate ID, instead of this affiliate ID. I want to attach, let’s go over here the AdWords 20 ID. So it’s really just the difference of this right here. Now, then Amazon would report this in a different way. So I will be able to see how many clicks and how many buys went through this particular channel of mine. Since we have that information available where the user came from. In the source cookie, we can read that source cookie, I’ve already built a variable for this right here, we have our source cookie. And then we can extract the last known source, which I’ve put into this last source variable, which I can now use to build my links up programmatically. One step in between, if Google Ads is shown, I want to rewrite this into my affiliate link. So let’s go over to Google Tag Manager, first of all, and built a new lookup table variable, which will let us rewrite our affiliate links automatically. So we’ll build a lookup variable for our Amazon IDs. And this case will choose as a type the lookup table variable. And as the input will simply use our last known source and add a row here. We just need to actually know if the last known source is Facebook, Facebook.com, then I want to rewrite this into our Amazon link. Let’s go back here I want to attach this FB.

And if it’s Amazon, I want to attach aw. And this will be, in our case, let’s go back needs to be exact. So we don’t have a margin for error here, Google Ads. And the default value so if nothing is true, I simply want to turn this into our normal tag, which was this one. All right. Now that we have this prepared, we can utilize this in our attach linker, which we have already looked at in the last lesson, and simply replace our attachments string here with our lookup table variable, which is two curly brackets, we just need to find it in this menu right here. And this should do it. Let’s save this and try this out.

So this has been deployed and if I click on buy product. And now see that our AdWords was attached to this link which I wanted because I just entered the page through Adwords. What if I came through Facebook?

Now this UTM source needs to be facebook.com, actually, let’s press enter, and we just simulated it became through Facebook, let’s buy a product. And we see now Facebook is attached. And that’s the same again with a UTM that is tag from email, press enter, and we see if I buy a product, it just gives me the normal URL affiliate tag at the end. So this works as expected. And it’s highly valuable for those of you who want to track or get a better deeper understanding of your traffic channels that are going out to Amazon. Because in the reporting itself, if you go over here to the reporting of the earnings, you should cut this out, we can now see reporting for all our tracking IDs, or just who came through AdWords who came through Facebook and how much money we went with them. So hugely valuable when it comes to the tracking outside of our own website and passing that information on to something like Amazon. But really, this technique could be used in other ways as well. So you will be able to pass on information to your tracking systems, to your checkout pages that may live on a different platform or cross-domain tracking in the sense that you would be able to pass on information about the sources or about the user ID to a different website. As long as the system accepts these values, you could then see them in their system as well.

Wow, this was a lot of stuff in these little videos. I hope you enjoyed them. And if this triggered something in you, and you thought well, I want to use this tracking technique for this special case. Please let me know about the cases. I’m so interested in the cases that you will be using this checking technique down below in the comments. We can all learn from the different tracking cases that you might come up with and maybe I didn’t come up with in this tutorial. As always, if you enjoyed this video, then why not give us a thumbs up and also subscribe to the channel right over there because we bring you new videos just like this one every week now. Now, my name is Julian.

Till next time.

SHOW MORE...