Meta Pixel and Conversions API Setup Guide

TL;DR

The Meta Pixel tracks visitor actions in the browser, and the Conversions API sends them from your server.
Running both together is the standard setup, and it requires event deduplication.
Shopify connects both through its Meta sales channel, while Webflow needs more manual work.
Verify events in Events Manager and collect consent before tracking begins.

The Meta Pixel and the Conversions API are the two tracking methods most stores now combine, and this guide shows you how to install both correctly. It covers both Shopify and Webflow, step by step, then explains event deduplication, testing, and consent for Canadian stores. For the wider picture of growing an online store, explore the e-commerce SEO strategy guide.

What is the Meta Pixel?

The Meta Pixel is a snippet of code that runs in the visitor's browser and records actions on your site, such as page views, add-to-cart events, and purchases, using standard events Meta recognizes. It was formerly called the Facebook Pixel: same tool, newer name. Those events power ad optimization, retargeting, and reporting. Because the Pixel relies on the shopper's browser, ad blockers and privacy settings can stop it, a limitation covered below.

What is the Conversions API, and why it matters now

The Meta Conversions API sends events from your server directly to Meta instead of relying on the visitor's browser. Because the data travels server to server, tracking continues even when an ad blocker or privacy setting blocks the browser Pixel. You may also see it called the Facebook Conversions API, since it predates the Meta rebrand. It matters now because browser-based tracking alone can miss customer actions when the Pixel is blocked.

Conversions API vs Meta Pixel: the key differences

The Conversions API vs Meta Pixel comparison comes down to where the data is collected:

Here's the code for this one, in the same style. The header row only had the two names, so the top-left cell is empty, and the row labels are bold so they read as labels:

	Meta Pixel	Conversions API
Where it runs	In the browser	On your server
Setup effort	Easier to install	More technical
Resilience	Can be blocked	Continues when the browser is blocked
Best use	Real-time browser events	Reliable server events

Neither replaces the other. They complement each other, which is why the standard setup uses both.

Why you need both the Pixel and the Conversions API

Running the Meta Pixel and the Meta Conversions API together is now an industry-standard setup for advertisers who depend on accurate data. The Pixel captures browser events in real time, while the server sends events the browser misses, so together they give Meta richer, more complete data to optimize against. The pairing creates one new requirement: both sources will report the same purchase, so you need deduplication, covered later in this guide.

How to set up the Meta Pixel on Shopify

Laptop keyboard overlaid with lines of code, like the base code a Meta Pixel adds to a Shopify or Webflow site

The Shopify path is the most straightforward:

Create the Pixel in Meta Events Manager and note the Pixel ID
Install Shopify's Meta sales channel from the Shopify admin
Connect your Meta business account and select the same Pixel
Choose your data sharing level and confirm the connection

Using the native integration rather than hand-coding keeps the Facebook Pixel for Shopify maintained automatically as themes and checkout pages change.

How to connect the Conversions API on Shopify

On Shopify, the Conversions API is usually enabled through the same Meta integration you used for the Pixel. In the sales channel's data sharing settings, choose the option that adds server-side sharing, where supported. Confirm that the connection uses the same Pixel ID as your browser setup, so both data streams land in one place. Once enabled, browser and server events both appear in Events Manager, where you can check that purchases arrive from each source.

How to install the Meta Pixel and Conversions API on Webflow

Webflow requires more manual work than Shopify. Add the Meta Pixel base code in your site's custom code head section, or in the integration field Webflow provides, then publish the site so the code goes live. Standard events such as form submissions need extra event code on the relevant pages. The Conversions API on Webflow typically needs a connector, because Webflow has no native server event layer to send events to Meta.

How event deduplication prevents double-counting

When both the Pixel and the Conversions API report the same order, Meta needs to recognize it as one sale, not two. Deduplication works by sending a matching event_id and event_name from both sources. When Meta sees the same pair arrive from the browser and the server, it keeps one event and discards the duplicate. Without that match, reports overcount conversions, and campaigns optimize against numbers that aren't real.

