How to pull data relative to the clicked element in Google Tag Manager

Your variables don’t get filled with the information you want to track? With Relative Click Variables you will be able to pull in information relative to the interaction you tracked. n this video, let’s go through the steps setting up a Relative Click Variables

Step by Step:
Enable your generic click trigger + Built-In Variables
Click on the element
Retrieve the latest value of the gtm.element in the Dev Tools with google_tag_manager[“GTM-XXXX”].dataLayer.get(‘gtm.element’)
Use the command .parentElement and querySelector to get to your desired output
Transfer all that into a Custom JavaScript variable

🔗 Links

The google_Tag_manager object https://www.youtube.com/watch?v=WdPxW-AttKw

🎓 Learn more from Measureschool: https://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

When you set up a click trigger, you click the button and in your variables only the click text and click URL get filled out. But you’re really interested in values that are surrounding your click, how can you set this up? In today’s video, I’m going to show you how you can set up relative click variables which is a bit of an advanced technique in auto-event tracking, all and more coming up.

Hey there measuregeeks. Julian here back with another video for you. Today, we want to talk about how to create relative click variables. This is a bit more advanced in auto-event tracking. So maybe not something for beginner. But let’s imagine you had a case where you have different products that you want to track based on the click, but you are not interested in picking up the button text or the link that is behind that button click. But rather a value that is surrounded to this click. So for example, the price or the image URL this product. Well, obviously, this doesn’t get filled into your variables because the click trigger oftentimes only picks up the values that you actually clicked. But as you know, Google Tag Manager JavaScript is versatile. So there’s always a workaround somewhere. And today, I want to show you how you can set up relative click variables that actually take a value that is surrounding that as relative to that click and pull that into your variable so you’ll be able to use it in your tags, and triggers. Now we got lots to cover. So let’s dive in.

Welcome back to our demo shop. On this demo shop. I already have Google Tag Manager installed. And I want to now create a variable relative to my click. What does this mean? Well, let’s imagine here on this product page of this product, I click the Add to Cart button. I’ll do this with the command keypress. We see with our click trigger installed a click event within our preview mode here. And when we look at the variables, we can see how they got filled. So for example, we have our click classes right here, we have our click element, click ID didn’t get filled, the target didn’t get filled. And the click text is add to cart. This is all fine if I just want to track the button. But what if I wanted to track information relative to this button click. So for example, I wanted to track how much was the product price of this product relative to the add to cart click. Or what was the product name relative to the add to cart click or what was the image URL so that these variables get filled. Even though I go to another product and have here completely different set of variables.

If I click Add to cart, I still want to pull the price, I still want to pull the title or the image URL. And I’ve experimented with this already. So we can see here if I click the Add to Cart button, we get the variable price filled accordingly because it pulls it relative to this click in to this variable. Now, this is a custom JavaScript variable. And let me show you how to set this up at an example of our title here. So how could we pull the title relative to the add to cart click. Now prerequisites for this, obviously, you will need to have a trigger installed which is a simple click trigger. I went with the all elements trigger. So just to show you how to set this up, we have here in a generic click trigger which means we choose either just clicks or all elements. I usually good all elements and choose all clicks here without any filters attached to this. And this will simply deploy our listener functionality of the trigger. So I have to set up already. And this will push when I click anywhere on the page, these click into my preview and into my data layer. Now that Google Tag Manager is registering clicks, we need to set up a variable. As I mentioned, this will need to be a custom JavaScript variable. And you will need to know a little bit of JavaScript and a little bit of CSS in order to configure this correctly. But I’m going to show you this step by step. So the first step that we would need to go through is right here, let’s reload our page. And the first step would be to actually click on our add to cart click. So we see a click element down here in the events menu of our preview mode. Going to do this with the command key press so it doesn’t reload the page. And here we have our click. Now, this click

gets transferred into the data layer with certain elements right here. What we want to look at is the GTM element which is currently an object HTML button element. What does this actually mean? And how can we see this? For this, we need to open up our developer tools. So we go up here into Chrome menu, more tools. And here we have our developer tools usually start out with the elements pane, we will go with the console right here. And now we’ll type in some commands in order to see what is stored in this GTM element. So just follow along. We will access the GTM JavaScript object by typing Google_tag_manager. And then in square brackets with quotation marks we’ll type in our GTM container ID. You find this up here as well in your preview and debug mode. I have this already stored in here. So maybe this will even be auto-filled out for you in your Chrome console as well. And then we’ll attach a dot and access the data layer. dataLayer with a capital L, another dot and then we’ll get a key from our data layer, again, in parentheses, with quotation marks we’ll put in the key which we can see here the GTM.element. You press enter and we get a return statement.

And when we hover over it, we can actually see in our pages in the background that now our button is highlighted. Now, this is the element that the trigger recognizes once you click the button. What we’ll do now is to climb up the DOM tree. What does this mean? But if I right-click here and just click on reveal and elements panel, we’ll go over to the elements panel right here, and we will see the DOM tree. Now, this is the element that we have selected. What we will do need to do now is climb up this tree just like this and get to our H1 element, the product title here, happy Ninja, which we want to then pull out. How can we do this? Well, let’s go back to the console. And now we’ll choose a command that will climb up the tree. We can choose to command parent element. And I simply press Enter. And here we get the next parent element to the clicked element here which is our form class right here.

Now what we will see is that our product title here is that not yet highlighted because the parent element is actually not within that tree structure that we just climbed. She went to visualize this again, to go back to the elements pain, we just climbed from here to here. And we’ll go the next step and climb to the next parent element, which would be the summary entry. So let’s do that by just clicking the up arrow will get the last command back, don’t have to type this all over again, and put in again a dot parent element, press Enter whoops, or get an arrow, I written everything correctly. So let me just see inside of our preventive mode, you see, I generated another click. So now obviously, the relationship changed. And we have not our button click anymore as the GTM element. Let me just see what is now as the UTM element in the data layer. It is just the background of our premium development. Okay, so let’s go through the steps again, we click on Add To Cart.

This time, I should have my GTM element which is my button. And now I’m going to attach our parent element and parent element again. And this time we see we are now on this summary class, this div class. It actually encapsulates our h1 as well. Again, we reveal this and the elements panel. You can see we are right here right now. Now we need to go one deeper again, or go search through the children of this parent element to find our product title. You can see here this is h1 and product title as a class. So we can simply choose the CSS selector to select this item. We will go over to console again and I press the up arrow and this time I’m going to choose a command called query selector. And in parentheses and quotation marks, we can put in our CSS selector, in our case it would be h1 and then dot product_title. Let’s try this. And we get our result back right here. Now we are now at the right element. And now we want to just pull the text out that is within this element. And we can do this with the command.innertext, press Enter. And this is the result that we want to get in our variable later on happy ninja.

So we have completed to our command that we can now simply copy and put it into a custom JavaScript variable. So we’ll go under user defined variables, create a new variable, custom JavaScript, let’s called it product title, and the variable will be a custom JavaScript variable. And here we’ll put in our JavaScript. Now it’s important to know that custom JavaScript needs to have an ominous function and needs to return something. So I’m first going to put in an ominous function and then return a statement. Now we can just copy and paste here our statement if we had the developer console before and let’s try this out. Let’s go and save, refresh our premium debug mode, go back to our page. And once it’s reloaded, you can click on our add to cart with our fourth element here. And I go to variables. And here we go, custom JavaScript product title is now happy ninja. Now, let’s try this out on a different product. So I’m going to go over to next product here. Should be the ID expected output, going to click on Add To Cart. And under the click event. We now see our product title is undefined. So why is this undefined. And this can happen sometimes because the HTML markup here actually changed. Probably there’s some more elements in this product, or maybe it’s just marked up differently. So let’s debug this really quickly, I’m going to go ahead and just pull up my last command with the up arrow, press enter. and correct it is not the somehow. So let’s step by step, go and get rid of our inner HTML here, we see we can actually pull anything with h1 was just not found. Let’s go further. And here we see that our second parent is just this element and doesn’t encapsulate our product title. So I’m going to go back further.

Okay, and here we are at the same element again. So maybe we need to put in another parent element, another parent element. See if this encapsulates our product title. No, not yet. you hover over it just this here. So we need to go even further way up. Here we go. Now it encapsulates it. And we can again do our query selector, and our h1.producttitle. Alright, so here we go. Here we have our inner HTML or inner text. This is the product type that we want to have out. So let’s try this out again. I’m going to copy this all because now we went a step further which should also still work for our old product. But we will need to try out. That’s also just a Tag Manager, you will need to test, test, and test again. So will refresh and go back to our page. On this page, since we have tested it, it should work. I’m going to add this to cart, and the product title should be your ideas. So this is correct. Let’s go back to our old product. And add this to cart. And our variables. Now it say product title is happy ninja. Let’s go to another product and add this to cart. And here’s our product title whoo ninja. That is also correct. So now we have adjusted our relative click variable to always pull out the correct product name relative to the click that we have down here. Now you can use this technique in many different circumstances. You just need to know a little bit how you can pull out the right values from the DOM tree and know how to get to the right element by using parent element and then the query selector to search through the DOM tree, select the right element, then pull out the right value. Now that we have this variable setup, you can obviously use it in your triggers. Or also intact deployments directly inside of customization tag like the Facebook Pixel, or inside of a Google Analytics event tag to transfer this all over to Google Analytics. But I trust you will be able to set this up by yourself. Don’t forget at the end, if you want to have this live on your website, submit the version, give it a name. And then this tracking will be deployed to all your users.

All right, so there you have it. This is how you can set up relative click variables. And I don’t know let me know in the comments down below. Is this something that you already knew? Or is this something that you use often on? And where would you use this. I oftentimes uses with a click trigger but it would totally be possible to also use with the scroll tracking or with the element visibility trigger if you know what you’re doing. So I’d be interested in your use cases. Leave me a comment down below. And if you haven’t yet, then consider subscribing to our channel because we bring you new videos just like this one every week. My name is Julian till next time.

SHOW MORE...

New GTM Custom Templates explained (feat. Kevin from Bounteous)

The release of the GTM Custom Templates is such a big deal as it has given us a more secure way of tracking. In today’s video, I have Kevin Haag of Bounteous to help understand this feature and how we can utilize it within Google Tag Manager

🔗 Links:

Getting Started with Google Tag Manager Custom Templates: https://www.bounteous.com/insights/2019/05/28/getting-started-google-tag-manager-custom-templates/

GTMTemplates Library: https://www.gtmtemplates.com/

Bounteous.com: https://www.bounteous.com/

Custom Templates Guide (Simo Ahava): https://www.simoahava.com/analytics/custom-templates-guide-for-google-tag-manager/

GTM Custom Templates (Google) https://developers.google.com/tag-manager/templates/

🎓 Learn more from Measureschool: https://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, Kevin from Bounteous is going to show you how you can utilize this new feature within Google Tag Manager called templates. All and more coming up.

Hey there measuregeeks, Julian here back with another video for you. Today, we want to talk about Google Tag Manager templates which is a new addition to Google Tag Manager and a pretty big one because it extends Google Tag Manager in so many different ways. So I asked my friend Kevin Hagg from Bounteous to come on the channel to talk about Google Tag Manager templates because he has written a very extensive blog post on bounteous.com. Now, I must admit, bounteous is one of my go-to resources when it comes to Google Tag Manager. When I got started with Google Tag Manager, I read their blog incessantly. And I also got a lot of inspiration to make these videos. So big shout out to Bounteous. If you haven’t checked them out yet, please have a look in the description down below where we have them linked up as well. But back to Google Tag Manager templates because we got lots to cover. So Kevin, take it away. Thanks, Julian. And Hi, everybody. My name is Kevin Hagg and I’m an analytics tech lead at Bounteous. Today, we walk through the recently introduced feature in Google Tag Manager, the Custom Templates. Before we get started, let’s take a look what templates are currently available in GTM. Once you create a new tag in GTM, you have a variety of tag types to choose from. Google tag manager has long supported the three native tag types featured for Google tools like Google Analytics or Google Ads. Custom, the tag type for inserting your marketing pixel if there are no supported templates in GTM and more. In this category, you’ll find third-party tags from approved vendors. While we may have many different vendors in here, you’ll notice we don’t have a tag type for all the Martek solutions out there in this list. For instance, I don’t see a template for Facebook, or for Salesforce, for example. Even for some texts that we have in here, like this LinkedIn inside tag, there may be limits for how we can use it. Well, what do you do with a tag you want is not available? In the old days, you’d go ahead, you copy the code, and you either paste it into a custom HTML tag or you paste the URL into a custom image tag. This introduces extra complexity and actually adds risk to your site.

But now, there’s a better way. In May 2019 GTM introduced custom templates. These are standardized templates built by the community and martech companies and introduce them more rigid and secure way of tracking than just pasting the code into the custom HTML tag. In the past, Bounteous and others have created recipes or importable solutions to common tracking problems. Custom templates are more official encouraged best practices. And we’re thrilled about what this means for the GTM users. First off, anyone can create a custom template, either for variable or for a tag, just by clicking New. I won’t go into much detail today about creating a custom template. But if you’re interested, I wrote a blog post talking about the full building process on the Bounteous blog. The link to the post is available in the video description. However, most GTM users won’t need to create their own templates. The biggest benefit to GTM users will likely come in using and sharing templates that others have created. So let’s look at that process.

Take LinkedIn inside tag that I mentioned earlier. If you’re running any sort of LinkedIn campaign to drive traffic to your site, you will want to make sure you’re able to measure how they’re performing. In GTM, we already have the site-wide inside tag that fires on every page and enables you to define URL based conversions. But when there is no unique URL, you have to fire an event-specific pixel. To make this easier, we created a custom template for you. Keep in mind that this is a template built by Bounteous and not an official template from the LinkedIn Corporation. You can get a template from anywhere, someone can email it to you, you can download it on a blog, or in this case, you can get it from the current best option GTMtemplates.com. This site is a community-supported portal created by Simo Ahava and David Vallejo. We will put the link to the site into the video description as well. In here, you’ll find templates for Facebook, Yandex Metrica, LinkedIn, or Pardot. And I’m really excited to see what else gets created in the future. Now let’s go back to my LinkedIn example from earlier. On the detail page, with one click, we can easily download the TPL file, which is our template file. Now the file is downloaded. Let’s go back into Google Tag Manager. To import a custom LinkedIn template, let’s open the contextual menu and import the .tpl file. Now, we can either test our template by using the preview mode, or we can save it right away. In this video, we won’t go over the underlying code and the template creation process as mentioned earlier. So let’s hit save for now.

The LinkedIn event tag is now part of your available Google Tag Manager tag types. Let’s verify that. Go to tags. Let’s create a new tag. And you will find your template under the custom section. Let’s use our custom template to build our first LinkedIn tag. Let’s fire this LinkedIn tag on a form Submit.

I have to insert two values here, the partner ID and the conversion ID. You’ll find both values in the LinkedIn campaign manager. To make my life easier, I store the partner ID in a custom GTM variable. So I don’t have to copy and paste the same code over and over again. For the conversion ID, for now let’s say random string like 1234.

Now, let’s choose the appropriate trigger. I already created a form submit trigger. So let’s apply that to the tag and save our LinkedIn event tag.

Now we’re almost ready to go. As always, make sure you QA your tag before you publish. As you can see, most users will benefit from using templates that others have created and shared, they’re less risky and more user-friendly than pasting in custom HTML. I encourage you to explore the galleries of options and to leverage custom templates also in your GTM container. If you’re interested in creating your own or want to know more, check out the posts I’ve shared earlier and made sure to read Simo’s comprehensive guide. Both are linked in the video description. Lastly, thanks to all the companies and individuals that have contributed so far. I can’t wait to see how custom templates evolve. Now back to you Julian.

Alright, so there you have it. These are Google Tag Manager templates. Thank you, Kevin, from Bounteous. Please check out his blog posts down below he has much more details about templates. And if you want to build your own templates, then you probably need to know a little bit of JavaScript and you need to be a developer probably already because it’s not that easy to figure out. But Kevin has written everything up in his blog post down below. Now I’d love to hear from you. Will you utilize Google Tag Manager templates? Or will you just keep on with your custom HTML tag? Let us learn together in the comments down below. And if you liked this video, why not give us a thumbs up and also subscribe to our channel right over there because we bring you new videos just like this one every week. Now my name is Julian, see you in the next one.

SHOW MORE...

Facebook Pixel Scroll Tracking with GTM

Google Tag Managers Scroll depth tracking is great for discovering how much of your page is viewed by the user. To make this information actionable we can send this information to the Facebook Pixel too. In this video Ahmad (from Siavak.com) is going to show us how.

🔗 Links:

Facebook Pixel Doc: https://developers.facebook.com/docs/facebook-pixel/

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

Combine Scroll + Timer Trigger: https://youtu.be/71pCKRouabc

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

🔀 GTM Copy Paste Extention 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

Scrolling down the page can tell us a lot about our website visitors behavior. In today’s video, Ahmad is going to show you how you can utilize the scroll depth trigger of Google Tag Manager to capture the value of how far a user went down your page, then send this data over to the Facebook Pixel. So you’ll be able to create an audience of that of users, for example, who only saw 50% of the page or scrolled further than 75% of your website. Sounds like a plan. Well, we’ve got lots to cover, so Ahmad take it away. Thanks, Julian.

Ahmad here with another Google Tag Manager tutorial. And in this video, I’m going to show you how to set up a scroll tracking on this page, I reported to Facebook Ads for your Facebook pixels custom events. We’re going to use Google Tag Manager. So let’s head over to Google Tag Manager and set up the tags and triggers necessary for this. So first, we need to set up our base Facebook Pixel tag. For this purpose. Let’s head over to our Facebook Ad manager. Open this menu, go to all tools, pixels. And find a pixel we’re going to report to. Then click on the pixels name and choose set up. Here in install pixel, we need to choose manually install pixel code yourself, scroll down and click to copy the code to the clipboard. That’s it here.

Now let’s head back to Google Tag Manager, tags and create a new tag. Because before we fire any custom event to a facebook pixel, we need to have the base pixel already initiated. Let’s give it a name. Click on tag configuration and choose custom HTML. Now we can paste the pixel code here. We want this tag to fire on all pages. So we need to click here. Choose all pages and save the tag. Next, we need to set up our scroll trigger. Let’s navigate to triggers and create a new trigger. Let’s give it a name. And click on trigger configuration and choose a scroll depth. Here we need to choose what kind of scroll do we want to track, vertical scrolling or horizontal scrolling. In this case, we want where to go. And then we have to decide on what percentages do we want our school trigger to fire. Let’s put 25, 50 and 75 here. This means that our scroll trigger will fire whenever someone scrolls pass 25% of the page, 50% of the page, and 75% off the length of the page. Finally, we want the trigger to fire on all pages. So we don’t need to touch anything down here. And we can save our trigger. Let’s preview the container to verify that our scroll depth trigger and facebook pixel are firing properly. Now that our container is in preview mode, let’s go to our website and refresh the page. So far, so good, the page has loaded and we can see that our Facebook base pixel has fired once. We can also double-check with facebook pixel helper Chrome plugin and verify that the pixel has been fired. We can click on this and we can see that the facebook pixel with this pixel ID has actually been fired. Okay, now let’s close this and see what happens when we scroll down the page. We need to keep our eyes at this pace. Because when a trigger fires, we should be able to see the triggers title here. Let’s scroll down. Okay, so as soon as we pass 25% mark of the page, we can see here that our first school depth trigger has fired. Now let’s continue scrolling down and we should be able to see the scroll depth trigger for 50% and 75% also being fired. So far, so good, our scroll depth trigger and Facebook base pixels are firing properly. Next step would be to create a tag to report this scroll depth triggers to this facebook pixel through a custom event. Let’s head over to Google Tag Manager again, click on tags and create a new tag.

Let’s give our tag a title. And for this one, we also need to use a custom HTML tag. To report custom events to the Facebook pixel, we need to use some JavaScript here. We start with FBQ and then track custom. And then we need to define a name for our event. And this is something that we need to decide because this is not one of the Facebook pixels standard events. I’m going to name it to scroll. And then we need to use curly brackets to pass the actual scroll depth. For example, 25. But the problem of using a static value here is that it will always be the same, it will always be 25%. But what we actually want is to send the exact percentage of the scroll depth to Facebook each time the scroll depth trigger fires. And for this, we need to use one of the Google Tag Manager variables. So let’s keep the tag like this for now. And just apply the trigger, which is our scroll depth. And save our tag while it’s in progress. And create a variable that we can use to pass on the actual scroll depth to the tech. Luckily, for in Google Tag Manager, there is a built-in variable that is towards the actual is called depth threshold, we just need to click Configure, find it and enable it. That’s it. Now before we move to the next step, and use this call depth threshold in our tag, let’s refresh the preview and see how it works. You can refresh the page. Start from above the fold, and slowly scroll down. So here is our first scroll depth tracker. If we click on it and go to variables tab, we can see the actual value for school depth threshold, which is here. And as we expected, it is set to 25.

Now if we scroll down even more, and the next call depth trigger fires, we can see that this scroll depth threshold for this trigger is 50%. And the same goes for the last one which is 75%. Now that we verified that our scroll depth threshold variable is holding proper values, let’s go back to Google Tag Manager and finish setting up our tag. Now here, instead of using a static value of 25, we can use this scroll depth threshold variable that we just enabled. So let’s review one more time. When a scroll depth trigger fires. Google Tag Manager fires this tag, and it will automatically replace this value with the actual value of the variable and that’s exactly what we want. Now before we save our tag and see how it works, we need to take care of a finer detail. And that is we need to make sure that our Facebook base pixel always fires before our Facebook scroll depth tag. Because that one is the tag that initializes the facebook pixel and will enable us to send custom events to Facebook just with a single line of code like this. For this purpose, use advanced settings and use a feature called tag sequencing. In this case, I’m going to configure Google Tag Manager to fire a tag before Facebook scroll depth fires. And that tag would be our Facebook base pixel tag. And we also want to ask Google Tag Manager not to fire this tag if the Facebook base pixel tag fails or its past because if this tag fails this scroll depth tag which is dependent on this tag will not do anything anyway.

Okay, so let’s save this and take care of one final detail. And that is to ensure that Facebook base pixel only fires one time per page. Because otherwise, it would fire once when the page loads. And also, every time that a Facebook scroll depth trigger is going to fire. To do this we need to facebook pixel tag.

Click on Add on setting and under tag firing options instead of once per event which means once on page load and once before every Facebook scroll tag that is going to fire, we need to change it to once per page. So in this case, if our Facebook base pixel has already fired on page load, which is like 99% of the time, then it would not fire again before any Facebook scroll depths tag. Now it’s time to preview the container again and see everything in action. Okay, let’s head over to the website.

Scroll up. Refresh the page. Let’s verify every single step by step. So first of all, our Facebook base pixel has fired once but our Facebook scroll depth tag has not fired yet, which is expected. Now let’s scroll down. Okay, so we’ve already passed 25 and 50%. And we can see that Facebook scroll depth tag has fired two times. If we click on the trigger events, we can see that the tag has fired once in this trigger, and again in this trigger. It has not fired on page view, not fired or dom ready, not fired, or Windows. It only fires in scroll depth and scroll depth. And if we click on summary, we can verify that it’s been fired two times. And because we’ve set our Facebook base pixel to fire just once per page, it has fired just one time. Otherwise, it would fire three times already. Let’s also verify why our facebook pixel helper. And we can see the to scroll events have been fired. We can click here to see the details. This one has fired. This one is the one that’s been fired under depths of 50. This one is the one that’s been fired under the 50%. And this one has been fired and 25%. If we close them and scroll down, even more, we should have another one again, and another one here which shows the scroll depth of 75%. Another way to verify the actual values that have been using the tags is to click on the trigger and then click on the tag itself to view the tag properties. Okay, so now that we have created these tags, and verify that they’re firing properly, let’s head over to Facebook ads interface and verify that these events are being received by Facebook as well. Okay, so let’s click on test events. And here, we can see the events that are coming and being received by Facebook in real-time. So let’s refresh the page. Scroll down to the bottom of the page.

