How to Install Facebook Pixel

1. What is facebook Pixel?
2. Getting the Pixel Code from facebook
3. Installing the base code into Head Tags of Every Page
4. Installing Standard Event Code on Specific Pages

What Is facebook Pixel?

facebook Pixel is a free web analytics service that provides statistics and basic analytical tools for market purposes. You can find more information about facebook Pixel here. This walkthrough will show you where to install the facebook Pixel code within the Spark Pay Admin Console.

Getting the Pixel Code from facebook

From facebook:

1. Go to your facebook Pixel tab in Ads Mananger.
2. Click Create a Pixel
3. Enter a name for your pixel. There's only one pixel per ad account, so choose a name that represents your business.
4. Make sure you've checked the box to accept the terms
5. Click Create Pixel.
6. Go to your facebook Pixel tab in Ads Manager.
7. Click Actions > View Pixel Code.
8. Click the code to highlight it.
9. Right-click and select Copy or use Ctrl+C/Cmd+C.
10. Click Done.

Installing the base code into Head Tags of Every Page

The facebook Pixel Javascript code has two parts: the base code, and standard events. The base code is required and is what makes the whole thing work. The base code goes into the head tags of your theme.

To put the base code into your theme's head tags, navigate to Themes > Edit Theme > Head Tags and paste the Pixel Base Code at the bottom of the HTML editor.

Installing Standard Event Code on Specific Pages

Standard events are optional pieces of code that track specific events like purchases, add to wishlist, and add to cart. Unlike the base code, which goes on every page, standard event code snippets only go on the specific pages that correspond to the event.

For example, here is the code to track when a customer starts the checkout process: 

fbq('track', 'InitiateCheckout');

The initiate checkout code should only be placed in the head tags of the One Page Checkout page. To accomplish this, we will need to use Generic Variable Merge Codes. Generic variable merge codes allow you to create your own variables that you can use in a page's HTML. 

First, we must set the variable on the specific page, then we will paste that variable into Themes > Edit Theme > Head Tags. 

To set the variable for initiate checkout, the following code can be pasted in Themes > Edit Theme > One Page Checkout > HTML Editor: 

Once the variable is set, paste fbq('track', 'Purchase', {value: '##ORDERTOTAL##', currency: 'USD'}); into the script in Themes > Edit Theme > Head Tags like so:

When a customer proceeds to the checkout page, the value we set for the pixelstandardevents variable gets replaced with it's value. We can see this by placing a test order, then viewing the source of the checkout page: 

To track another event, we just need to set the variable on the corresponding page using the event's code. For example, to track purchases, we would paste the following code into Themes > Edit Theme > Order View > HTML Editor: 

Notice "0.00" is replaced with the ##ORDERTOTAL## merge code. The ##ORDERTOTAL## merge code will be replaced with the order's total on the order view page: