How to Install Meta Pixel

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

What Is Meta Pixel?

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

Getting the Pixel Code from facebook

From Facebook:

1. Go to your Facebook Pixel tab in Events Mananger.
2. Click Get Started
3. Follow the instructions on Facebook, to set up your pixel.

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. (Alternatively, under Settings > Marketing > Analytics Script)

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

 ##SET[pixelstandardevents=fbq('track', 'InitiateCheckout');]##

Once the variable is set, paste ##SHOW[pixelstandardevents]## 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: 

##SET[pixelstandardevents=fbq('track', 'Purchase', {value: '##ORDERTOTAL##', currency: 'USD'});]##

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:

The above example does not cover all events that you can potentially track with Meta Pixel. Learn more about other standard events HERE.

For example, to pass product Ids you'd be interested in the "content_ids" property key. We have specific merge codes that are particularly useful for tracking scripts:

• ##GOOGLEREMARKETINGPAGETYPE## - Renders ‘home’, ‘searchresults’, ‘category’, ‘product’, ‘cart’, ‘purchase’, or ‘other’ depending on store page type.
• ##GOOGLEREMARKETINGPRODID## - On a product page renders ‘##ITEMID##’, on cart, checkout and orderview renders array of item ids, ex: [‘123’.’456’,’789’]
• ##GOOGLEREMARKETINGITEMNR## - will render item nr(s) instead of the ids
• ##GOOGLEREMARKETINGTOTALVALUE## - On a product page renders ‘##PRICERAW##’, on cart and checkout it renders the raw subtotal, and on order view renders the raw total.

You can view our full list of merge codes here: https://support.americommerce.com/hc/en-us/articles/201904240-What-Merge-Codes-are-available-