And see if the events that we are sending from here are being received by Facebook properly. So here we can see the three events have been fired. Three have been received by Facebook, as we see in facebook pixel helper anyway. And now let’s head over facebook pixel. And here we can see these events in real-time. One page view and three custom events. If we click on any of these events, we can see some more info, like the URL of this event. We can see the event parameters as well. Now that Facebook is receiving these events, we can use them to create custom audiences. We can do it by clicking custom audience, create a new custom audience. And instead of all website visitors, you’re going to use our new event scroll which is already appearing here. Set how many days do we want people to remain in our audience and even refine it by the actual scroll depth threshold. We can set the depths to be greater than 49 which includes all the people have a scroll down either 50% or 75%, and will ignore those who just scroll down 25% or less than 45% down the page. Then we just need to give our audience a name. And created it.

In this video, we’ve seen how to track scroll depth on a page through Google Tag Manager and report it to facebook pixel to a custom events and then create a custom audience from people who are scrolling down more than a threshold that we defined. So we can use an audience for retargeting or segmentation purposes. This is Ahmad and thank you for watching. Bye.

All right, so there you have it. This is how you can create full scroll depth tracking really with the facebook pixel. A little bit help of Google Tag Manager and then you will be able to create your audience based on this dynamic data that we now fed into the Facebook pixel. Isn’t great? Well, if you have any questions then please let us know in the comments down below. We also have some links that could be helpful to you in the description. So check them out as well. And if you haven’t yet, then please consider subscribing to our channel because we bring you new videos just like this one every week. Now my name is Julian. see on the next one.

SHOW MORE...

Samcart Ecommerce Tracking with Google Tag Manager

Google Tag Manager Ecommerce Tracking with Samcart is not quite straight forward. You will need to install certain tracking to get a complete Enhanced Ecommerce Tracking implemented. In this video I’m going to show you how you can implement GTM into Samcart to get Ecommerce Tracking, the Facebook Pixel and Google Ads conversion tracking setup.

🔗 Links:

The dataLayer for the Upsell pages: https://gist.github.com/measureschool/8ffa4e45da745b1a9b0db1ac1cbe854e
Container for upload to GTM: https://gist.github.com/measureschool/8ffa4e45da745b1a9b0db1ac1cbe854e
Samcart – https://checkout.samcart.com/referral/wYwf9Zq0/mjT5uJHTIufHB7O9

🎓 Learn more from Measureschool: https://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 and it’s tracking on to Samcart. All the more coming up.

Hey there measuregeeks, Julian here back with another video for you. Today, we want to talk about the checkout system Samcart and how you can install Google Tag Manager and tracking like Google Analytics Enhance eCommerce tracking, Facebook Pixel or Google Ads conversion tracking on to your checkout pages. Now, Samcart is a bit like a checkout builder, it’s very easy to build checkouts, and a lot of people use it for their payment gateways. So once they have marketed a product, then they want to sell it. And it’s the easiest way to do it for some kinds of products. And therefore Sam card is a quite popular checkout system nowadays. And for anybody who is doing the driven marketing, you obviously want to also track your conversions and get more insights on how your users are using the checkout. But this whole checkout builder system comes with a little bit of a downside because we don’t get full access to the actual website. We can’t mess around in all the codes. So we need to utilize the form fields that they give us in the back end, and fill out our fields correctly. So we can be doing conversion tracking correctly. Luckily, Samcart is quite good at giving us some fields that we can fill out. But it was also a little bit of a problem doing this with Google Tag Manager. So today, I want to show you a definitive guide on how you can install Google Tag Manager onto a Samcart page. So you have full enhanced ecommerce tracking. You will have the ability to deploy a Facebook Pixel and Google Ads as well. So we got lots to cover. Let’s dive in.

Get started, we want to install our Google Tag Manager codes on to our Samcart pages. So we head over to Google Tag Manager. If you have already an account set up that you should be able to find your container snippets by clicking on the container ID up here. And we get the codes that we need to install in the head and the body within Sam cart. We can do this by going into our profile section here. And under Settings, we have two fields that are the embed HTML script and header and then one in footer. And this is where we’re going to place our script because it will be installed on all the pages of our SoundCloud installation. So let’s copy these in here. And the body part will go in the footer, and then simply click Save. And now we want to try this all out. Let’s go over to our products. I have some test product set up here already.

And let’s look at this product in preview mode. We see here Google Tag Manager is already loading in the preview and debug mode because I’m here already in the preview mode. If you are not in here, you can click on preview, this will open up this little window. And you should see the Google Tag Manager is installed correctly. Alright, the next steps are to install our pre-configured container which I have linked up down below. So go over to Google Tag Manager in the admin section, you can import your container and just choose the container that I’ve set up for you already, which is the Samcart json we go with existing workspace, I just have one workspace here. And I’m gonna choose to override if you already have tags in your container, then I’d recommend to choose the merge option and see if there are any conflicts that need to be resolved. We go ahead and confirm this. And this will install some tags, triggers and variables in your container. And this will take care of the tracking. Now, what do they exactly do? You might know in order to fill information into your ecommerce reports within Google Analytics, you will need to have certain datalayer information that is transferred over to Google Analytics.

So for example, the product that we are viewing at the moment, the price, and so on. This is normally encoded into a datalayer. Now, Samcart has an extra advantage here because it actually gives us all the information in a JavaScript object. Just to show you, you don’t have to do this yourself. When we go into the developer tools, you can go into the console and simply type in product. And this will give us an object here where all the information that we basically would need is available. We have the ID, for example, we have the price, we have the stock level, or even the name of the product. And this is actually also true for the bump product that you can install right here, which also has its own price. Now, since this information is available within JavaScript, we don’t actually have to set up a custom data layer. We can just pull it out via Google Tag Manager, which is also based on JavaScript. So I’ve written a little custom JavaScript variable that produces the right format of the data layer and pulls out the right information right here. Then pushes this all back into our Google Analytics tag which we have set up right here for our event, enhanced eCommerce tracking view. So this is all set up. And it simply takes the data from this variable, custom JavaScript Ecom product view. So you don’t have to change anything around in terms of the data layer. Let’s have a look how this works.

We are here already in the preview and debug mode, reload. And we see our Google Analytics event ee view already fired, what does that mean? Well, let’s open up our developer tools. And I have a handy tool, which is the GAGTM debugger, which gives me this view and I can look into what was sent over to Google Analytics. And then the enhanced ecommerce tracking section, you can see they were product detail view sent. So of our primary product, and our bump products or one on one coaching call, GTM Essentials training, and impression lists. So we have the list items in here as well. These are directly pulled from our product, so you don’t have to enter any custom information. This all sends over a Google Analytics event. So we should already see this in the events. No, we don’t see it. Let me just check out we probably forgot to change our Google Analytics ID. Down here we have our Google Analytics settings variable which is a random number, right now. We would obviously need to change this to our tracking information sent to the right account. So let’s copy that. And put that into our tracking ID right here as well. Change the name. Refresh this and I’m going to reload our page again. It’s going to send over the information hopefully. And then in our real-time reporting, under events we see a new event has entered.

Now, the event name are really unnecessary. But since we are sending this with an event, we can attach certain information that gets transferred to the ecommerce tracking, which is then filled out. This might take a while to populate anything between half an hour and 48 hours. So far, everything went automatically, especially on this checkout page as first checkout page. But there is a problem because if you’re using something called the funnel feature and up sells, then you will need to implement something more onto your page. What does this mean? Well, let’s go through here. And I have this actually set up for the store as well. Going to buy this product and place the order. I’m actually going to an upsell page. Now this upsell page contains a product. And you can choose to add this to your order. Or say no thanks. You can set this up in your upsell tab here where you can set up the product that you want to sell. And also can setup the funnel, I have just a simple funnel with one upsell. The problem though is on this page itself, when we open up the developer tools and type in our product product, then we see this is not actually available, like on the last page.

