Using FB Pixel Conversion Tracking More Effectively

[TheBoss]

Introduction:

News flash: Facebook has had a new pixel for quite some time and it is great, in many ways. Any tech-savvy marketer or developer knows this, and they are probably using it effectively.

For those of you who are not tech savvy or know much about it, here is a key summary of the benefits you should be aware of:

• It loads faster (speed wins)
  
  
• One tracking code for custom audiences (retargeting) and conversion tracking
  
  
• Retrospective custom audience creation (make stuff afterward only if campaigns work)
  
  
• Easy custom event pushing (make your tracking dynamic and fire events without pesky long redirects)
  

One of the main things I want to focus on here is the ability to fire conversions on clickthrough events without the need for long redirects through intermediate pages, with dynamic descriptions so you can segment lists later in Facebook, and with minimal overhead (500 ms is usually plenty) or reduction in user experience.

Why should you bother learning this? Two important reasons:

1. You can use lander clickthroughs as a conversion event. This helps feed Facebook conversion data to optimise ad delivery toward higher intent users and is better than having nothing, which is often the case with affiliate offers that do not allow you to place JS/Image codes for conversion tracking.
   
   
2. The money is in the list. Lookalike audiences, custom audiences, retargeting, audience insights. Hell, if you are doing Facebook and not leveraging some of these, stop what you are doing and figure it out. With this setup you can build segmented lists retrospectively as an after thought - never throw away data especially if it takes no added effort.
   

Ok, with that preface out of the way, let's get into execution. First, make a FB pixel on your account. These are global. One per account. It will look like this:

Code:
<!-- Facebook Pixel Code -->
<script>
!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','//connect.facebook.net/en_US/fbevents.js');

fbq('init', '1234567890');
fbq('track', "PageView");
</script>
<noscript>
<img  height="1" width="1" style="display:none"  src="https://www.facebook.com/tr?id=1234567890&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Pretty simple - a Javascript code followed by image pixel backup for when someone has JS disabled, which these days is rare so I'm not going to go over using the noscript backup - if you want to have that backup with this approach, that's your demon to figure out. This is the best place to get developer info - https://developers.facebook.com/docs...ook-pixel/v2.5

Note the fbq('init') part which declares your pixel ID, and then fbq('track') which tells Facebook there has been a "PageView" event. Facebook will get this info, know the URL of the page, and you could then add a custom audience or custom conversion for all PageView events happening that match some URL e.g. "domain.com". Easy.

There are many other events that the FB pixel provides which you can see when getting the pixel code. If you are advertising one product on your account e.g. for eCommerce then you can for sure use stuff like AddToWishlist, AddToCart, AddPaymentInfo etc. to globally track events on your site. But, as affiliates, we probably want something a bit more generic but flexible. Thankfully, the FB pixel supports custom events so we can do whatever we want.

The approach here is simple: add systematic event naming to your landers, pass information that allows you to track events, and do so in a way that happens when users click buttons on your page.



Execution:

Firstly, embed the FB pixel code in your page just before the closing </head> tag. Now we are going to modify it to send info about a category, the lander name, perhaps the offer, and also a clickthrough event name shortly afterward. Its up to you how much info you send. I like to have more than I need so that if things go well, I can scale without having to go back through and change things.

Here is an example of the code fragment you can add to the FB pixel right after the fbq('track', "PageView"); part, viz:

Code:
...
fbq('init', '1234567890');
fbq('track', "PageView");
fbq('trackCustom', "LanderView", {
  category: 'Gaming',
  lander: 'Wartune_LP1',
  offer: 'Wartune',
  eventname: 'IntialLanderView'
});
</script>
...

This will now send off a bunch of information to Facebook about the specific lander. If you have privacy concerns... well, approach accordingly and remember you are tracking the hell out of people visiting your page, hypocrit!

Now, on to the secret sauce. Firing events when people click on your CTA(s). This part requires a little more dabbling in Javascript. I'll provide an example for when you have two separate CTAs that you want to track independently.

First, add jQuery to your page code in the head section:

Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then, add this code to the bottom of your page before the closing </body> tag:

Code:
<div class="tracker-div"></div>
<script src="scripts/app.js" type="text/javascript"></script>

Note: you will obviously need to have a file called app.js in the scripts folder alongside your lander... as for the content, we want to use something like this:

