Change Links (Search & Replace) with Google Tag Manager (Part 2)

GTM can help you dynamically change links on a website with the help of JavaScript. In the last video, we’ve learned the underlying technique. In this video, I’m going to show you how to search through all the links on a page and replace certain parts. This is useful to redirect the user to another page.

🔗 Links:

Custom HTML for Search and Replace https://gist.github.com/measureschool/a7d6b3aede48acd1ec05471958510e5e
Container Download: https://measureschool.com/wp-content/uploads/2018/12/ChangeLinks.json
Geolocation with Google Tag Manager – Use the users Country or City in your Analytics
https://www.youtube.com/watch?v=S7VTOiff4YU

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

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

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

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

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

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

Welcome back. Now that you have learned how to select links with the help of JavaScript, and change them around and know the basic technique underlying this tracking deployment, we can go into some more practical examples. Where would you actually use this? As you know, we have some Amazon links here and they lead to amazon.com. What if the user isn’t from the US and doesn’t have an amazon.com account? Just like myself, I’m from Germany. So I should have a better experience based on the country. Now, you might be aware of a video that we did a while back that utilizes a geolocation plugin, which I’ve here also deployed a listener with a geotag, and I now have the information available where this user that is visiting the website is actually from right now he is Germany. So wouldn’t it be better if I know this inside of Google Tag Manager to send a user on to the de domain, in our case, that would be amazon.de instead of amazon.com? Well, we can dynamically replace that link based on this geolocation attribute inside of Google Tag Manager. We need to extend a little bit of our JavaScript, I have already prepared this a little bit. So if you go here to link replace, we have a tag here that actually takes again our links with our query selector of Amazon look through them. And we have some more configurations here. We need to put in a search string and a replacement string, and we’ll go through all the links and replace whatever we have entered up here. In our case, that would be .com/ just to make it really clear, and we want to replace this with dot de/. Now, before we save this we actually need to attach a trigger. It’s important that we need to have certain elements already available. In our case, it would be that the DOM is actually ready because we want to make sure that the links have loaded so we can change them around. And also we have that geo information available inside of our data. Since the geo dataLayer variable is later on. So here’s the fourth event in the dataLayer, we will utilize that to fire our tag.

Let’s go ahead and build a new trigger on the geo event where the country is Germany. Now, we’ll utilize our custom event here. Since it’s coming from our listener, so the geo and only when our dlv country equals Germany.

Let’s save this and try it out. Whoops. Right now it’s still paused.

Let’s refresh, go back to a page and if the users from Germany we should now see all our product links leading to Amazon.de.

So we have successfully geolocated the user and then led him on to the desired destination based on where the users are from. This is how you could utilize such a technique to replace a link or at least part of the link inside of your webpage. This script will be available in a download down below in the description. In the next lesson, we’re going to take a look at how we can attach something to a link to pass on tracking information to another page.

SHOW MORE...

Change Links with Google Tag Manager (Part 1)

Google Tag Manager can be used to change Links dynamically with the help of some JavaScript. This can be particularly useful when it comes to changing links dynamically based on the users’ source, location or other data.

In this first part, we are going to have a look at the underlying JavaScript technique that let us select and change a link.

🔗 Links:

JavaScript used: https://gist.github.com/measureschool/26a1612b2350712f19da2d9bf0150f3d

CSS Selector Attribute Selectors: https://css-tricks.com/almanac/selectors/a/attribute/

How to change a Link via JS: https://stackoverflow.com/questions/5785833/how-to-change-link-hrefs-via-javascript

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

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

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

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

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

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

This video I’m going to show you how you can change links around with the help of JavaScript and Google Tag Manager. This can be particularly useful if you want to pass on information on the URL to another website through the link. All and more coming up right after this.

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And if you’re new to the channel, we do marketing tech reviews, tutorials, and tips and tricks videos so if you don’t want to miss out, click that subscribe button. Also that bell notification icon so you don’t miss out on new videos. Now today, we want to talk about how you can change and replace and attach something to a link via JavaScript. And then also with Google Tag Manager. When would this be useful? Well, if you want to attach something to a string that wasn’t in the original link, you can do so with Google Tag Manager. It’s particularly useful if you want to pass on information that is outside of your website to a third party tracking tool. So for example, to an affiliate program. You could attach an affiliate code to the link URL, you could also try to replace something in the URL. Everything then numerically through Google Tag Manager. This can be super useful. And I’m going to show you some cases in these videos. Now the tutorials got a little longer than I expected. And that’s why I broke them down. In this first video, we’re going to talk about how you can actually accomplish this with JavaScript. This is the underlying technique that will use an all the subsequent videos. So stay tuned for the second video where I’m going to introduce some use cases where you could be using the Replace Link functionality or the Attached Link functionality in future videos. We are particularly working here with affiliate links from Amazon. So it should be quite interesting for all of you affiliate marketers out there. Now, we got lots to cover so let’s dive in.

