How to Correctly Add Facebook Marketing Tags to Your Website

Adding Facebook marketing tags (or the “pixel” as it’s also known) to your website can sometimes be trickier than it first seems. This post is going to shed some light on how best to do it, and how to achieve the more intricate bits of an integration. We’re going to initially split this down by popular platforms before getting into the more advanced parts.

Shopify

This is as straight forward as it gets. Shopify has a great first-party “App” (AKA plugin or module), which is available from the Shopify App Store. You can also add this by clicking the + next to Sales Channels in the side bar and choosing Facebook.

Providing you haven’t got a heavily customised theme, this should install and connect up with no issues, creating a Sales Channel alongside your Online Store. This will allow you to configure the Facebook pixel, which will track product views, add to cart, cart views, checkout views and purchases out of the box. This App also links up your product catalogue with Facebook.

WordPress (WooCommerce)

WordPress also has a first-party plugin, available from the WordPress plugin directory, called simply Facebook for WooCommerce. This will take care of the catalogue sync and also the Facebook pixel events. (There is also an official Facebook for WordPress plugin which is largely the same, but minus the e-commerce requirement.)

Unfortunately these plugins offer no settings for the Facebook pixel itself, and if you’ve got a heavily customised (or totally custom) theme, this may present problems. (See below for how to debug these issues!)

Magento 2

Unfortunately there is no official Facebook add-on for Magento 2, so we recommend buying and installing AppTrian’s Facebook Pixel. This module has a wealth of options and covers pretty much everything. As with most of the good, premium Magento 2 modules, the options can be daunting, however the defaults usually suffice for most cases.

This module does not cover synchronising your product catalogue to Facebook. For product feeds we recommend buying and installing Mirasvit’s Advanced Product Feeds. This is perfect for Google Shopping and also Facebook.

Debugging Common Problems

This wouldn’t be a web development article without a section covering debugging! The key thing here is to open Chrome and install the Facebook Pixel Helper extension. This will help you test your integration.

The most common problem we see is missing events. Some are less critical than others (Purchase being the most critical, and this can only be tested by placing a transaction in the website). You can fill in missing events by using the fbq() function which the Facebook pixel will make available for you.

Here’s an example of a common event we see missing, ViewContent, that’s been added into the WooCommerce single-product.php template;

fbq('track', 'ViewContent', {
  content_name: '<?php echo $product->get_title(); ?>',
  content_ids: ['<?php echo $product->get_sku(); ?>_<?php echo $product->get_id(); ?>'],
  content_type: 'product',
  value: <?php echo $product->get_price(); ?>,
  currency: '<?php echo get_woocommerce_currency(); ?>'
 });

Make sure to use hooks in your custom development work to potentially avoid these types of issues.