How to setup the facebook pixel with Squarespace

Update: Facebook pixel is now integrated into Squarespace. You can see how to update it here.

---

Using the Facebook pixel with Squarespace is simple but tracking events and conversions can be tricky without some guidance.

For example, the image below makes it seem like all you have to do is place one of the standard events(3) within the base pixel(2).

But if you do this, anytime someone hits a page on your site it would appear as an addtocart.

Meaning the data would be useless and wouldn't be able to optimize or retarget the real people who clicked add to cart.

So what to do?

I noticed there wasn't much out there about implementing this with Squarespace, so I've compiled everything you need to get up and running here.

You gon learn,

• All about pixel magic

• How to set it up correctly and make sure it's working, so you don't look crazy in front of your client

• How to track standard events in Squarespace, list below.

  • add to cart

  • purchase

  • leads/registration

  • view content

  • initiate checkout

What is this Pixel why do you need it

If you are running ads and you are not using the pixel to track these events, STOP.

In the words of Facebook:

(the) pixel is an analytics tool that allows you to measure the effectiveness of your advertising by understanding the actions people take on your website.

In other words, if you're running ads without this you're not gonna have a clue what's going on, how it's performing or how to make it better. 

However, if you follow these instructions exactly you can run some really innovative campaigns, and facebook is always making it's platform better and better. So don't miss out.

 

How to setup the Pixel

In your ad manager you’ll find Squarespace setup instructions listed under Partner Integrations.

You’ll get the base code which you will add to your page header injection. Advanced > Code Injection. This is the simple part. 

How make sure it's working

Remember, just because everything lights up green, doesn't mean it's working.

1. Download the Facebook Pixel Helper extension for Chrome.

2. Now when you check out your site you can see what's being tracked and whether the pixel is firing when and where it should. 

3. [Optional] You can also track events in real-time by going to Pixel Dashboard > Details > Analytics > Event Debugger. 

How to track purchase conversions

1. Settings > Advanced > Code Injection - ORDER CONFIRMATION PAGE

<script>
fbq('track', 'Purchase', {
value: {OrderGrandTotal},
currency: 'USD'
};
</script>

How to track leads and registrations

Add this script to your thank you page or if you don't have a thank you page you can use this in your form post-submit html. The same applies for registrations. 

Also, your funnel might end up in a scheduling app or something. 

<script>
fbq('track', 'Lead', {
  content_name: 'Homepage form'
});
</script>

How to track ViewContent for Products

This is useful for setting up Dynamic Product Ads which I'll talk about in another post.

1. Edit product > Additional Info

2. Add a code block and use the following scripts

<script>
  fbq('track', 'ViewContent', {
  content_name: 'Americana Pestemal',
  content_category: 'SALES',
  content_ids: ['SQ5435974'],
  content_type: 'product',
  value: 25.00,
  currency: 'USD'
 });
</script>

Once this is installed you should only see this fire for the product page you are on.

How to track add to cart and initiate checkout events

Here's the code you need to track Add to Cart and Initiate Checkout events.

Super useful to help rescue those abandoned carts.

1. Paste this in your site header and make sure Ajax loading is turned OFF in the style editor.

<!-- Facebook Pixel - Tracking clicks on Buttons -->

<script>
  function fpTrackingClicks() {
    // Add to Cart
    var cartButton = document.querySelector('.sqs-add-to-cart-button');
    if (cartButton) {
      cartButton.addEventListener('click', function() {
        fbq('track', 'AddToCart');
      }, false);
    }

    // Initiate Checkout
    Y.on('available', function() {
      var checkoutButton = document.querySelector('.checkout-button');
      checkoutButton.addEventListener('click', function() {
        fbq('track', 'InitiateCheckout');
      }, false);
    }, '.checkout-button');
  }

  document.addEventListener('DOMContentLoaded', fpTrackingClicks);
</script>
<!-- end Facebook Pixel - Tracking clicks on Buttons -->

Here's a preview of it working. 

What next?

Now you can leverage this data for...

• Retargeting

• Dynamic Product Ads

• Custom Audiences

If you need help with any of this stuff, get in touch here .

You can also join the Squarespace Entrepreneur Facebook Group here for more tips and advice on growing your business on Squarespace.