Welcome back to our demo shop. On this page, we have certain links that we want to change around for tracking purposes. Now, these links will be this by-product link, it takes you over to Amazon, we have three more links of these we all want to change. Before we implement any kind of tracking into Google Tag Manager, we should try our JavaScript first. So we know it’s working correctly. Now, how would you change a link with the help of JavaScript? Let’s try this out in our developer tools first. Inside of Chrome, you can go to your modules here and then your developer tools. This will normally open up the elements pane which will show you the HTML markup of your page. Now, we are interested in this by-product link. And we can utilize this tool here to hover over and click and we’ll see how it’s marked up in our HTML. This is a pretty standard HTML link AHREF. And the AHREF attribute, we have our URL that the user will be led to. Now we want to select all these elements that have actually Amazon in them. How would we do that? Well, there’s a handy command in JavaScript called document.queryselectorall.

And then in parentheses, you would put in, in quotation marks, your CSS selector. So if you wanted to have all div elements on the page, just put in div and get all the elements on the page itself. The handy thing is, if you open this up with this little triangle here, we can hover over and see where these div elements are. If you will try this out for links, we simply press the up arrow to get the last command back, and we can change the div into a. And we see all the links are now listed that are on this page 77. And if we hover over them, we see here a logo which would be this logo link up here. This is obviously not the link that we are interested in and changing. We want to get to the link that is actually on this product page. So we would narrow down our CSS selector. Let’s press the up arrow again. And this time, we only want to get links that have our URL inside of the ahref attribute. How would we accomplish this? Well, there’s a modifier that we can implement which would be two square brackets and then the attributes that we interested in. In our case, it would be ahref, the equal sign. And then in double quotation marks, we will put in how the ahref should be filled. In our particular case, I’m interested in this URL up here. Let enter this in

and press Enter. And we only get one element back now, which is our by product link. Now, obviously, we are also interested in the other Amazon links on this page. So we can modify further to include links that have the Amazon in the URL, kind of like a contains option. And the modifier for this is the asterisk in front of the equal sign. And then you just have to put in your contains niche in our case, it would be simply Amazon.

And voila, we have all the three links that have Amazon in the URL selected. Now going forward, we can utilize this link. But let’s jump back to our first query selector here, just so we can see how we can change one link first, before we change all of the other links. So here we are back to our one link. And exactly that link we want to change. Now changing links involves getting to the actual attribute of ahref to change out this URL. How can we select the attribute with JavaScript? Let’s go back here. And there’s another command we just need to change them with a dot then we enter get attribute.

And again, in parentheses, and quotation marks, we put our desired attribute in our case, that would be ahref. Whoops, since we have a node list here, we actually need to select a node first, this would be the first node.

Okay, so it would be zero. And then we can get the attribute

with the ahref command. Okay, and here, we get our link back that is tied to this HTML element. Now, if you wanted to change this, there’s another command. We don’t want to get this attribute. But we want to set or change this attribute. So we’ll change this to set attribute. And now we can utilize the ahref. This is what we want to change and put in a new value. Let’s just put in test. Now, this gives us back undefined. But what actually happens under the hood, if you go back to the elements pane here, we see that our ahref has changed to simply test. And if you click this button, we would go to our own page with a test attached which doesn’t really exist. Now, this doesn’t make much sense. But this would be the technique to actually change around a particular link. The set attribute would be set to the ahref and the link that you want to have in here. So if you wanted to make a better example, we would, for example, say, let’s send this user to measureschool.

And if the user now clicks on this my link, he goes to measureschool.com. And so we have now changed this link around. This obviously only happens if we execute this command before the user clicks the link. Now, be aware, this only happens if the user would click this link. It doesn’t happen right now, for the other links. For this, we will actually need to loop through our results. For this, we need to write a little bit more code. That’s why I’m going to go over to the sources panel where we can open up our snippets, you can find them right here. You can write your own snippet. So I’m going to open up a new snippet here. And I have something prepared here already. In this command, we utilize again, our query selector and get all the Amazon links. We save them in a variable called links. And then we iterate over these links and set the attribute to measureschool.com like we did before. But this now happens for all the links. You can press this button right here, it will execute and open up the developer tools. As we expect it returns undefined. But now all the links up here are changed to measureschool.com, we inspect them right here we see or change to measureschool.com. Now, this is how you can change all links on your web page with the help of Google Tag Manager. In the next lesson, we’re going to go through some use cases where we change links around, attach stuff to links and make your tracking better through this technique.

SHOW MORE...

Switch Google Analytics into Debug Mode automatically #GTMTip

The Tag Assistant is often times not sufficient to view information being sent to Google Analytics. You can utilize the debug version of your Google Analytics Hit, but need to activate it first in your settings. In this video I’m going to show you how you can use the Debug Variable to turn the debug mode on every time you enter the Preview mode.

#GoogleTagManager
#measure
#GTM

🔗 Links:

Preview and Debug Containers: https://support.google.com/tagmanager/answer/6107056?hl=en

Debug Mode Variable: https://www.simoahava.com/analytics/variable-guide-google-tag-manager/#19-debug-mode

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

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

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

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

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

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

Hello there. And welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And today I’m here again with a quick tip on how you can make better use of Google Tag Manager in combination with Google Analytics. And this is really when you want to get more information apart from the tag assistant here to view what information went out to the Google Analytics tracking code or to Google Analytics itself. And this is normally done with the GA debugger. That’s an extension for Chrome that you can activate. And it will give you great information here inside of our developer console.

