Facebook Pixel Event Tracking

Analytics & Tracking|Basic SEO - Last updated Dec 9, 2016

If you have a Facebook account you can create a facebook pixel to track activity on your website and help tailor your Facebook ads to that activity.

Below are instructions on how you can add the Facebook Pixel to your ShopSite website.

Add The Pixel Base Code

Start by copying the code below, and paste it into an include file called "FB-Pixel.sst" in your ShopSite store. Replace the "XXXXXXXXX" with your pixel ID.


<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','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXX'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXX&ev=PageView&noscript=1"
/></noscript>


Link Include File In All Template Types

In each of your template types, page, product, search and cart (you can also add this into the wishlist, customer registration and gift certificate pages if you want to track those) add the following code, as well as the corresponding [-- VAR.Type --] tag.

Page Template

Add [-- VAR.Type "page" --] just after the [-- DEFINE PAGE --] tag.

Add [-- INCLUDE FB-Pixel.sst PROCESS --] just before the </head> tag.


Product Template

Add [-- VAR.Type "more" --] just after the [-- DEFINE MORE_INFO --] tag.

Add [-- INCLUDE FB-Pixel.sst PROCESS --] just before the </head> tag.


Search Template

Add [-- VAR.Type "search" --] just after the [-- DEFINE PAGE --] tag.

Add [-- INCLUDE FB-Pixel.sst PROCESS --] just before the </head> tag.


Cart Template

Add [-- VAR.Type "cart" --][-- VAR.SubType "cart" --] just after the [-- DEFINE SHOPPING_CART --] tag.

Add [-- INCLUDE FB-Pixel.sst PROCESS --] just before the </head> tag in that same section.

Add [-- VAR.Type "cart" --][-- VAR.SubType "checkout" --] just after the [-- DEFINE SHIPPING --] tag.

Add [-- INCLUDE FB-Pixel.sst PROCESS --] just before the </head> tag in that same section.

Add [-- VAR.Type "cart" --] just after the [-- DEFINE Confirmation --] tag.

Add [-- INCLUDE FB-Pixel.sst PROCESS --] just before the </head> tag in that same section.

Add [-- VAR.Type "cart" --][-- VAR.SubType "thankyou" --] just after the [-- DEFINE ThankYou --] tag.

Add [-- INCLUDE FB-Pixel.sst PROCESS --] just before the </head> tag in that same section.


Other Templates

Add [-- VAR.Type "" --] just after the [-- DEFINE XXX --] tag.

Add [-- INCLUDE FB-Pixel.sst PROCESS --] just before the </head> tag.


Add Pixel Event Code

Paste the code below into the script from step 1, just below the "fbq('track', 'PageView');" line, and above the </script> line. This code will track individual actions on different types of pages, such as the shopping cart screen and the thank you page.

[-- IF VAR.Type "page" --]fbq('track', 'ViewContent');
[-- ELSE_IF VAR.Type "search" --]fbq('track', 'Search');
[-- ELSE_IF VAR.Type "more" --]fbq('track', 'AddToCart');
[-- ELSE_IF VAR.Type "cart" --]
  [-- IF VAR.SubType "cart" --]fbq('track', 'InitiateCheckout');
  [-- ELSE_IF VAR.SubType "checkout" --]fbq('track', 'AddPaymentInfo');
  [-- ELSE_IF VAR.SubType "thankyou" --]fbq('track', 'Purchase', {value: '[-- CART.Total NO_SYMBOL --] ', currency: 'USD'});
  [-- END_IF --]
[-- END_IF --]

Publish Your Website and Start Tracking

Go to Utilities > Publish > Regenerate, to recreate all store pages using the updated template files. You should now start receiving tracking information in your Facebook Ads Account in the Pixel tab.