So we can’t pull information out of the system. It’s not dynamically transferring this over to JavaScript and we would not be able to access it via Google Tag Manager. So we will need to code that information in ourselves. And this is where a bit of the downside is of Samcart because when I look at the upsell right here, go into my upsell, there is no custom HTML field, there is no way to fill the information. Although I give them here the product that it’s connected to, to pull all that information dynamically. And we will need to play some extra code. And this is only possible in this upsell HTML window. To be honest, this upsells HTML window cause me a lot of grief because it has a very weird behavior when you change something around. We will need to go over to the source panel here and enter some custom JavaScript. What would this JavaScript look like? I also going to give you this code down below, you can post this into all your upsells. This is a little bit of code which we, unfortunately, need to fill out by ourselves. And once you have posted or change any code around, you cannot simply click on save changes because it will overwrite the changes, somehow. You will need to click first on the source and then click on save changes in order for these changes to be saved. Something that took me a while to figure out. So now we need to alter this code a little bit. And we need to alter us with the stars here the product name, the product ID and the product price. How would you find those? Well if you go up here to our products, I’ll open this in a new tab. So we have this available, we’ll go over to our advanced integration scores which has all the information available. We want to have the product name, the ID, which is up here in the URL, and obviously, also the price. So let’s start out with our ID right here. Copy that and put this into the right place right here without the stars. But it needs to be within the quotation marks.

When I change over here and copy the name, you might see that our price has already changed again back. Somehow this editor doesn’t retain the values. So again, I’m gonna copy the product ID, I will put this into the price field here. And now I’m going to go to source save, go back to source. And let’s put in our product name. This time, it didn’t change it. So product name, again, source, Save Changes source. And last but not least, our price. Down here, whoops, I changed around the price.

And the ID field.

So let’s put this in like this. Okay, so now we have this information on here. And it will build the data layer push for us based on this information that we have on here. Unfortunately, if you have a lot of these upsell products, you will need to install this information into all the upsells that you see in the upsell section right here. There is no way to pull this out dynamically. Now let’s see how does it actually behave. We’re going to go back to our upsell, reload this. And we can see our event ee view again fired. We’re going to open up our developer tools, look into GTMGA debugger, reload it again and see what information gets sent over. Yes, our information now gets sent over to Google Analytics. Again, we should see a real time event that happened for our product. So this gets tracked correctly now.

And the last but not least, the page that is most important, we add this to my order, we get to the thank you page, where we have our three products that we have bought. And again here this information is dynamically available through our JavaScript object. So we’ll be able to send this on via Google Tag Manager, we have our Google Analytics event transaction. So again, here our transaction should be filled. And all the information and all the products that we have bought are now sent over as far as I can see in the GTMGA debugger. Here we go, we have our purchase, and all our three products that we have bought. So here’s again, something you don’t have to necessarily implement anything, you just need to do this on the upsell pages. So now that all the information is sent over correctly, we should be able to see this inside of our enhanced ecommerce tracking later on here under conversions. And ecommerce reports, we should have our sales performance, product performance, and product list report. Now, be aware that this is not a full on enhance ecommerce tracking installation because enhance ecommerce tracking also has impact on your homepage or the product pages that you display the product on. So this will not all be filled. But the most important information like the sales information is available in these reports. So since this is working, and the information has been sent over correctly, I went ahead and built some more variables like the Google tags param which we would need for Google ads, and the custom product IDs which would Facebook would need. So I’ve built some extra tags, you can choose to keep them or delete them from your installation, which would be the Google Ads transaction, the Google product remarketing. I also installed the conversion linker for completion sake. And for Facebook, we have our base pixel with our event and our transactions. Now, please be aware that you will need to change around your ID here. So where this information gets sent to, in order to install this correct, the same is true for our conversion ID in Google ads. Don’t leave this just running because then there will be a lot of data sent to my test account. In the end. If you are happy with your installation, you can go ahead and submit this as a version.

Give it a name and publish this. So it goes live to all your users. And this is how you can install Google Tag Manager and your tracking on to the samcart system. All right, so there you have it. This is how you can install Google Tag Manager on Samcart and deploy the tracking like Google Analytics, Facebook ads, and the Google Ads conversion tracking on to your page. As mentioned all the codes and the container download will be linked up in the description below. So check that out as well. And if you have any questions, please leave them in the comments. Now if you liked this video, then I’d love for you to hit that thumbs up button and also check out our different videos that we have linked up right here. Now my name is Julian, til next time

SHOW MORE...

How to Install the Twitter Universal Website Tag with Google Tag Manager

The Twitter Universal Website tag provides Twitter Conversion Tracking and Twitter Retargeting conveniently through one Tag. If you have Google Tag Manager installed you can now easily implement it. In this video, learn how you can set up Twitter tag properly and also define your audience and conversion tracking.

🔗 Links:

Twitters ads – https://ads.twitter.com/login

Twitters offical documentation – https://business.twitter.com/en/solutions/twitter-ads/website-clicks/set-up-conversion-tracking.html

Google Tag Manager – https://tagmanager.google.com

🎓 Learn more from Measureschool: https://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

Twitter has their own tag, the Twitter universal website tag. And in this video, I’m going to show you how you can install it via Google Tag Manager. Now, my name is Julian and you’re watching measureschool.

All right, today our journey starts in our demo shop where we already have Google Tag Manager installed. And we now want to add to this our Twitter ads tracking. So obviously, you would need to have a Twitter account, we have one here at measureschool. So follow if you want to stay up to date with everything that we do. And connected to this account is our Twitter ads account. Now, just like in Facebook, you can get your Twitter pixel by going to tools and then conversion tracking. And here we have our universal website tag that needs to be installed. And you can view the code instructions right here. Here’s the code that we need to install through Google Tag Manager. But really all that we need is this little part of our Twitter universal website tag which will identify us to Twitter. So let’s copy that and go over to Google Tag Manager. And here we’re going to create a new tag. This will be our Twitter ads tag. It’s our universal tag which we’re going to deploy on all pages.

As a tag configuration, we can choose a template here from Twitter, which is already in the system to the universal website tag. And we put in our pixel ID which was these few characters from our pixel. Now, we can select different events. But since we are the deploying on all our pages, just go with page view and not put in anything specific right here. Let’s choose our trigger, which is all pages trigger, and save this.

Refresh our preview in debug mode, go back to our page, refresh that.

And we can see we have our Twitter ads universal pixel for tag deployed. Now there is actually a Chrome extension that you can install in order to check whether this was fired correctly. And this is what I have installed here, the Twitter pixel helper. And it shows us that the Twitter pixel has fired successfully. Unfortunately, there is no way in Twitter to see any kind of debug information or if this pixel was sent over correctly, at least not in real time. What you would need to do is either set up a new conversion event with the universal website tag in order to see if conversions are tracked correctly. And you can specify like in the Facebook pixel, as well, if you want to filter this down to an exact URL. Or you would need to actually set up an audience. Again, you will need to utilize the website visitor collection tag here, which is based on the universal website tag which we have just installed. And deploy this on the page and then see whether data is coming through. But this can take a while till the audience needs to be populated by your website tag. So no real way to verify this within Twitter ads directly. Our best bet is to utilize our Twitter pixel helper. Now that we have verified this, at least with the pixel helper and our debug console; let’s go ahead and actually publish a version by going back into our Google Tag Manager account, clicking on Submit and giving our version of name.

And then publishing this so it goes live to our users.

All right, so there you have it. This is how you can install the Twitter universal website tag onto your website with the help of Google Tag Manager. Now you saw a little more options within the Google Tag Manager interface on how you can configure this tag. I will just leave it up to you to try this out and build your conversions for your audiences of this pixel. I’d love to hear from you if you want to have a closer description on this whole feature of how to track conversions. And let me know in the comments down below and we could do another tutorial on it. Otherwise, why not give us a thumbs up if you liked this video and also subscribe to our channel 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...

How to install the LinkedIn Insight Tag with Google Tag Manager

LinkedIn Insight tag can help you track your conversion, website demographics and retargeting for your LinkedIn ad campaigns. With the help of Google Tag Manager, let’s go through the easy steps on how you can properly add this tracking code snippet to your website.

🔗 Links:

Google Tag Manager https://tagmanager.google.com