You can reach that by going to more tools, and then your developer console and under the console log, you will be finding a lot of information of what information was actually sent over to Google Analytics. This will give you great information to debug if you have any kind of events firing and you want to make sure that the right data is going over or if you find out that some data is corrupted, you can look into this log and see what each page view of each event is sending over to Google Analytics. Really a great addition to debugging our toolset within Google Tag Manager and Google Analytics. Now, there is this extension of that you can install. But there’s actually another trick to make this work every time you have the preview and debug mode open. And this is simply putting your Google Tag Manager, Google Analytics tag into a special state. And you can find it under the override settings here of our Google Analytics tag. You can go to more settings. Down below we have advanced configurations. And here we have a feature called use debug version of Google Analytics. If we set this to true, we should see the same information in the console. Now notice I don’t have the GA debugger turned on right now and we get all this information. If I obviously turned this to false, it will not show me this information. Now the cool thing that you might have had already seen is that will be able to utilize variables here to see whether it should be turned true or false. And we can utilize a variable that we need to activate first in our variable menu. It’s a built-in variable. And this is simply the variable called debug mode. It’s under errors for whatever reason. But this will simply determine whether our Google Tag Manager is in the debug mode or not. So if you reload this page and look into our variables, we can look here in the debug mode. And it’s right now true. Now if I would leave the debug mode, it would turn into false. Now it’s safe to assume everybody who has that debug mode open is a marketing manager or a developer or somebody who is trying to debug something in Google Tag Manager. And therefore at this stage, I always want to turn on our Google Analytics debug option in the developer tools and we can simply do this by going into our tag. And in that option that we just ticked we’ll not use true every time but rather our debug mode variable. So every time Google Analytics is opened and firing a tag, we’ll either be put into the debug mode or into the normal state, depending if the preview and debug mode is actually open. So right now we see our data here. So if I leave the preview and debug mode, go back to our page and reload that. And we see nothing in the console. We see still that Google Analytics is being deployed. But the debug mode was turned off because we don’t have the actual preview and debug mode from Google Tag Manager open. Now obviously you don’t want to do this for all your different tags. Like if you have a Google Analytics event click trigger you want to utilize this option in your Google Analytics settings variable. So if you have a settings variable setup, I’m just going to inherit this from the settings variable.

You can also go into your settings variable that you have set up. I have one right here and set the option in the more settings under the advanced settings in here use the debug version. Yes only if the debug mode is true. Let’s save this and that’s false. If you go into the preview and debug mode and a Google Analytics tag fires we should see in our JavaScript console the debug information from the Google Analytics tracking code.

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...

Google Tag Manager API – Discover and try #GTMTip

I have created a GTM copy paste extension and used the Google Tag Manager API to test what it can do. With the help of various GTM API features, I was able to get invaluable insights into how I make the extension work as I wanted to. In this video, I will show you how you can utilize the documentation with the Try API feature and try what the GTM API can do

#GoogleTagManager
#measure
#API

🔗 Links:

GTM API Doc: https://developers.google.com/tag-manager/api/v2/devguide
Guide to the GTM API: https://online-behavior.com/index.php/analytics/tag-manager-api
GTM API Explorer: https://developers.google.com/apis-explorer/#p/tagmanager/v2/

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

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

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

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

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

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

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

Hello there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian, and I’m back with another quick tip on Google Tag Manager. This time we want to talk about to Google Tag Manager API, and actually how to try it out.

Now, when I was building my GTM copy paste extension, I have utilized this website a lot to understand the Google Tag Manager API and to try out certain things and how the GTM API reacts, what I get back, and so on. So it will be an invaluable resource when you want to try to work with the Google Tag Manager API. And it’s pretty well documented. Some things are not so well documented. But who’s here to complain, we want to try this out. And we can try it out by going into the references here and see what we can actually do with the GTM API. Now I’m using the Tag Manager API version 2 and what you would need is actually just this website and a Google Tag Manager account to try this out. So we have here Google Tag Manager account we have some tags in here. Let’s say we wanted to see what tags actually in the account and want to go through the GTM API to actually see this.

Now we have different commands here that we can ask the GTM API to call on. And one of those are the tags right here. And we have different commands, we can delete a tag, we can create a tag, get list and so on. We want to list actually the tag that we have available in our account. And then this little try this API thing pops up, I can make this bigger and what we would need to put in is a parent, a string and then if we wanted to have one or the second page of them with multiple tags, then we could put this in as well. Now, what is this parent thing? Its really just the URL that you see up here so Google Tag Manager knows which account to access and get the data from. And it’s everything from this slash here before the account starts, up until to the workspace and after that, it will take care of itself because it will know that you want to get the list of the tags. So I’m going to copy this and put it into the parents string right here, you can execute it. Now it needs to have access to my Google Tag Manager account. And therefore, I need to go through the auth flow of actually logging in. And here we go, we get a 200 response, which is a good response its green. And we see the different tags and what we can actually get from the Google Tag Manager API. We get the account ID, and so on. And we see the actual tags. So he has a tag ID 2 with the name GA event click, that would be this one. And in the JSON object, we have parameters in here as well.