Code:
$(document).ready(function () {

    $(".CTA1").bind({
        click: function () {
            console.log("FB Tracking Start!");
            fbq('trackCustom', "LanderClickthrough", {
              category: 'Gaming',
              lander: 'Wartune_LP1',
              offer: 'Wartune',
              eventname: 'LanderCT1'
            });
            console.log("FB Tracking Ends!");

            console.log("Other Tracking Start!");
            $('<img src="http://image-pixel-URL-here">').appendTo('.tracker-div');
            console.log("Other Tracking End!");

            setTimeout(function () {
                console.log("Redirecting...");
                window.location.href = "http://google.com";
            }, 500);
        }
    });

    $(".CTA2").bind({
        click: function () {
            var itemId = $(this).attr('item-id');
            console.log("Tracking Item ID: ", itemId);
            console.log("FB Tracking Start!");
            fbq('trackCustom', "LanderClickthrough", {
              category: 'Gaming',
              lander: 'Wartune_LP1',
              offer: 'Wartune',
              eventname: 'LanderCT2'
            });
            console.log("FB Tracking Ends!");

            setTimeout(function () {
                console.log("Redirecting...");
                window.location.href = "http://google.com";
            }, 500);
        }
    });

    $(".track-this").bind({
        click: function () {
            var itemId = $(this).attr('item-id');
            console.log("Tracking Item ID: ", itemId);
            console.log("FB Tracking Start!");
            fbq('trackCustom', "LanderClickthrough", {
              category: 'Something',
              lander: 'LanderName',
              offer: 'Something',
              eventname: 'LanderCTx'
            });
            console.log("FB Tracking Ends!");

            setTimeout(function () {
                console.log("Redirecting...");
                window.location.href = "http://google.com";
            }, 500);
        }
    });

});

OK, so what the hell is going on here?

Basically, we first bind an event to our call to action button - e.g. class = CTA1. To make this link up, in our page HTML, we need to make sure our call to action button has that CSS class, e.g.

Code:
<a href="javascript:void(0);" class="CTA1">Sign Me Up!</a>

Note how we use javascript:void(0); and not # as the href - do this. Basically, we don't want the link to go anywhere, we want it to do nothing on click and let the app.js handle what happens next. For the second CTA you just need to give it class="CTA2" and so on, and the app.js file has listeners in it that activate when you click on that element.

Moving on...

The next thing that happens is we push information to FB. Note the main differences are we have changed the entire event to be called "LanderClickthrough" rather than "LanderView" and have also changed the eventname to LanderCT1 to show it is a clickthrough from the lander through CTA1. It is up to you to write these in properly though if you are savvy enough you could make the whole system dynamic.

The console.log parts post information to your browser console to show you that things are working, which I will show in a moment.

Now, for the "Other Tracking" part - here I have added an option for an image pixel if you want one. Don't use FB's noscript backup here, this is an extra addition for third-party stuff.

Lastly, the browser will redirect to the URL specified by window.location.href = "http://google.com"; with a delay of 500 ms, which you can change. The lower the value the faster things redirect out but the higher the chance of interrupting the tracking - you will be able to see this in the console. If things get interrupted they will show 0ms as they never completed. For FB pixel tracking you can expect it to take 50-100 ms. It's pretty quick, but be mindful of your user connectivity.

The URL you use here should be that from your tracker, i.e. whatever you would normally link to.

I know this will be hard for many, so you will need to just test it. I suggest using the FB pixel helper addon for Chrome and opening your web developer console so you can see the messages that get sent, telling you that stuff is happening. The console is important for figuring out if it is working.




Using This Properly:

Now, how to make use of all of this. There are two things:

1. Custom conversions for your ads
   
   
2. Custom audience lists
   

Note that you may need to send some traffic to a page with these custom events to have them appear as options in Facebook when creating lists/conversions, a small sacrifice.

Here is how you might add a custom conversion:





I haven't used the custom codes described here for the pixel I am using so I can't pick LanderView or LanderClickthrough, but you get the point. Once you pick it a field for additional properties should appear. Choose a custom value and add as many parameters as you want to lock down that conversion event. Since we name things LanderCTx and provide info like the offer, we can be very specific.

However, since Facebook tracks only users who came from linked ads, you don't really need this - this is pragmatic and for the purposes of having data for potential later use. So, you could be very generic and do something like this:





Or you could make it specific enough that it only picks up conversions as those to your first CTA (maybe the second is a minor or different product?)





Ignore the BuyItNow event there - I couldn't put LanderClickthrough without it wiping out the later config.

Now that you have all of this granular data, you can be extremely specific with what justifies a conversion for whatever custom conversion you make - or be relatively broad and just focus on "lander clickthroughs" with something like "eventname contains LanderCT".

The real power of all this data comes in when we jump over to audiences. Hopefully some of you can see why you would pass this data even if you can be broad because FB knows when users came from specific ads.

Let's move over to audiences and see what we could do... Go to create audience > custom audience > website traffic. Change the traffic option to custom combination. If you have passed event data, you can pick both URL or Event, and this is where the magic starts!

Since we have passed so much data, we can retrospectively, i.e. 2 weeks later when we realise a campaign has legs, add an audience tracking every user who has landed on our gaming landers for this offer:





Or who has landed on any of our gaming landers across all offers:





Or has specifically clicked through on our landers for game X:





Or who have specifically clicked through on lander1 for game X, where for whatever reason that lander is providing the highest quality leads for the advertiser:





The possibilities here are limitless. Bucket people based on lander clickthroughs or exit pops. Use this on all campaigns not just those from FB to build lists from across different traffic sources (pro-tip: do that). Segment people based on the specific types of products they purchase or add to checkouts if doing eCommerce. Make lists of people who only bought the highest priced items. Make lookalikes of everything once you have enough data.

Go forth and prosper in 2016 stackers!