LinkedIn Campaign Manager https://www.linkedin.com/ad-beta/login

LinkedIn Insights Tag Documentation https://www.linkedin.com/help/lms/answer/65521/the-linkedin-insight-tag-frequently-asked-questions?lang=en

🎓 Learn more from Measureschool: https://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

Google has their Gtag. Facebook has their pixel and LinkedIn as their Insights tag. Today, I’m going to show you how you can install this via Google Tag Manager onto your website. My name is Julian, and this is another episode of measureschool.

All right, welcome back to our demo shop where we want to install our LinkedIn tracking. Now, to do this, we need to have Google Tag Manager already set up. So this is the case on this page, we are in the preview mode. So Google Tag Manager is installed correctly. And you will need to have a LinkedIn account that you can connect to your ads. By the way, we also have a measureschool LinkedIn page that you can follow to stay up to date with what we do here. But inside of your Linkedin account, you can go over to this work tab here, go to advertise. And this will put you into the LinkedIn campaign manager. So here we have our demo shop account which we have already set up and we’re going to go ahead and click on account assets up here to install our insight tag. The first thing that you should do here is to add your domain. Now I’ve already done this, as you can see here, this is important. So we’ll be able to later check if our tag is working correctly. Now let’s go ahead and click on this manage insight tag to see our actual tag. And if you click on this first point, I will install the tag myself we get our code that needs to be deployed. Now, all we need from this code is actually this number right here. So I’m going to copy this. Unfortunately, we can’t copy the number. So I’m just going to go ahead and open up the developer tools. Here we have our console, just going to paste this in here, just so I can copy out this number that we would need. Close this again and go over to Google Tag Manager. In order to install the Facebook inside tag, we just go to new tag gives us a proper name.

And in the tag configurations, we already have a tag template available to search for it. And here we go. We have our LinkedIn Insight tag. And all we need to do is input the partner ID. Now there are some more settings here. But we can safely ignore them as we don’t want to customize our tracking in any way. And all we need to do now is to deploy our tags on all pages. LinkedIn insights tag will provide us with information about page views. Will also let us retarget and to conversion tracking. So let’s see if it works by refreshing our page in the preview and debug mode, going back to our page right here. And we can see our LinkedIn insights tag already fired. Now there is no tag extension that we can install in order to see if LinkedIn is working correctly. So we need to trust our Google Tag Manager console down here that it deployed correctly. The ultimate test would obviously be inside of our LinkedIn campaign manager if we see that there would be a signal that it was sent. Unfortunately, this takes a while. So we’ll be able to test this right now. Depending on your website traffic, as it says here, up to 24 hours. So you might want to check back later if there has been a signal received by LinkedIn. With that in place, we can go ahead and now deploy our tracking to all our website users by going to the submit button, entering a version name.

And publishing this to all our users. So it goes live on our website. And this way, we have installed the LinkedIn insight tag via Google Tag Manager on to our website. Now, what if you would like to install conversion tracking for your LinkedIn ads campaigns. This is also something that’s possible. Let’s go over here to conversions. And we can create a conversion by entering our conversion name, for example, the thank you the purchase of a product, let’s call this purchase.

And entering our settings, we choose a type here, for example, purchase. And we can estimate a conversion value that we want to enter. Now, unfortunately, we will not be able to port this over dynamically. So you could put an average value in here or nothing at all if you don’t want to put in a value, that’s fine as well. You can then choose the attribution window, select the campaign that you want to attach this to I don’t have a campaign set up right now. And then define whether you want to set this up through the insight tag, which is already installed on our page. Or want to deploy a specific pixel that fires when the user tags this specific action. If you go with the first option is pretty easy. But you can only track if somebody views a page. So for example here, we have ecommerce store. So I’m just going to go through a conversion really quickly.

And we get to our order receipt page, somebody has bought something. So this is the URL that we could now utilize in order to tell our linked and campaign manager that we want to count it as a conversion. So for example, we can choose different methods here, have the URLs that contain a specific text in our case, would be auto receives because the other parts will change over time. So order receipts would be fine. And we can create a conversion. So every time a user clicks on an ad, then converts gets to that page, it will be counted as a conversion. If you want to be a little bit more specific and use the capabilities of Google Tag Manager, we can obviously also utilize the event-specific methods. So let’s go ahead and set up a second conversion here, which will be again, a purchase, which leave everything untouched. But this time, we want to install an event-specific pixel. And this will give us an image tag.

Now we’re going to copy this, just be aware that this image tag is specific to the conversion that we set up. So if you want to be in any kind of way dynamic, you won’t be able to do this. This will only count a conversion for this one that we have set up right here. And what do we do with this code? In Google Tag Manager, we can go ahead and add a new tag. And this tag, this time is not a LinkedIn insights tag. And unfortunately, there’s also no specific event specific pixel that we can use for LinkedIn. So we will go with the option of the custom image tag right here. And we simply enter the image URL. Now, we don’t need this whole HTML that is around the actual URL of our image. So we’re going to get rid of that, which starts right here after the source attribute, let’s get rid of that. And in the end, we also get rid of the HTML here. So this part would be our image URL that we want to fire when the user succeeds. If we wanted to recreate exactly what we have right here, can look into our preview mode. And we see there’s a custom event here called GTMForWP.ordercompleted, this is custom to my website because I have set up the Google Tag Manager for WordPress plugin. And based on that, I can build a custom trigger. So I’m going to build a new trigger that will fire on a custom event, which is this GTMForWP.ordercompleted, let me just see the exact event name right here. I’m going to copy that. And as the trigger configurations, I’m going to choose the custom event. And he going to put in GTMForWP.ordercompleted. Now, this is just an example, it might be that you want to for example, use a button click as a conversion goal or a form submit, then you would obviously need to change this trigger around. Let’s get this whole tag a name. This is still our LinkedIn tag. This time, it’s an event-specific tab for our purchase. Let’s save this and refresh and go back to our page, Now, we will need to go through a conversion again.

And here we go. We get to the order receive page. And we see our LinkedIn event purchase pixel has now fired it’s a custom image tag. And that sends the information over to LinkedIn. Again, you need to be patient here in order to see data showing up. Especially the conversion tracking only works when you actually have clicked on a LinkedIn ad, and then went through and purchase the product. So that’s the only reliable way to ensure that this is actually working correctly. So since we only can see this in our preview mode, we would actually need to deploy it to all our users by again submitting a new version, publishing this and now goes live on our website.

All right, so there you have it. This is how you can install the LinkedIn ads insights tag. I need to get used to the names of so onto your website with the help of Google Tag Manager. It’s such a pity that we aren’t able to put in dynamic values such as our conversion value into this tag so Linkedin would actually pick that up and put it into our reporting. What do you think? Let me know in the comments down below. And as always, if you liked this video, then why not give us a thumbs up and also subscribe to our channel 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...

How to use a dataLayer variable to pull data from the GTM dataLayer [Quick Tip]

If you have GTM dataLayer on your website you can extract data from it and make it available in a Variable in Google Tag Manager.
In this video, let’s look out how we can utilize the data layer variable to pull out values from a data layer by knowing the key and the nested values.

🔗 Links:

DataLayer: https://support.google.com/tagmanager/answer/6164391?hl=en

🎓 Learn more from Measureschool: https://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

Hey, there measure geeks. Julian here. Back with another quick tip video. Today, we want to talk about how you can pull out data from the data layer variable. Now, if you’re familiar with data layers, you know, you can push them in the background of a page and they look a little bit something like this in terms of the code so the user wouldn’t see a data layer push actually happening. But this data is now available within the data layer which is Google Tag Manager’s central repository of structured data. And we can send information into the data layer by different methods. Once they are in the data layer, you should be able to see that information in different ways. So for example, if you have the preview and debug mode open if you go to the data layer, you should see the information that was pushed into the data layer here under the data layer tab. You should also be able to see a push, depending on how it was pushed in the developer tools under elements.

