Change Links with Google Tag Manager (Part 1)

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
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 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 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, we inspect them right here we see or change to 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.

Comments 5

Leave a Reply

Your email address will not be published. Required fields are marked *