Facebook Pixel Tracker Hack Using Custom JS Function

29.02.2016

Facebook Google Plus Twitter LinkedIn

Setting The Scene

Zimpleweb wants to track the events that occur on our website for Facebook in order to do remarketing. I'm sure we're not the only ones out there. Facebook provides a nice lightweight code snippet to place in the head of our code, and a list of events that we can track using their events function fbq().

The Error

Placing the head snippet was quick and simple, and we can easily track page views on every page of the website (thank you php includes). Step 2 was to place a simple 'CompleteRegistration' event on the page so we know when someone signs up to our blog or newsletter.

The first place we tried was inside our thank you function. If you've signed up to our blog, you'll know that we use a popover thank you rather than a separate page. If you didn't know this, sign up below and you can see it for yourself.

We were going to obscure the function that we use to say thank you, but why bother. If you've got even a slight amount of HTML / JavaScript knowledge, you'll simply view page source to see the exact function we're talking about. If you look at the displayThanks() function, there is a small section that read:

function displayThanks(context) {
  ...
  if(context == 'signup') {
    fbq('track', 'CompleteRegistration');
  }
  ...
}

In a nutshell: upon submitting a subscription, the thank you function should fire the event to tell Facebook that a registration was complete. The issue with this is that Facebook sees the function call and says:

So most coders implementing this would look at this and say "well, I simply haven't triggered the event yet. Let's try and signup!" So after triggering the signup, Facebook tells you:

Now that is just not right. The suggestion does say "some actions may not be tracked" so we could ignore this and hope that it works. Instead, we chose a different path.

The Solution

Looking at the function that we've implemented, you'll see a small ajax call to a file 'fb-codes.php' and places the contents at the end of the body tag. This fix makes it so the Facebook event function doesn't exist prior to submitting the registration.

The code in the php file is pretty light weight and has no security risk involved. It is a simple set of if statements to determine which event to fire. The code is:

<?php
  $context = $_REQUEST['context'];
  if($context == 'CompleteRegistration') {
    echo "<script type='text/javascript'>fbq('track', 'CompleteRegistration');</script>";
  }
?>

As you can read from this, simply grab the particular event you wish to use, and echo the event. This is extensible to include any and all events that you wish.

Why do we not simply echo the context? Because people could hit the file with invalid events and attempt to inject their own javascript into your file.

If you're curious as to how this works, add the Facebook Pixel Helper extension to your chrome browser (or first get chrome if you don't use chrome) and signup below.

Brad
Brad
Lead Programmer

Brad comes from a background of Computer Science at the University of Newcastle. Not only does he know the languages of Java, PHP, C++, C#, HTML, CSS, JSP, ASP, Python, Javascript and French; he can solve a Rubiks cube in under 1 minute, and even one handed under the influence of Bicardi 151!

Brad is currently building a virtual tour of zimplewb.

Like what you read? Sign up to our blog for some delightful insights into the wonderful world of web development
Oohhh myy gooshh you Clicked the link!!???

There are 2 buttons below, one takes you back to the zimpleweb website, the other absolutely annihilates the entire planet destroying everything in it and obliterating half of the solar system, thus turning thousands of years of human progress into small, fragmented pieces of space rubble.

HAZARDHAZARD HAZARDHAZARD
Woowwsserrss!!!!!!

While your total disregard for our entire civilisation is concerning, your willingness to take a chance and try something new (albeit armageddon) makes you the ideal zimpleweb client so you really should get in contact, ASAP!

Login to the CMS