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.
For more infomation >> Building Los Angeles' Earthquake-Proof Bridge | The B1M - Duration: 5:50. 
For more infomation >> New Honda CBR250RR HRC Tricolor Blue Edition 2019 | Honda CBR250RR HRC 2019 | Mich Motorcycle - Duration: 2:06. 
For more infomation >> 秋空に花火三昧2018.11.24.Fireworks galore in the autumn sky - Duration: 24:55. 
For more infomation >> Щенячий патруль | Супер щенок | Мультики про поезда и паровозики с игрушками - Duration: 5:04. 
Không có nhận xét nào:
Đăng nhận xét