Now when I was building the GTM copy paste extension, this was invaluable because I was able to try this out manually so to say in this, try this API controller. And then ported over to my application. So here we have the JavaScript that would this go through in order to get this information. So just to give you an example of how I use this. I was obviously wanting to take a tag just like this one and I wanted to get this tag first of all so all the configuration so I’m going to go here to the tag get and I wanted to get the path first of all for this particular tag. Now the path is actually what you can see down below here we can also right click and click on a copy this link address and go over to the path and paste that in. So now that we have pasted it in we obviously need to make it into a password. I’m going to get rid of this beginning here but then the API would know what to access. So I’m going to execute this and again I need to authenticate.

And then it will get all the information for me in this perfectly formatted JSON format. And I can also go ahead and copy this. So now I have this and I can create a tag. Now the question was, where do you want to create this tag? So you need to put in a parent, and you need to put in a request body. Now I already have the request body from the copied information that I had before. I want to copy this exact tag into another account. So I’m just going to go into another account here.

All right, and up here, I have this different account going to copy this and put this all in right here so it knows where to put that information. Now, all I need to do is execute. Again, go through the auth flow and get information back it’s not found. So something was wrong in my actual container or my parents right here. So let’s see. Well, the parent doesn’t actually need this tags at the end here knows that it’s a tag that it wants to upload. So that should work let’s try this out again. We get a 400 error. Now 400 errors are a bit annoying because you don’t know actually what went wrong. Something is malformed inside of your tag. And this is not well documented, I must say. But I can tell you what it is. What is the problem here? And that’s probably the firing trigger ID. Because the firing trigger ID is not found in the new account so it can’t reconnect it. But if I get rid of this, so you can just plainly edit this and execute. We now see 200 we have uploaded or created this new tag, it should now turn up in our other workspace here. And here we go. We have our event click, the trigger was not ported over as the trigger is separate from the tag itself. So if you are interested in working with the Tag Manager API, and see whether it’s actually possible and try it out yourself, utilize this documentation with the try this API feature to see how it’s actually working and how you can manipulate things through the API in your Google Tag Manager account or list certain things and so on. I heavily use this as I said with the GTM copy paste extension.

Hey, 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...

GTM Quick Tip: Test GTM Implementation on Any Site

Tag Manager Injector is an amazing Chrome extension that you can use test your Tag Manager implementation before GTM is installed on a website. With this extension, you can enter your Container ID. Learn more about how to use it for your tag deployment in your video.

#GTMTips
#GTMImplementation
#Measure

🔗 Links:
Tag Manager Injector: https://chrome.google.com/webstore/detail/tag-manager-injector/ooninanccdmjbcmghimhdfpeklpmlllg?hl=en-GB

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

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

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

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

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

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

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian, and I’m back with another quick tip on how you can make your Google Tag Manager work more efficient. Now, you might have the situation where you want to install Google Tag Manager on the page, you just not have the access yet to actually install it or you don’t have access to the Google Tag Manager account to actually install your Google Tag Manager tags, triggers, and variables. Now in order to test the deployment before you actually have access to the website, you can utilize your demo account that you have available. All you need is your Google Tag Manager ID. And then you can utilize a little-known extension or a very well known extension called a Tag Manager injector. This is a great extension that I use for all of my videos, really. And it gives you a little icon up here where you can enter your container ID and then you match it up to either the exact match or regex of the domain that you want to inject this on and then you can click Start. Now you don’t have to care about the push to the data layer. This is for something that is more specialized. But then your Google Tag Manager will be installed on that page. Now if I go over to Google Tag Manager and preview this, it will then also show up my preview debug mode on the page itself, which is quite handy to do any kind of tag deployment on this page. Now, remember, this only injects the GTM code on to this website on your browser. So this is not happening for anybody else, not for your clients, not for anybody else. That is what visiting the website only on your browser on your computer. So don’t worry if you have any kind of crazy testing going on with certain tags. It will easily be gone by just stopping the Tag Manager injector, reloading the page and everything is back to normal. Now, this is great, particularly for testing tracking. For also preparing an implementation before you actually have access to the actual website or the Google Tag Manager account and even on other websites that you might want to get a look at the data layer, for example, you can just utilize to preview and debug mode to see that as well. So really quick tip to utilize the Tag Manager injector for your tracking deployment testing.

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...

GTM Quick Tip: Test Your Matches CSS Selectors beforehand

Matches CSS Selector is a very powerful matching option in the trigger settings of GTM. It’s just a bit cumbersome to set up as it’s hard to guess the CSS selector without being able to test it beforehand. In this quick tip, I’ll show you how you can accomplish it with a few JavaScript commands.

CODE

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

#GoogleTagManager
#GTMTip
#Measure

🔗 Links:

Another video on matches css selector: https://www.youtube.com/watch?v=RChzsSA9PX0
Learn CSS Selectors: https://flukeout.github.io/

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

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

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

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

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

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

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian, and I’m back with another quick tip video for Google Tag Manager. This time, we want to talk about how you can test your CSS selector quickly before you deploy your tracking. Now, you might be aware of the very powerful matches CSS selector option that lets you target certain elements that were clicked on. So for example, it works very well with the click trigger together if you wanted to, for example, track all of the buttons or the link clicks that happened on the menu point here. Be aware that the CSS selector option only works if you really have an HTML element. So for example, if I click here, and I look into my GTM link click under the variables, you need to utilize the click element that is then displaying an HTML object. So if you look into the data layer, we have here our GTM element with our object. Now to utilize the CSS selector option, you will need to know a little bit of CSS. And then you can look into the elements pane of the developer tools and figure out the CSS selector. I find this pretty laborious because it puts me into a loop of writing a little bit of the selector, for example, okay, I have here an ahref element, I could put it in here, save this, go back, see if my tag fires if I click on the element and repeat if it doesn’t work as intended. Again, pretty laborious to go back and forth between the preview debug mode and your changes. So a quick little tip that I have for you today is to actually try this out inside of the developer tools. All you need for this is, first of all, you would have the need to click on the element that you want to track, for example, this album button. And then you open up your developer tools. In the console, you put in a command that will actually access the internal data model of Google Tag Manager, and this command is Google_TagManager.

