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

Leave a Comment

avatar
 
smilegrinwinkmrgreenneutraltwistedarrowshockunamusedcooleviloopsrazzrollcryeeklolmadsadexclamationquestionideahmmbegwhewchucklesillyenvyshutmouth