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
Settings > Advanced > Code Injection - ORDER CONFIRMATION PAGE
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.
How to track ViewContent for Products
This is useful for setting up Dynamic Product Ads which I'll talk about in another post.
Edit product > Additional Info
Add a code block and use the following scripts
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.
Paste this in your site header and make sure Ajax loading is turned OFF in the style editor.
Here's a preview of it working.