And then in square brackets, you put your GTM ID. Now you get your GTM ID from the container that you have deployed. So that would be this ID here.

And you put that into your quotation marks, then you write a dot, and we want to access the data layer. We want to get a special key, which in our case, would be the GTM element. If we press enter, we get exactly the element that is also displayed here in the data layer. And this is the element that Google Tag Manager would try to use the CSS selector option. A great thing about this is that we can now test against this element directly in the developer tools by simply write matches, and then parentheses, and we can put in quotation marks our CSS selector option that we want to test against.

When you press enter here, return as an error. Well, this is because I didn’t type anything in a true or false. So we have here and link element a, and it would match that up. Unfortunately, if I click on any other element here would obviously or an element down here, it would also match this up. Because these are all links. Now, we want to utilize the CSS selector option. So we want to look into the elements pane and see how our links actually marked up. So let’s go and inspect here and inspect our element. And we can see these are all part of the primary navigation div element. Down here we have a little bit of a mock-up of how a CSS selector could look like. Now, you need to know a little bit of CSS in order to try this actually out. I’m going to press the Escape key, this will open up the console and the elements pane in the same window. And here, we can try out our CSS selector. So in our case, it would be primary navigation. We could put that in,

see if that works. No, it’s false. So this would not match up as our CSS selector. I’ve done some basic mistakes. The primary navigation is actually a class. So I need to put in a dot here, but still, and here we go, we see that our CSS selector option now turns true. Now if I click on any of these other elements, this will push a new GTM element in the data layer. And we can test it right away by just clicking the up arrow here and pressing Enter again, and see if it turns true again. So for this element that I just clicked, or if I click on this element, it would turn true. Now if I click on any other element on the page itself. This is not part of the primary navigation and therefore it’s false. So it’s safe to assume that this CSS selector would suffice to track all the menu clicks on our page. So we can copy this and go over to Google Tag Manager then do our final test. This will be our menu click and we’ll put in some links. We filter down on the click element where the matches CSS selector option is the primary navigation and eight. Let’s saved this and refresh. Refresh our page here.

And its second one, and we see our event click fires, our tag files on these events. And if I click on any other link on our page, it should not fire. Although was a link like because our CSS selector didn’t turn true. So simply use this line of code to quickly go through and test out your CSS selectors beforehand.

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...

Updated: Improvements to the GTM Copy Paste Extension

The GTM Copy Paste Extension has now been updated. You can login to multiple accounts and upload containers. Have a look at the improvements and new features.

🔗 Links:

Download the Extension: https://chrome.google.com/webstore/detail/gtmcopy/mhhidgiahbopjapanmbflpkcecpciffa

Review the Extension: https://chrome.google.com/webstore/detail/gtmcopy/mhhidgiahbopjapanmbflpkcecpciffa

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

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

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

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

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

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

Hey there Julian here. Back with another update for our GTM Copy Paste extension. Now, I’m blown away by the feedback that I’ve gotten from you guys from this extension that makes it easy to copy paste any kind of tags, triggers and variables over to another account. And it’s been really great. I’ve been publishing this for a week now. And I’ve already gotten loads of feedback, loads of praise as well. So I’m really happy about this. And people actually using it, it makes a difference. So what do I want more? Now I’ve already gotten some downloads. We have over 500 downloads now. We have we have some reviews here as well. So shout out to Thomas, Visani, Rohed, Vladimir, Dilma and Chris who’ve given already a review. Thanks for that. And if you have any reviews, or a support message, then please let me know. Now I’ve gotten lot of feedback as well to what I could do better in this extension. And I’d love for you to keep that coming. Right. So what I have gathered from the feedback most of the time is it’s pretty clunky that I have to sign up to Chrome.

Now, why do I actually have to sign up to Chrome to use this application. And for one, I’m using the chrome identity API to actually get access or do the auth flow to your Google Tag Manager account. So we can actually pull the data and then upload it to your account as well. And this all happens through Chrome, which means that if you have your Chrome connected to a Google account, I can get easier access to Google Tag Manager by asking for the auth flow that is built right into Chrome. Really, really handy. But the downside is if you’re not logged into Chrome, so that’s really what you see up here, it’s sinking to my demo account right here. If I’m not logged into Chrome, then I can’t really be using the extension. And therefore it makes it quite hard for people who are not familiar with this whole chrome sinking thing. And what you would even do this, why they can’t use the Chrome extension.