Verifying your setup with Meta Pixel Helper and Events Manager

Never assume the setup works. Install the Meta Pixel Helper Chrome extension and browse your store to confirm the Pixel loads and fires on key pages, including product, cart, and checkout. Then open Events Manager and use Test Events to confirm that server events arrive and are deduplicated against browser events. Clean tracking also supports later optimization work, such as the steps in the Shopify conversion rate optimization guide.

Privacy, consent, and compliance for Canadian stores

Canadian stores should collect cookie consent before the Meta Pixel fires, and bilingual stores should present consent notices in both English and French where relevant. Server-side tracking does not remove consent obligations: Conversions API events still need a lawful basis and must respect the choices shoppers make. Build consent into the page experience rather than bolting it on, so that clean, consent-aware tracking supports your wider landing page optimization work.

Where expert setup support fits for Canadian stores

Hands on a laptop surrounded by floating analytics dashboards, the conversion reporting the Meta Conversions API feeds

Growth Hacker is a Montreal agency that builds and optimizes Shopify and Webflow stores for the bilingual Canadian market, with founder Khalil El-Khoury leading strategy. For bilingual Quebec stores, tracking must fire consistently across the English and French versions of every page, which is a built-in consideration rather than an afterthought. Tracking also connects directly to paid media, which is where the team's work as a Google Ads agency in Montreal comes in.

Conclusion

The most reliable tracking setup combines the Meta Pixel in the browser with the Conversions API on the server, connected to the same Pixel ID and deduplicated with matching event IDs and names. On Shopify, the native Meta integration handles most of the work, while Webflow needs custom code and a connector. Verify every event with Meta Pixel Helper and Test Events, collect consent first, and your reporting will give Meta the most complete picture your setup allows

FAQs

Can I track custom events beyond e-commerce purchases on Webflow?

Yes. Beyond standard e-commerce events, you can track custom events such as form submissions, booking requests, newsletter sign-ups, or clicks on key buttons. On Webflow, that usually means adding event code to the relevant pages or elements, and sending the same events through your Conversions API connector. Give each action a clear, consistent name so your reports stay organized and the audiences you build from them stay easy to use.

Do I need cookie consent before the Meta Pixel fires?

In general, yes. Consent is typically required before tracking begins, so the Pixel should wait until a visitor accepts the relevant cookies. Bilingual EN/FR stores should present consent notices in both English and French so every shopper can make an informed choice. Server-side events sent through the Conversions API still fall under consent obligations, so the server setup should respect the same choices as the browser Pixel. Check the rules that apply in your province before launch.

What is Event Match Quality and why does it matter?

Event Match Quality is a score in Events Manager that reflects how well the customer information sent with your events lets Meta match those events to real people. Details such as email addresses or phone numbers, sent securely through the Conversions API, can improve the score. Better matching gives Meta more reliable data to optimize your campaigns and build audiences, which is one of the main reasons to add server-side events.

How long does it take to set up Facebook Conversions API on Webflow?

It depends on the method you choose. Using a connector or integration service is usually the faster route, because the connector handles the server side and you mainly configure events and test them. A fully custom server integration takes longer and needs developer time. Either way, Webflow generally involves more manual work than Shopify's native path, so plan time for adding event code, testing in Events Manager, and confirming deduplication.

Does the Meta Pixel work if I'm not running ads?

Yes. The Meta Pixel collects event and audience data whether or not you have active campaigns, as long as it is installed and consent is in place. Installing it early is a smart move because it builds a history of site activity and past-visitor audiences before you spend anything. When you do start advertising, campaigns can use that history to optimize and retarget instead of starting from zero.

How many Meta Pixels can I have per ad account?

An ad account can be connected to more than one Pixel, so businesses running several brands or websites can keep their data separate. Most single stores, though, need only one. Using one Pixel ID for both the browser Pixel and the Conversions API keeps all events in one place, which makes deduplication work and gives Meta a unified view of each customer journey. Extra Pixels on the same site mainly create confusion.