CSS Selector Attribute Selectors: https://css-tricks.com/almanac/selectors/a/attribute/
🎓 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
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 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.