And it’s really just because of the identification or the authentication flow that the application needs to go through. Now, this also poses another problem, because if you have a Google Tag Manager account, and you are on one Google Tag Manager account, you copy from here, and then you go over to another Google Tag Manager account, then you wouldn’t be able to actually upload this because the wrong account is authenticated. You would not be authenticated with this account that you actually logged into Chrome to, and therefore, it makes it really hard to copy from one to another account. And therefore I was sitting down and thinking, How can I solve this problem. And I came up with a solution that actually doesn’t involve this chrome identity API. Although it’s very convenient for me, as the creator of this extension, I actually opted for a workaround that I come up with. And this involves Firebase. Now, Firebase is this suite of different developer tools that you can pull into for app developers, but also for web developers. And now I’m using the authentication of Firebase actually to authenticate yourself with a Google authentication and then actually give access to your Chrome, not your Chrome, your Google Tag Manager authentication. So you don’t have to log into Chrome anymore. So let’s try this out. If I click on the application, there is a little pop up here, it takes a little while and notice, but then you can choose your account, you can put in your password. And you can say which account it should actually have access to, it will ask you for all the details that I’m actually I want to create and get the data from your container. Now, this will not pop up for me because I’m already authenticated with this account. But once this is done, we are ready to go into our application. And then again, copy and paste as we see fit within that account. Now, what happens if we have something in here, and we want to actually copy this over to another account that we all should also have access to. So for example, this account here, if I go over, and I want to put this into this test account, and I paste this, I get an error. Why? Because I’m not authorized to actually upload into this account. That’s obvious because I have actually authenticated with another account. So what I have implemented now with this new flow, this makes it also possible to actually log out. So if you click on the menu here, and you actually log out, you will be logged out of the application. Next time you click it again, this pop up will come up and you can authenticate with the next account that you have available that you actually want to upload to. So in this case, I will go with this account. And now it will ask me for my auth flow because I haven’t yet done this. And I will allow and you notice we didn’t actually log out and then clear the clipboard, everything will be staying in the clipboard as you had it before. And then you can just paste it into this existing account that you now are authorized to. And obviously, you can copy and paste anything within that account. If you want to do this again, with the next account, you would need to log out first, and then login to the next account. So I hope this helps you with some of the problems that some users had by trying to copy between accounts. Now, this is possible, you just need to log in and log out, unfortunately, to do all this.

But I hope this helps you to make this work when you try to copy and paste from one account to the next. Alright, one other thing that you have already seen, you are now able to login and the reset clipboard is up here now. So if you want to empty this, you can do so as well. Now a new feature that I’ve also built in his container upload. So you might be aware that a lot of people put out their containers on their blogs or on GitHub, and you find these JSON files. These JSON files are normally generated by just going to the admin section and exporting one or the other account. We can just do this, for now, you get this JSON file, and you can export it and save it to your computer. And then you would need to go into the next account again and import this. Now, a lot of people actually, or people who publish their work, they put this out on GitHub, or on their own block like Lunametrics, they have an SEO pack here. And I thought, wouldn’t it be nice if we could just skip this whole import flow of Google Tag Manager. So I would need to download this, then I need to go over to Google Tag Manager import this again into the container by just uploading it into the GM copy paste extension. Yes, you can do that now. If you have the JSON file open, and it needs to be valid JSON, otherwise, it won’t work obviously. You can now mark this all, you can do this with control a or Command A on Mac.

This didn’t work. Okay, now it’s all marked. And we can right click, and again, then say add to GTM Copy Paste. And voila, we have an now our whole container in this extension. And we can go over to our account and then obviously paste this again into the account that we want to implement this in. I need to go to the workspace actually and paste this in.

So then all the tags, triggers, and variables that were in this container download will be uploaded to our account. If you wanted to do this with a file that you have already on your computer or if you wanted to, yeah, just open this JSON file in the browser, you can do so as well. So just what we did, just then I will just reset the clipboard here. Let’s press Command or you can also go to your browser settings file and just open the file and then you choose the actual JSON file and it will open it up in your browser. And you can do exactly the same mark this all right click and it doesn’t work.

That is unfortunate. I need to look into this. Anyways, if you find this useful, then I’d love for you to try it out. I will try to get some more box out. And I love to hear your feedback. Now, this is super important. If you have anything that doesn’t work for you, or you have a different workflow and you want to make this work. I love to hear from you to see if I can actually build this into the application and if it makes sense to put us into the application and make this work. This is actually what made for you so I’d love to hear your feedback. And if you’re already using this, then why not give us a review or some support in terms of some feedback. Just write me under this video. I read all the comments and answer them. As always, my name is Julian. Till next time.

SHOW MORE...

Join us on a new journey….

We are beyond grateful for reaching 60k subscribers here in Measureschool! ☺We have reached another milestone and we are so happy. So how else can we help you reach your analytics goals while you help us in our journey too? We are introducing Channel Membership

Join us: https://www.youtube.com/channel/UClgihdkPzNDtuoQy4xDw5mA/join

#measureschool
#youtube

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

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

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

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

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

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

Hey there and welcome back to

another video of measureschool.com teaching you the data-driven way of digital marketing.

My name is Julian and I have probably said this intro very, very often now hundreds of hundreds of videos. And some people actually come up to me in conferences and say, Hey, you that guy with the till next time. And yes, I am that guy now. And I’m super happy about this. Because now we actually reach the milestone of 60,000 subscribers on this channel. This has been well just amazing for me. I didn’t really have this as a goal post saying, okay, I want to go 60,000 subscribers. I always thought like 10,000, that will be good. But afterward, I really stopped counting. Now, this channel has grown so much. And I really have only you to thank because you are probably somebody who has been following along, you probably didn’t Google for this video. And then found it on YouTube, somehow. You are one of the viewers that have this probably in their feed and sees this and thank you. Thank you for following along on this journey.

