I was recently asked to add Facebook ad tracking code to one of my WordPress sites which uses the excellent Contact Form 7 plug-in. Doing a quick Google search to find out if there was a best-practice way of doing this, I didn’t come up with anything. Thus, if you’re wondering how to track your facebook ads on your WordPress site using Contact Form 7, this quick tutorial should help you out!The Facebook tracking code provided by Facebook to put on your contact ‘Thank You’ page should look something like the following:

<script src="//ah8.facebook.com/js/conversions/tracking.js"></script>
<script type="text/javascript">
try {
 FB.Insights.impression({
 'id' : 3546876354,
 'h' : '3bc5e0f'
 });
} catch (e) {}
</script>

STEP 1 – Open the theme footer file

Firstly, we need to edit your theme’s footer file, and add in the Facebook tracking Javascript file. The easiest way to do this is to go to Appearance->Editor in your WordPress admin.

Once you have the theme editor open, look for footer.php on the right sidebar. It’s a good idea just to copy and paste the content of this file and save it on your desktop in case something goes wrong.

STEP 2 – Edit the theme footer code

When footer.php has been loaded up, look for the following piece of code:

<?php wp_footer() ?>

And change it to:

<script src="//ah8.facebook.com/js/conversions/tracking.js"></script>
<?php wp_footer() ?>

This will load up the Facebook tracking Javascript functions, so that we can excute them later from Contact Form 7. The reason I put this in the footer is:

1. Because it’s not priority like the rest of your blog, it’ll only load last. This is also in accordance with the Yahoo Best Practices.
2. Because the footer.php is almost always less cluttered with code than the header, it’ll make it easier for less experienced users to insert the code.

After changing the code, click on ‘Update File’. This will save the footer file.

STEP 3 : Add tracking code to Contact Form 7

Right, now that we have the relevant Javascript file in place, we can get Contact Form 7 to execute the tracking code when a user submits the contact form. To do this, we’ll go the settings page of Contact Form 7. This can be found on the left sidebar of the WordPress admin.

When in the settings page, scroll down to “Additional Settings” and click ‘show’.

You now have to reference the code provided by facebook and get the ‘id‘ and ‘h‘ values:

try {
 FB.Insights.impression({
 'id' : 3546876354,
 'h' : '3bc5e0f'
 });
} catch (e) {}

Take these values and put them in the following code:

on_sent_ok: "FB.Insights.impression({'id' : 'id here', 'h' : 'h here'});"

So it resembles like the following:

on_sent_ok: "FB.Insights.impression({'id' : '3546876354', 'h' : '3bc5e0f'});"

You can then take this piece of code and insert into the Additional Settings area you opened. It will then look something like the following:

You can now click ‘Save’ to apply your changes. You should add the code to each of your contact forms, if you have created more than one. And that’s it, your Facebook ad conversion tracking should now work!

NOTE: If you use any caching plug-ins, you should probably empty the cache to take the changes you made into effect.

Edit:

There are quite a few posts around that goes through this step by step, but you can use the Google Analytics Asynchronous library (not the standard one) and track conversions like this:

on_sent_ok:"_gaq.push(['_trackPageview', '/about/contact/shop-thanks']);"

To combine the two, you could seperate the two trackers with a semicolon:

 on_sent_ok:"_gaq.push(['_trackPageview', '/about/contact/shop-thanks']);FB.Insights.impression({'id' : '3546876354', 'h' : '3bc5e0f'});"