Facebook Pixel Event Tracking

Analytics & Tracking|Basic SEO - Last updated Jan 9, 2018

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.visibilityevents.js');
fbq('init', 'XXXXXXXXX'); // Insert your pixel ID here.
fbq('track', 'PageView');
[-- IF VAR.Type "page" --]fbq('track', 'ViewContent',{
  content_ids: prodids,
  content_type: 'product'
});
[-- ELSE_IF VAR.Type "more" --]fbq('track', 'ViewContent',{
  "content_ids": "[-- PRODUCT.Sku --]",
  "content_type": "product",
  "value":"[-- IF PRODUCT.SaleAmount --][-- PRODUCT.SaleAmount NO_SYMBOL --][-- ELSE --][-- PRODUCT.Price NO_SYMBOL --][-- END_IF --]","currency":"USD"
});
[-- ELSE_IF VAR.Type "search" --]fbq('track', 'Search');
[-- ELSE_IF VAR.Type "cart" --]
  [-- IF VAR.Secure "no" --]fbq('track', 'InitiateCheckout');
  [-- ELSE_IF VAR.SubType "checkout" --]fbq('track', 'AddPaymentInfo');
  [-- ELSE_IF VAR.SubType "thankyou" --]
fbq('track', 'Purchase', { 
    content_type: 'product',
    content_ids: ss_sku,
    value: [-- CART.Total NO_SYMBOL --],
    currency: 'USD'
});
  [-- END_IF --]
[-- END_IF --]
</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.


AddToCart Pixel Event Code

The last action that you will likely want to add to your templates is the event "AddToCart" when a customer adds a product to their cart. You can do this by adding the following code just above the </body> tag in your product template. Make sure also that your add to cart form has id="form[-- PRODUCT.RecordNumber --]" as an attribute.

<script type="text/javascript">
$("#form[-- PRODUCT.RecordNumber --]").bind('submit', function(){
      fbq('track', 'AddToCart', {
        content_name: '[-- PRODUCT.Name REMOVE_HTML --]', 
        content_ids: ['[-- IF PRODUCT.Sku --][-- PRODUCT.Sku --][-- ELSE --][-- PRODUCT.RecordNumber --][-- END_IF --]'],
        content_type: 'product',
        value: [-- IF PRODUCT.SaleAmount --][-- PRODUCT.SaleAmount NO_SYMBOL --][-- ELSE --][-- PRODUCT.Price NO_SYMBOL --][-- END_IF --],
        currency: 'USD' 
      }); 
});
</script>

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.