Let’s look here for data layer, we have different data layers here. And here we go. This is the formation that we pushed earlier on this page. Actually, it’s here. And so you should also be able to see it in the console. If you simply type in data capital layer. In here, we open up the data layer array. And here we have our different objects. Now each object has key and then value pairs. So you always have this pair of a key, which in this case, would be event. And the value, in this case, would be blog post view. Now what if you wanted to pull out one or the other value from the data layer and make it available to your tags or your triggers, you would need to utilize a data layer variable. For that, you will need to know the key in order to pull out the value in our case it would be the author, and we should be able to pull out the value of admin. So let’s go over to Google Tag Manager on the variables, we simply going to build a new data layer variable, I’m going to name this with pretending DMV, and then my data layer would be for the author.

And now I’m going to go into the configurations and choose data layer variable. And here I will put in the data layer variable key. It actually says name here. But I find this a little bit confusing. I would rather remember this as key. And this key needs to be corresponding to whatever we have in the data layer as this first key that is tied to our value. So in our case, it would be author. And we can put in different configurations. You don’t really need to care about those unless you have a specific reason for it. Let’s go ahead and save and try this all up. We’re just going to refresh our previous debug mode, and then go back to our page. Reload that. And now under variables, we should be able to see our key. Now it’s always important variables are resolved based on these events. And the events are really like little checkpoints that you have on the page. So if you want to utilize your variable, your author variable upon page view, you would see that this is still undefined. On the second event here, we would see that now the dlv author is actually filled and it will stay filled unless it’s overwritten by the later events.

So if you would like to use this later in a trigger or a tag, be sure to fire it on the right event. So your data layer variable gets filled. Now it’s as easy as that, you will just need to know the right key, and then input that in your data layer variable to pull data out. But not all the data layers look like this. This is a pretty flat data layer. So you will just have a key and then a value. But you can actually nest these data layers within each other. So here we for example, have the GTM key which holds an object and I can see this in these curly brackets. And within this object, there is another key value pair. You might be familiar with a data layer that comes from an order received page, for example. Here we have the enhanced ecommerce tracking data layer. And this is pretty nested already. So we have our data layer object of first one, then we have within that our data layer ecommerce within ecommerce. Within that we have another data layer object, and then we have different keys. And within that, again, data layer object. A little bit hard to read within the preview and debug mode. So let’s open up our JavaScript console here.

And I’m going to look into the data layer by simply inputting again data layer, so we have four objects right now. And we want to look at this ecommerce which is up here. So we have this triangle which we can click on to open up. And here we can see the nesting pretty well at work. We have an ecommerce data layer object and we can open that up. We have within that a currency code and a purchase. Within the purchase, we have an action field within the actual field, we have, for example, the order ID in this case, it would be 309. If we wanted to pull out this 309, it would not be enough to just know the key here, the ID. We would actually need to utilize a special notation which is the dot notation. In order for Google Tag Manager to go down the tree and find the ID within our object. What would this dot notation look like? Or if you hover over it, you already see here, ecommerce purchase action field ID. And in between those days I was a dot. And this is exactly what we would need to write into our data layer variable if you wanted to pull out the order ID. So let’s try this out. Let’s go over two variables and build a new data layer variable for order ID.

And we go again to data layer variable. And we’ll start out with our first object here which was ecommerce. And I will separate this with a dot further into this ecommerce object, which the next object would be purchase. dot and here again, action field. And here we get to our ID. So we’ll put this one in here as well.

Let’s test this all out, Save and refresh, I’m going to reload this page, unfortunately, I will need to go through another another order right here. And here we go get to the next order receipt page. And if I click on the right event here, let’s go with the page view and I go to variables, you should be able to see now our dlv order ID was filled with our 315, which should be our new order ID that we can see right here. So it pulled out the right ID by using the dot notation to get into the nested values of this data layer object. Now, there is one last specialty about these nested object you might encounter that you want to pull out a value from a key pair that is actually inside of an array. What is an array? In JavaScript terms, it’s simply a list that is marked by these square brackets. So depending on how many products I bought here, so we have exactly two products, we should have a list of two products with some information in there. And here we go. If we had three products bought or have four products bought, this list would obviously get longer.

Now, you will need to tell Google Tag Manager explicitly that you want to pull data from the first product or the second product. So for example, if you wanted to get the product price here, we would need to access this array. And this would be done again with the dot notation. But this time, we will use numbers in order to find the right member of this array. Let’s try this first out in inside of our developer tools. Under console, I’m going to put in data layer again and go to our ecommerce object. We’re going to click once and then purchase, then we get to product. And here you can already see this special notation here. If I click on those, we have these numbers up here zero and one. And this is how our area is actually counted the first numbers zero, the second number is one. So if I wanted to get the product price for this first product, I would need to use the dot notation with zero and then our price key. So let’s try this out. Go again into our data layer variables, create a new one, product price of product number one and go with the data layer variable. Put in the same thing again, it begins with ecommerce dot purchase dot product this time.

And then as with the dot notation, we’re going to go into the first product which is zero and get to our price. See if I didn’t make any mistake, that should do it. Yes, save this and refresh. And I’m going to go through another order here.

And we get to our order receipt page. Our happy ninja one is the price is $35. So now if I go to the variables, if you done everything correct should see our $35 right here. It pulled it out out of the data layer for this first product. Obviously, you will need to repeat this for your different other products if you want to pull out the price of those. And that’s already with our little quick tip video. You now know how to utilize data layer variable to pull out values from a data layer by simply knowing about the key and then the nested values that might be within the data layer and how to structure your key in order to find the right product within a nested data layer.

Hey there it’s me again. Thanks for checking out our quick the video. Was that helpful? Did you understand something not quite? Then I’d love to hear from you in the comments down below. But if you liked it, then why not give us a thumbs up and 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...

How to Scrape Data Using Chrome Dev Tools and GTM [Quick Tip]

Chrome Developer Tools have several uses. In this quick video, let’s go through the steps on how you can utilize the Chrome dev tools to build a custom JavaScript variable that can pull out any value from the document object model.

Use .innerHTML to get the inside of the DOM node

Full code template for the custom JS variable

function(){
return document.querySelector(“CHROMEDEVTOOLS”).innerHTML
}

🔗 Links:

Chrome Developer Tools https://developers.google.com/web/tools/chrome-devtools/

🎓 Learn more from Measureschool: https://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

Hey, there measuregeeks! Julian here back with another quick tip video. Today, we want to talk about how we can utilize the Chrome dev tools to build a custom JavaScript variable that can pull out any value from the document object model. So for example, if I wanted to pull out this product name here, how could I transfer this into Google Tag Manager? Now, the obvious way is to utilize a data layer. This is the most reliable and standard way to send data into Google Tag Manager. But if you don’t have a developer at hand, or can install a data layer, you might want to utilize the scraping method. And this is the method of pulling out values directly from the document object model. And this comes with some downsides. Because if the site changes in any way, your variables and with that the data might not work anymore, and it’s not as consistent. So just be aware once you utilize this method and no of the downside.

So how can we pull this in with the help of the Chrome Dev Tools? Simply go to the element that you want to pull in, we have the inspect button on the right click that you can click. It will open up the developer tools in the elements pane. Now, here we have the element that we have selected. If you right click on this title, we can go to copy and click on copy JS path. Once we have clicked on JS path, we can go over to console and try this all out. What this will do and I’ve just pasted it in, it will give us a document query selector. And here we have the selector that should pull in the title right here. So if you click enter, you see that we now have this whole element that this JavaScript command pulls it. Now, what we want to get from this is actually the name here in between. And we can append a simple dot inner HTML to get what is in between the HTML tags. This is what we want to pull into Google Tag Manager. But before we go the next step, actually want to go to another page here and try this command out again. I’m just going to click the up arrow to get the last command back and press ENTER again, and we get an error. And this is probably because our query selector so what the tools have selected here is too specific to the page that we had earlier, and it cannot pull out the next product name. And this is probably because there is a product ID of 73 defined here. What we can do is to get rid of this 73 part.

Press Enter again. And here we go, we have now our Ninja. Let’s go on to the next page, see if we can get the right product in there. So it’s very important to test your scraping methods with different use cases. So you know that they work correctly. So here we go, we should be able to reliably pull this out, even if we have different other products in front of us. So now we can go ahead and copy this command right here and go over to Google Tag Manager and build a new custom JavaScript variable. This will be your custom JavaScript variable for our product title. And we’re going to go ahead and utilize the custom JavaScript variable. Now, we will need to fill this with first of all an anonymous function right here with a return statement that needs to be inside. And here we can post our text that we have copied earlier. Let’s try this all out. Save this and preview.

