Trying to figure out how to redirect to a new page after dropping a Facebook retargeting pixel.
We already have everything else setup but want to add this functionality (the same as /)
We currently use window.location.replace(''); but I think the Facebook is async so we can't just add the pixel code above it.
Thanks for any help you can provide!
Trying to figure out how to redirect to a new page after dropping a Facebook retargeting pixel.
We already have everything else setup but want to add this functionality (the same as https://meteor.link/)
We currently use window.location.replace('https://thelinkgoeshere.com'); but I think the Facebook is async so we can't just add the pixel code above it.
Thanks for any help you can provide!
Share Improve this question asked Dec 7, 2017 at 3:04 Bryce YorkBryce York 1,0561 gold badge17 silver badges36 bronze badges5 Answers
Reset to default 11The current answers does not quite cut it!
It is true that the redirect will wait until the fbevents.js has loaded. It does however not wait for the fbq events to be sent, which is what you would want out of this solution.
Here are two examples on how Chrome handles your proposal on an extremely slow connection and on 3G:
In the first example Facebook does not even have the time to initiate the tracking request before redirecting. In the 2nd example it does mange to initiate it, but Chrome cancels the tracking, because of the pending redirect.
It would be easy if Facebook would supply a Callback like Google Analytics does, but as of the time of writing, it does not currently offer callback functionality.
There are plenty of solutions on the Web that simply use a fixed setTimeout to redirect after, say, a second. But this solution poses two kinds of problems:
- It does not work when the connection is way slower then expected. In that case the redirect will still happen before the track. So you will loose data!
- It forces users on fast connections to wait for your arbitrary timer to pass before they are redirected!
What you can do though to achieve the desired effect is a complete Hack, and I would love if Facebook would finally implement the Callback, so use this with care:
Note: I used two libraries for this (jQuery and imagesLoaded). You could probably do it without those, but I choose the easy route and do not mind the overhead that much.
<html>
<head>
// Header Stuff
<script>
// Regular Facebook Pixel Code (Does not need to be modified with async!)
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
</head>
<body>
<!-- You should provide a Fallback Button here in case automatic redirect fails! -->
<img id="pixelLoad" src="https://www.facebook.com/tr/">
<script>
$(function()
{
$("#pixelLoad").imagesLoaded().done(function(inst)
{
setTimeout(function(){ window.location.href='someURL'; },100);
});
});
</script>
</body>
This loads the exact tracking image from Facebook that is used in their fbq method, thus allowing to compensate for slow connection to the Facebook server. Sadly you have to use the image and cannot use a simple AJAX request, as Facebook's Origin-Policy does not allow this.
Here is an example on how Chrome handles the redirect and the Facebook Pixel requests after the change:
It seems that this allows the Browser to correctly queue the redirect, so it happens after the pixel tracking events. I have not tried this with legacy browsers, so I will repeat myself: Exercise caution when using this Code!
EDIT: Edge and Firefox show similar behavior and this solution does seem to work with them as well.
If you look closely at the Facebook pixel code, you'll notice that somewhere in that code, the dynamic script tag being inserted by the pixel has it's async property set to true like so:
t.async=!0;
!0 evaluates to true.
To change this behavior, find where this property is being set in the pixel, and change it to false:
t.async=false;
Normally this would not be recommended as turning off async will block further execution until the script is loaded and executed, but in your case that's exactly what you need.
Once you set async to false, it is guaranteed that the FB pixel JS code will load and run before the next script that follows the pixel:
<script>
// FB pixel here with async false
</script>
<script>
window.location.replace('https://thelinkgoeshere.com');
<script>
You can modify the facebook pixel script you put on the page
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '111......1');
fbq('track', 'PageView');
//add your redirect here
window.location.replace('https://thelinkgoeshere.com');
As mentioned before, the JS code won't work because the event is not necessarily tracked before the page redirects. The best you can do if you don't want to add a flakey timeout is to rely on the fallback pixel img tag.
Here's my code:
<html>
<body>
Please wait...
<br>
If you don't get redirected, click <a href="https://....">here</a>.
<script>
var img = document.createElement('img');
var redirectFunction = function () {
window.location = "https://....";
};
img.onload = redirectFunction;
img.onerror = redirectFunction;
document.body.appendChild(img);
img.src = "https://www.facebook.com/tr?id=PIXEL_ID&ev=PageView&noscript=1";
</script>
</body>
</html>
Pro-tip: you might want to add <meta property="og... tags on this page so that the title and preview image show up when shared on Facebook.
Have you considered using Google Tag Manager?
It gives you better control of how your scripts load. Additionally, you can create script in Tag Manager to redirect once FB one has fired.
This is exactly what I followed to set up mine:
https://youtu.be/DZm1Wz3zgzU