How To Implement Facebook Pixel & Conversion API with Shopify via GTM
Elevar powers your data layer and server-side tracking needed to connect Facebook and Shopify.
- Channel Accuracy Monitoring
- Requires Elevar Data Layer
- GTM server-side client customizable
- Chrome Extension
- Elevar Server-Side
- GTM Server-Side
- GTM Web Container
What customer events are tracked in this integration
- Add To Cart
- Initiate Checkout
- View Content
- Email Signup
- Sitewide Tag
- Event ID
What customer parameters are tracked in this integration
- first name
- last name
- phone number
- address 2
- state code
- country code
- customer id
- order id
- line items
- fbp cookie value
- fbc cookie value
Steps to Implement
Step 1: Overview
Elevar offers two ways to implement the Conversion API for your Facebook pixel
- Elevar’s server-side tracking
- GTM server-side container (via Elevar)
If you are using your own GTM server-side container connected to Google Cloud then you can follow our related guide on this setup here.
Before you can enable your Facebook Conversion API Destination, you will need to:
- Install Elevar’s Data Layer on your store [ShopifyPlus Guide] [Shopify non-Plus Guide]
- Enable Data Layer Listener Source in Server-Side settings in your Elevar dashboard
- Enable Shopify Notifications Source in Server-Side settings in your Elevar dashboard
You can follow Step 2 from the client-side guide for more details on the data layer installation process.
Step 2: Import your Pre-Built Facebook Pixel Tags to Google Tag Manager
Facebook currently recommends sending both your Pixel events [Browser/Client-Side Tagging] and your Conversion API data [Server-Side Tagging] to Facebook, and Facebook will deduplicate identical events.
To set up your Facebook Pixel with the needed deduplication setup:
- Navigate to your Pre-Built Facebook Pixel & CAPI Tags. [ShopifyPlus] [Shopify Non-Plus]
- Add in your Facebook Pixel ID > Select Download Container
- Log into Google Tag Manager > Select your desired Web GTM Container
- Navigate to Admin > Import Container > Upload the file you just downloaded from Elevar
- Select New under Choose Workspace > titled it Elevar Facebook Pixel + CAPI
- Select Merge > Then select Overwrite > Then Confirm
- [Optional] QA the newly uploaded tags using Google Tag Manager’s Preview Mode
- Once you’re ready to publish, navigate to the Elevar Facebook Pixel + CAPI Workspace > Select Submit at the top right > Then Publish
Step 3: Add Facebook as a Server-Side Destination
1. In your Elevar App, navigate to Server-Side > Select Add Destination > Find and select Facebook.
2. You’ll be taken to an Overview Page, select Get Started
Step 4: Select Your Events
In this first step you are simply choosing what events you want enabled for your Conversion API.
By default, we’ve already selected the standard recommended events for you! Most likely, you won’t need to adjust anything and can just select Save to continue to the next step.
If you are a subscription business then you have the option to also:
- Send “Purchase” events anytime your customers purchase a subscription (e.g. Subscription First Order).
- Send “Subscribe” events anytime your customers purchase a subscription (e.g. Subscription First Order). If you also sell one-time products via native Shopify checkout then this event can help you distinguish between first-time and subscription purchases inside of Facebook. Note: recurring orders are handled separately in the Subscription settings below.
Purchase events are also sent to Facebook utilizing Shopify Notifications via a webhook listening to orders created. This is configured in lieu of sending CAPI events from the browser.
This allows you to maximize the conversion accuracy tracked and also allows you to send purchase events from other “Channels” from your Shopify store besides just “Online Store” channel.
Step 5: Select Content Type
The majority of stores on Shopify will use product_group for this. Most likely, you won’t need to adjust anything and can just select Save to continue to the next step.
If you want to learn more about this setting, visit this Facebook article.
Step 6: Select your Product Identifier
Product ID is the most common primary product identifier in Facebook catalog integrations. You’ll want to match the product identifier used in your Pixel/CAPI tracking to the product identifier you use in your Product Catalog in Facebook.
If you are migrating from the native Shopify <> Facebook Channel, then you will likely leave this as Product ID. The Shopify <> Facebook Channel uses the Product ID by default, so this will map over as you currently have it.
Our pre-built tags also use Product ID by default. So if you select Product ID in this step, nothing further needs to be done. You can save & continue to the next step.
If you choose a different Product Identifier for your Facebook Conversion API, be sure to change your Facebook tags in Google Tag manager to match! This will need to be updated for your Product View, Add to Cart, Initiate Checkout, Add Payment Info, and Purchase Facebook Tags in Google Tag Manager.
Step 7: Block Transactions
This step allows you to control exactly what purchase events are sent to Facebook’s Event API. You can block orders based on Source Channel Names, Order Tags or Order Gateways.
Two common scenarios where you may want to block orders are: recurring orders & offline orders. Learn how to block these orders in this guide.
Not sure if you need to block orders? Look at what Sales Channels you have in Shopify!
Step 8: Configure your Subscription Settings
If you sell subscriptions then you have the option to:
- Send the first order only, and block all recurring orders from going to Facebook.
- Send first and recurring orders to Facebook.
When sending recurring orders, we automatically set the action_source to “system generated” per Facebook guidelines on these types of orders.
Learn more about this Facebook parameter setting here.
Step 10: Go Live & Remove Previous Tracking
Select Go Live on the Overview Page to launch your new Facebook CAPI tracking.
Be sure to remove any pre-existing Facebook tracking setup if you haven’t already done so! (if you’re using native Shopify follow this guide)
Also be sure to have your Facebook Pixel tracking published in Google Tag Manager as instructed in Step 1.
Step 11: [optional] Prefer to Use Google Tag Manager Server-Side Container?
If you are using your own GTM server-side container connected to Google Cloud then you can follow our complete guide on this setup here.
Step 1: Overview
It’s likely you will be implementing the Conversion API for your Shopify store in addition to just the pixel.
You can follow this guide in addition to the server-side steps if you are utilizing Elevar’s server-side tracking for your Facebook pixel integration.
Step 2: Install Data Layer to Your Store
In order to deploy Facebook Pixel tracking via Google Tag Manager tags, you need to have a data layer implemented on your Shopify store that pushes customer, product, and order data that Facebook tags require.
If you don’t have a data layer for your Shopify store yet, then you can utilize Elevar’s data layer for Shopify. It’s a 1-click installation into your theme.
Step 3: Download Container for GTM
Inside of your Elevar account, go to Pre Built Tags > Facebook.
Update your Facebook Pixel ID in the tag settings shown below.
Step 4: Import Container to GTM
Next up, go to your Google Tag Manager container > Admin > Import.
Be sure to select Merge container, not overwrite.
Once you’ve imported our container then you will have a set of Facebook tags inside of GTM that looks similar to this:
Verify your Pixel ID variable is accurate.
Step 5: Match Your Product IDs In Tags & Variables
In order to run dynamic product remarketing advertising, then you have to send the same product content IDs from your pixel to match your product content IDs that you upload to Facebook with your product feed.
By default all Facebook tags are using Shopify’s Product ID as the primary content ID.
If you already have your product catalog connected to Facebook then you can go to Facebook Business Center > Catalogs > click on your Catalog and a product of yours. You should see something like this that contains Content ID and Item Group ID.
It is most likely that your product ID is either:
- Variant SKU
- Product ID
- Variant ID
Here’s an example from Facebook:
Here is what a valid product match looks like:
*Click here to download the Facebook Pixel Helper Chrome Extension
This is an invalid product match:
If your Content ID is something other than product ID, then go to GTM and update the following tags and variables:
- Facebook – Product View
- Facebook – Add to Cart
Here is how to switch things out for the Product View tag.
For Product ID
Note: Be sure to confirm the ‘Content_Type‘ if it’s using ‘product‘ or ‘product_group‘
Then hit Save.
Now you need to update 3 variables that are used in Facebook’s checkout related tags.
Here is how to switch things out for the Initiate Checkout variable which you can replicate to the Purchase/Thank you page variable.
Here’s the correct matching variable for version 2.0 of Elevar’s data layer:
- Variant SKU – .id
- Product ID – .product_id
- Variant ID – .variant_id
Step 6: QA & Publish
You can begin testing with GTM in preview mode or publish your workspace.
Be sure you are using the Facebook Pixel Helper Chrome Extension to validate the tag data is correct.
You should see a green checkmark for the various Facebook events:
- view product pages
- add to cart
- initiate checkout (if you are on Shopify Plus)*
Note: Purchase and Initiate Checkout
The Facebook Transaction reporting has been improved with new callouts:
- The contents group that contains line item data (ID, Product Name, Product Category, Item Price and Quantity)
- Manual advanced matching which contains a hashed version of fn/ln etc., of purchaser
Step 7: Remove your Shopify Facebook Pixel
Once you publish your GTM container then go to your Admin > Online store > Preferences > Facebook Pixel and remove this setting below.
If you have previously upgraded to the Shopify Facebook App then you will need to disable the data sharing settings here as well:
Once you’ve completed this step then that’s it – you are live with Facebook tracking via GTM!
Compatible Data Sources
View common integration questions