It’s important to know that these scraping methods normally only work on the DOM ready. So once the DOM has loaded, we’ll be able to retrieve custom product title, not on the pageview. But here, it’s already alright on a pageview apparently. Let’s go over to another product.

And see here we have happy ninja. This is the product name. If we have another product here, you can see that it pulls in the right product name. So this is how you can utilize this method of right clicking and copying the JS path. You can build a custom JavaScript variable with the help of the Chrome Dev Tools and Google Tag Manager.

Hey, there it’s me again. Thanks for checking out our quick tip video. Was that helpful? Did you understand something not quite? Then I’d love to hear from you in the comments down below. But if you liked it, then why not give us a thumbs up and 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...

3 ways to use the google_tag_manager JavaScript object

google_tag_manager is the magic command to access the GTM object in your JavaScript. With it you can access the internal data model GTM and access what is currently in the dataLayer through JavaScript. In this video I’m going to show 3 advanced ways how you can utilize the GTM object in your tag deployment.

Commands used:

google_tag_manager[“GTM-XXXXX”].dataLayer.get(“DLKEY”)

google_tag_manager[“GTM-XXXXX”].dataLayer.get(“gtm.element”).getAttribute(“ATTRIBUTENAME”)

google_tag_manager[“GTM-XXXXX”].dataLayer.get(“gtm.element”).matches(“CSSSELECTOR”)

🔗 Links:

Google Tag Manager’s Data Model (Simo Ahava): https://www.simoahava.com/analytics/google-tag-manager-data-model/

🎓 Learn more from Measureschool: https://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

SHOW MORE...

How to install Google Tag Manager on Wix (feat. Mike Sale)

Wix is a popular website builder that makes website building easy. But what about website tracking? If you install Google Tag Manager you should be able to quickly take your tracking to the next level. In this video Mike is going to show you how to install GTM on a Wix website.

🔗 Links:

Sign up to Wix – https://www.wix.com/

🎓 Learn more from Measureschool: https://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, Mike is going to show you how you can install Google Tag Manager on a Wix website. 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. But today we have Mike Sale from michaelsale.com on this channel to show us how we can install Google Tag Manager on to a Wix website. Now spoiler alert, you will need to have an upgraded account in order to do this. But if you’re serious about building your website on the Wix system then you’ve probably done this already. Now, Mike is actually gonna show us in multiple videos how you can then take the next steps of installing Google Analytics, Facebook Ads, or the tracking for Google Ads on to this account. So definitely subscribe to this channel down below because there are new videos coming out every week. Now we got lots to cover. So Mike, take it away.

Hello, Julian, thank you very much. Hi, everyone. This is Mike from Michaelsale.com. And we’re going to show you today how to install Google Tag Manager on your Wix website. So to do that, we need to validate two key prerequisites from your Wix.com account perspective. So you need to go into your site dashboard, and validate that you have a plan here a premium plan, or basically a plan that does not say free, if it says free. Under this location, you’re going to need to upgrade your plan. It can be the smallest lowest that you could possibly have. But it just needs to be not free. The other one is that you need to have your domain connected. Your domain is your website address like for example, Michaelsale.com, or in this case, Michael.sale, it will handle anything in terms of domains, like for example, that .com .net, .gov, .org,

all those will work just fine. Once those two prerequisites within Wix are met, you need to go to tagmanager.Google.com. In TagManager.Google.com will require that you actually have a Google account, that Google account will be used to login and create a business account or a company account within Google Tag Manager. So to do that, we’re going to go ahead and click Create Account. And this is where I’m going to put in my company name.

And then I’m going to go ahead and create a container, that container is your site. In this case, it’s going to be Michael.sale, right? And what kind of container will you need for your Wix website? Well, guess what? It’s a web container, no big shocks there. Let’s go ahead and make sure that we select web container. And that will now allow us to create both our account that’s our company, as well as our container which is our website.

We now have to go ahead and select the terms of service agreement.

And now Google tells us that we need to install Google Tag Manager by copying and pasting in some code into our website. Wix has a special integration just for Wix that allows you to only take the container ID and copy that.

You can also find that tag that container ID right here. And we’re going to go back over to Wix.

Now that we’ve got both our tag manager container setup and our Wix connected domain, and premium plan, we can go over to where it says marketing tools. Under marketing tools down at the bottom, you will see marketing integrations. Under marketing integrations, you’ll see Google Analytics Facebook Pixel, Google Tag Manager. Google Tag Manager allows us to manage all of these other tags and more beyond what may be set up for marketing integrations within your Wix website. So we’re going to use Google Tag Manager to do that. So we’re going to connect Google Tag Manager, as you see up in the upper right. Click that and it will ask you for your tag manager ID basically your container ID. We’re going to paste that in and hit save. Now,

our Wix website is connected to that particular container. What that means is that that snippet of code Wix is actually taken that snippet of code and put it into place for us on our Wix website.

Now, we need to validate and understand if we actually have that Tag Manager properly installed on our website. So right now this is this is the plain Jane website that I’ve set up just for this demonstration.

And we’re going to go into a special mode that allows us to see

what it would be like if we were to publish this particular setup or this initialization on our website. So to do so we’re going to go ahead and go into preview mode. Preview mode is exclusive to this particular web browser. So now what we’re going to need to do now we’re in preview mode, we’re going to go back over to our website, and we’re going to do a hard reset. So we’re going to go ahead and reload the page.

And what will pop up at the bottom here is the Tag Manager preview window. This allows us to look not just at whether or not we’ve installed Google Tag Manager. But have we set up the tags within Google Tag Manager correctly and are they firing where we expect to fire them at what events we have all that good information. So understanding this will show you that there are no tags. But we can go ahead and set that up right now in Google Tag Manager. The other way we can validate and verify this is using something called the tag assistant. This is a Google Chrome assistant, Google Chrome extension. And Google Tag assistant will actually tell you Yep, when I look at this, and this is only in the preview mode, I can actually see that this is up and running, that Tag Manager is there. And it does not currently have any tags but the Tag Manager is installed. And you can see that this is the code snippet.

And we can now go back and turn off preview mode or leave preview mode.

When we do that, what you’ll find is if you go back over to our website, and we reloaded again,

you’ll see that the Google Tag assistant first of all the window down below that tells us about what things would be like if we were to publish this container is gone. And number two, you’ll see that Google Tag Manager is there. But it is it’s it’s not quite correctly set up something’s wrong.

So we need to go over to Google Tag Manager. And we need to publish or submit our container. So now that we’ve seen it in preview mode, everything is working as we expect, we’re going to go to submit this particular container. And in this case, we’re just going to initialize the install of Google Tag Manager.

You can put anything you want here in the description of what it is. And when we hit Publish.

Now, we’ll see that we have this version that has been published. Tells you when, there are no tags installed yet. We can install tags for Google Analytics.

You can see those tags right here. Google Analytics, Google Ads, remarketing. There’s also not just google tags, but for example, the

Facebook Pixel, LinkedIn, and a variety of different tags that have nothing to do with Google whatsoever. We’re not going to do that yet. We’ll do that in a subsequent video, we just want to verify that the live version of Google Tag Manager is now running on our Wix website. So we’re going to come back over to our website, do another hard refresh. And now what you could see is the Google Chrome tag assistant is showing us that we do have the Google Tag Manager is now in a green state and is working properly.

Next, we will need to go ahead and add new tags, for example, Google Analytics. And Julian, I know that you have plenty of videos and tutorials that will help people understand how to do that. So at this point, I’m going to go ahead and hand it back off to you. Thanks, everyone, Mike from MichaelSale.com signing off. Bye.

All right, so there you have it. This is how you can install Google Tag Manager on a Wix website. Thank you, Mike for explaining this to us. And if you want to follow along with the next videos that are going to come out in the series, then definitely subscribe to our channel right over there. Now, my name is Julian. See you in the next one.

SHOW MORE...