Now, a lot of people have a journey and a lot of people write to me that have journeys. They have learned a lot of about Google Tag Manager, they have learned a lot about measurement. And they have learned a lot about this whole marketing world that I call data-driven. But let me tell you, I also have a journey right. I went from just doing the screencast where I didn’t want to show my face to these videos that I do now in front of the camera, to actually learning a lot about Google Tag Manager really going in depth and trying to understand how can I explain this better. But then giving this all back and you have given me so much more back to from this channel. I am now recognized at conferences. So people actually come up to me, which is kind of funny for such a small channel. Second, I have won so many friends through measureschool because I get written and there are some opportunities people come up to me and this has been just a great experience in terms of making connections to other stuff out there. And then third, obviously everybody who went out there bought my courses or bought a consultation from us, I’m so glad that you guys have found us and that you have put trust in us right. And even if you’re just watching this videos and consuming passively as a marketer out there, and thanks for still watching these videos and following along. So thank you. Thank you. Thank you

all for you.

Now, people actually often asked me what can I do to help you out with this channel? There are obviously different opportunities here. But I want to start out by just saying if you watch these videos, then you are fine. You’re doing me a huge favor. Obviously, there are sometimes ads in front of the videos so if you watch through them or click on them or just ignore them. That’s fine, that’s all fine. This monetizes the channel somewhat so I’ll be able to keep this going. At least for a little while. But we also have costs on our end right. Video production costs, video editing cost, me standing here and not being able to do something else at the same time. But I really am here for the community. And I want to give you more of the trainings and help you out more and more. But I have been struggling as well right. So people have asked me how can we help you out. Obviously, we also have courses out there, we have consultations. But now I want to bring you and I want to announce a new form of contribution that you can make to this channel. And I also want to give something back at the same time. And what I want to announce is channel memberships. Now, channel memberships are a new feature of YouTube, you may see down below a Join button, you mainly see this on the desktop side. But we also have a link in the description. So if you’re not on the desktop, you could join through that. And what channel memberships are, are a more intimate form of

joining this channel, actually, and getting into the community. And this is a typically $5 subscription depends on which country you are in $5 per month that is. And what you would get for this is up to the Creator. So I’m open to talk with people about this. But what I have put into perks right now is that you would get an extra video each week. What does that actually mean? I will not produce more videos that I won’t put onto the channel. But rather put it into this gated or paid community kind of thing. I will actually pull out videos, old videos if you say from my content library that I have available for my premium courses. So you would be able to get a new premium video each week with which goes into one or the other aspects of

Google Tag Manager, Google Analytics or whatever we have available there. Maybe we could also do a little bit of voting going on which video you want to see next. That could be a possibility.

I’m open to talk about this. Then I will do live trainings, so exclusively for Channel members, you will be able to join our live streams and ask questions. This is also a very small intimate group of people who are channel members. So I will pay extra attention to your questions, obviously, and you will get a live training which we also going to publish before we publish on the subscriber feed there.

And third, there will be access to two trainings. One training is our Enhanced eCommerce tracking training. A lot of people ask me always about Enhanced eCommerce tracking, how can I do it? Well, there are a lot of steps involved. And I can’t just cram it into one video. Luckily, I have done a training and I want to give you that training for free. The second one is our Google Tag Manager for beginners plus challenges course. You may be familiar with our Google Tag Manager course that we have here on the YouTube channel for free. And we also have a paid version that actually gives you a little bit on extra with challenges. So we can actually try this out and I give you the solution and I’ll give you a demo website to try this out. So this is these are the four perks that I’ve put into the membership for now. Please click that Join button, check out the perks. Maybe they change over time if you watch this later, but this is really it. If you want to get more involved with measureschool, get deep into the community and wants to support the channel, then I invite you to join our membership.

Is this a good deal? Let me know in the comments below. I think it’s a good deal. If people out there I think I have a professional crowd, right if you’re a freelancer if you make money, but actually doing analytics or implementing stuff or taking the knowledge that you’ve learned on the channel and put it onto us what is $5 a month. And that’s how you can contribute in your own way. Or maybe your boss asked him as well. Anyways, this is really just one new feature that I wanted to announce here on this channel. It may not be accessible for everybody. And maybe you think of other ideas on how you could contribute. Please leave me a comment down below what you think. I’m always open to hear your thoughts.

All right. Channel memberships are now available. If you want to join, please do so. And if you don’t want to join please continue watching these videos. Thank you again for 60,000 subscribers. That’s all for now. If you liked this video, please give us a thumbs up and as always, you know what to do. And my name is Julian. Till next time.

SHOW MORE...

GTM Quick Tip: How to Match Up Empty Values In Google Tag Manager

If you ever encountered an empty value that is not undefined you might wonder how to match this up in GTMs trigger rules. With the REGEX option ^$ you can match such empty strings to ensure they are filled.

Regex: ^$

#GoogleTagManager
#Regex
#Measure
🔗 Links:

