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 measure school.
Com teaching you the data-driven way of digital marketing.
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 GoogleTag 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.
This is the underlying technology that will use 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.
So we know it’s working correctly.
Inside of Chrome, you can go to your modules here and then your developer tools.
This will normally open up the elements panel 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 hoverover 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.
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 theother 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.
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 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 ina new value.
Let’s just put in the 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 ahrefand 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 measure school.
And if the user now clicks on this my link,he goes to measure school.
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 measure school.
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 measure school.
Com, we inspect them right here we see or change to measure school.
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.