If you’re running Facebook advertising, your ultimate goal – after brand awareness – is to generate leads, whether that’s students, foster carers or new recruits. When your advertising campaigns bring you email address after email address, you have achieved that goal. But wouldn’t it be even better if you could track each ad’s user journey and see which ones are actually leading to these successes? 

We’ve always optimised your campaigns to ensure your budget is spent only on the ads preferred by your audience but, until now, we couldn’t tell you which ad then led to a click, to a view of your landing page, and finally to a form submission when your landing page is one of our Apps, powered by our social marketing software, Big Top. 

Here’s our Head of Tech, Dan Sunderland, on how we’ve managed to set up tracking on the “click” action. We’re now able to feed back to you your most successful marketing messages: the ones that lead to potential students, carers and employees providing you with their contact details – brilliant for your long-term strategies and communications and, ultimately, consistently hitting your recruitment targets…

In January 2013, Facebook launched its own conversion tracking service, targeted at advertisers to help them accurately assess the ROI of their advertising campaigns. Unfortunately for us as developers, its basic implementation is only suitable for static page loads.

It is more valuable to us as a marketing company to learn which customers were fully converted from the initial advert click, right through to the lead generation mechanism of our Apps (for example, a data capture form).

As is common with modern web applications, our form submissions are carried out via AJAX, and we do not have a discrete conversion page to embed the tracking pixel. Facebook’s tracking implementation is not too unusual: they’ve used a small script loaded asynchronously, which inserts a single pixel image into the Document Object Model (DOM), triggering an HTTP request to their tracking server to serve as a beacon.

 

The solution we settled upon was to emit a simple  DOM event from our form, after it has been successfully validated and submitted. Upon a successful conversion, an event listener then dynamically loads in the image.

 

We used a CSS background image as the vehicle for our tracking pixel, as the request for the image won’t be made until that CSS selector is active within the DOM. Upon receiving our event (using jQuery’s event listener method, as we already have this library loaded for our AJAX), we then used some basic Javascript to append that class to an empty div, and load in the tracking pixel.

Here’s the code:

[code language=”javascript”]
$(document).on(‘fbTrack’,function(){
document.getElementById("fb_pixel").setAttribute("class", "fb_pixel_conversion");
});
[/code]

We’re quite satisfied with this solution, and it seems to be performing correctly across all our applications. It’s still a young platform, and we expect to see Facebook refine its implementation in dynamic applications as it matures.

If you want to find out more about this or the way our software provides you with your next customers, simply get in touch.

Article by

Charlie_Penrose

Charlie Penrose

Creative Director