Table of Contents
Excerpt
Hint: it's not as easy as I thought it would be. But I’ll show you how.
STATUS
Slug
redirecting-after-deploying-tracking-pixel
Last week a Cloakist customer who is a manager in the music industry came to me with a problem.
He was trying to set up online ads for the artist Pink Mario (who is dope BTW). These ads needed to take people through to Pink Mario Spotify pages.
But simply linking his ads straight to Spotify didn't make sense.
Doing that would mean he couldn't track the Facebook users who clicked on his advert, to retarget them later or use other Facebook features like set up a lookalike audience.
So he created HTML pages at pinkmario.com, where he tried to inject the Facebook tracking pixel code and then redirect afterwards.
You'd have thought that would be easy. It wasn't.
Everything he tried didn't work.
setTimeout was too slow and inconsistent. Multiple solutions he found and implemented from StackOverflow simply didn't work.Finally, he asked me to help out. And initially, I also couldn't figure it out.
Google Tag Manager's hidden feature
Then I stumbled across this great article talking about Google Tag Manager's extremely poorly documented
eventCallback feature.(I say it's poorly documented because googling 'Google Tag Manager eventCallback' finds me absolutely no documentation from Google, which is pretty bizarre.)
You might be thinking, huh – I thought we were doing a Facebook pixel here?
We are. But Google Tag Manager is a tag container which lets you put any other tracking pixels or tags in it to your heart's content.
Even if you don't need any pixel or tag other than Facebook's, it's still quite convenient to use a tag manager so you don't have to mess in website code every time you need to change or add a pixel.
And the cool thing is that the hidden
eventCallback feature basically lets us do something on the page once all tracking pixels have safely fired.So here's how to set up redirect-after-firing-pixels with Google Tag Manager.
Step 1: Set up Google Tag Manager
The first thing you need to do is set up Google Tag Manager for your domain and put all the pixels in there that you need.
It should be pretty straightforward to get set up – there are tons of guides out there to help.
Once you're done with that, we need to make a little modification to the Google Tag Manager code.
Step 2: Use eventCallback
We should get a piece of code from Google Tag Manager to insert in our site which looks a little like this:
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>12345678
After
event: 'gtm.js' we're going to add another key for the object called eventCallback, whose value is going to be the function that will run once all tracking pixels have been fired:<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js', eventCallback:function () {
window.location = 'https://google.com'}});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>123456789
You can use this version already, if you like. All you need to do is change
https://google.com to whichever website you want to redirect to, and change GTM-XXXXXX to your own Google Tag Manager ID.Once that's done, you can stick that piece of code inside the
<head> tag of any page on your site and it'll become a handy little fire-pixels-then-redirect page.But there's one more cool thing you might want to do.
Step 3 (optional): smart forwarding links
The problem with the current
<script> is that every time we want to redirect to a different Pink Mario Spotify page (for instance), we'll have to create a new page on our site.That's a huge waste of time. What we can do instead is set up our script so that we can dump the redirect URL at the end of the URL that we're making, and then to create a link that redirects to a different page, we'll just change the URL inside the link.
That probably sounds really confusing. Let me explain better.
We can create something like this:
https://pinkmario.com/r.html#https%3A%2F%2Fgoogle.comThis is a normal link, with another link at the end of it. The other link looks weird because it has been encoded, because if, for instance, it had the slash after the
https, that would break the page.The cool part here is that we can simply head on over to a URL encoder like this one, copy our encoded URL, delete everything in our link after
#, and the link will redirect to that URL instead.So here's how you can set that up:
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js', eventCallback:function () {
let redirect = decodeURIComponent(window.location.hash.substring(1));
window.location = redirect}});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>12345678910
Here, we've added more lines to the bit which before was very simply always redirecting to
https://google.com.What's happening now is:
- We're grabbing everything after the
#in the link that we're at
- We're decoding it so that our weird codes turn back into characters like
:and/
- We're then redirecting to that link
If you were to put this code at a page like, for instance
https://pinkmario.com/r.html you'd use it by:- Encoding the URL you want your link to redirect to afterwards, using this tool or one like it. For
https://spotify.comit would behttps%3A%2F%2Fspotify.com
- Sticking that encoded URL at the end of your link, after a
#
So, we get:
https://pinkmario.com/r.html#https%3A%2F%2Fspotify.comA smart redirect link like this is a pretty freakin' cool item to have in the toolkit of an online marketer, especially in the music industry where you rely on third platforms which you can't control (so you'd never be able to put your tracking codes in their pages).
Grab that last script, change the parts that you need to change, stick it on some HTML page at your domain and you should be good to go.
That's it!
Hope this guide helped you out.
If you have any thoughts, feel free to tweet me or get in touch via the live chat.
If you want to listen to some cool synth-pop, here's Pink Mario on Spotify.
I'm also available to do paid consulting for redirect link solutions, so if that's something you need, you can get in touch on sales@cloak.ist.
.png&optimizer=image&quality=80&width=280)