Regex for GA [Video]: https://www.youtube.com/watch?v=BtA4gRxoyIY

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

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

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

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

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

Hello there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian, and I’m back with another quick tip video, this time about empty values within Google Tag Manager. Now to set you up, I have a little example here. We are here on a page where I want to fire an outbound link event that ties into Google Analytics. So we can see whether somebody leaves our page and through which links they actually leave. And when I click on this first link up here, I’m getting redirected to measureschool. Now, let’s do this all with the Command key press. So we see the event inside of our preview and debug mode. Here is our GTM link click, and we see our event outbound link click has fired. Now the event values that we actually send with it is the category outbound link that tracks event, action, and label. So here we have the label, the action of the actual page where we send the user to. Now once we go over to the variables, we actually pull this from the click variable right here. I have another example here. And this happens quite often. Once you click on, for example, a button that not acts like a link per se, a new window opens, we can go back here, and we can look into our event that fires which was the ninth event here, and we see that our click URL is empty.

Now, this is unfortunate because when our event outbound link click now fires, it doesn’t have the actual value to fill into our action right here. So what happens, let’s look into our Google Tag assistant. We go into our event outbound link click, and we see our action is undefined. And this is also what is then transferred over to Google Analytics, which is unfortunate because it skews our data to this undefined value. But it happens quite often, especially when the link is not standard HTML, but is pulling it from somewhere else. So right now, I have a JavaScript link actually in the background here. And that’s why it’s not picking it up. Now, what can we do to actually prevent our tag from firing, because we don’t want to have that data in there? We would need to find a way to prevent our tag from firing when the actual click URL is empty. And unfortunately, this is not an empty value, because it is actually a string, just a string itself is empty. So if we would change our trigger around, I’m going to go over here to triggers and outbound link and say, Hey, I don’t want to fire this when the click URL, for example, does not equal empty, then I want to not fire this. So let’s try this out. But unfortunately, we can’t actually save this because we have the filter not really specified, we don’t have anything in here. So you need to fill something out in order to make the filter actually work. So what can we actually do? Well, there is a little technique Regex called and we can choose the does not match the regex. So we would find out if the strings actually empty. And we can do this by using the caret and the dollar sign, which would mean that our string would need to start with a character after this and stop with the character before this, which is the empty character right here. So in the end, it will hopefully work and match our regex here. So it should not match, our click URL should not match the regex empty string. If it does, then this whole thing should fail. Let’s try this out. Let’s save this and refresh and refresh this page.

And we click on measureschool again. We see our GTM click here and our tag didn’t fire. Why did it not fire? Let’s click on it. And we can also look into our fire and conditions right here. The event was right, the click URL but it matched up to our condition right here and that’s why it failed. And if you click on any other link here, we would need to do that with the Command key press. We see that our event still works. Also with the affiliate link, it should still work, yes. So this is a quick tip on how you can match up empty character strings with the help of this regex option of the caret and the dollar sign. So just remember this little term if you ever find yourself as you want to match up an empty string.

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...

My new Chrome Extension: GTM Copy & Paste

The Copy/Paste Chrome extension lets you easily copy any kind of tags, triggers and variables from one GTM account to another without leaving Google Tag Manager. This was built in JavaScript in combination with the GTM API and finally live on the Chrome App Store.

#ChromeExtension
#GoogleTagManager
#Measure

🔗 Links:

Install the extension: https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

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

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

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

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

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

In this video, I’m going to show you my new Chrome extension that lets you easily copy and paste any kind of tags, triggers, and variables from one account to another Google Tag Manager account within Google Chrome. All and more, coming up.

Welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian, and today I’m super happy and excited to announce the GTM Copy Paste extension that’s been working on over the last few weeks actually. Now, this extension lets you easily copy any kind of tags, triggers and variables from one account to the next without actually leaving Google Tag Manager because it’s a Chrome extension. Now I know you’re dying to take a look at this. So why don’t we, here we are. First of all in the Chrome Web Store you can download it now just search for gt m, copy, paste and then it will come right up and you can added to your Chrome account. Now, this extension actually needs access to your Google Tag Manager account. So there is an authorization that needs to be going on, you need to give access to actually read and then also create assets in your Google Tag Manager container. I will allow this and that will give me the ability right here in my tags when I right click to add to the GTM copy paste extension. Once I do this, we see a little indication here from the icon of the extension what is actually in the clipboard and we have one tag right now this is the Facebook event Add To Cart. Now you already see triggers and variables here, you can obviously also copy any kind of triggers. So let’s do this and add any kind of variables as well.

And we see here we have them now in our GTM copy paste extension. We can go over to any kind of other accounts that we have available and we are actually able to edit and then paste our clipboard into this account. All right so it should have been pasted and now we should see our Facebook event is copied over, our trigger and our variables as well. Now if you have any kind of trigger attached to a tag and this is part of the same clipboard or the same paste that we do then this will reconnect automatically so you don’t have to worry about reconnecting your triggers to the tag as long as they are actually part of the same paste.

So this is really what it already does this copy paste extension. I hope you find this useful. Now if you have any more questions please leave them in the comments down below. And as always, if you like this video and if you find this extension useful, please give us a thumbs up, review the extension if you try it out and obviously also subscribe to our channel because we bring you new videos just like this one every week. Now, my name is Julian til next time

SHOW MORE...