How To Implement Facebook Pixel & Conversion API with ReCharge & Shopify
Elevar powers your data layer and server-side tracking needed to connect Facebook and ReCharge.
Integration Specs
- Channel Accuracy Monitoring
- Requires Elevar Data Layer
- GTM server-side client customizable
- Chrome Extension
- Elevar Server-Side
- GTM Server-Side
- GTM Web Container
What's Included
Events
What customer events are tracked in this integration
- Pageview
- Add To Cart
- Initiate Checkout
- Search
- Purchase
- View Content
- Email Signup
- Sitewide Tag
- Event ID
Customer Parameters
What customer parameters are tracked in this integration
- first name
- last name
- phone number
- address
- address 2
- city
- state code
- zip
- country code
- province
- 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 Facebook Pixel & Conversion API on your ReCharge checkout:
- 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
- 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.
Please note: if you are on the unified Shopify checkout with ReCharge then the setup is the same with our base Facebook CAPI integration for Shopify. So you don’t need to duplicate the steps from this guide.
Step 2: Add Data Layer to ReCharge Checkout Pages
Add the following to the “Enable JavaScript on page 1 of checkout” box
var cartItems = cart_json.line_items; window.dataLayer = window.dataLayer || []; var cartProducts = []; for (var i = 0; i < cartItems.length; i++) { var item = cartItems[i]; cartProducts.push({ 'id': item.sku, 'name': item.title, 'price': item.price, 'quantity': item.quantity, 'product_id':item.product_id, 'variant_id':item.variant_id }); } window.dataLayer.push({ "event": "dl_begin_checkout", "event_id": getEventId(), "cart_total": cart_json.subtotal_price, "ecommerce": { "currencyCode": cart_json.currency, "checkout": { "actionField": {"step":1}, "products": cartProducts } } }); function getEventId(){ var ga = ""; var name = "_ga" + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { var ga = c.substring(name.length, c.length); } } return ga + Date.now(); }
Step 3: Install Data Layer on ReCharge Thank You Page Settings
If you are still using ReCharge checkout (instead of unified checkout) you’ll need to manually add our data layer to the checkout thank you page settings.
Copy the script below and:
- Update the currency code (if needed)
- Input your GTM web container ID to replace the GTM-11111 placeholder
- Paste into your thank you page script configuration in ReCharge checkout settings
{% if first_time_load %} <script> window.dataLayer = window.dataLayer || []; </script> <script> window.dataLayer.push({ 'event': 'dl_subscription_purchase', "event_id": '{{ order_name }}', "user_properties":{ "customer_id": "{{ customer.shopify_customer_id }}", "customer_email": "{{ email }}", "customer_first_name": "{{ first_name }}", "customer_phone": "{{ shipping_address.phone }}", "customer_last_name": "{{ last_name }}", "customer_city": "{{ shipping_address.city }}", "customer_zip": "{{ shipping_address.zip }}", "customer_address_1": "{{ shipping_address.address1 }}", "customer_address_2": "{{ shipping_address.address2 }}", "customer_country": "{{ shipping_address.country }}", "customer_province": "{{ shipping_address.province }}" }, 'ecommerce': { 'currencyCode':'USD', 'purchase': { 'actionField': { 'id': '{{ order_name }}', 'order_name': '{{ order_number }}', 'affiliation': 'ReCharge', 'revenue': {{ total_price }}, 'discount_amount': {{ total_discounts }}, 'tax': {{ total_tax }}, 'shipping': {{ total_shipping }}, 'sub_total': {{subtotal_price}}, 'coupon': '{{ discount_code }}' }, 'products': [ {% for item in line_items %} { 'name': '{{ item.name }}', 'product_id': '{{ item.product_id }}', 'id': '{{ item.sku }}', 'variant_id': '{{ item.variant_id }}', 'price': {{ item.price }}, 'brand': '', 'category': '', 'variant': '{{ item.variant_title }}', 'quantity': {{ item.quantity }} }, {% endfor %} ] } } }); </script> {% endif %} <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-1111111');</script> <!-- End Google Tag Manager -->
Step 4: Import ReCharge Pre-Built Container from Elevar
Inside your Elevar dashboard navigate to the ReCharge pre-built container:
Then import into your Google Tag Manager web container into a New Workspace called “Elevar Facebook Pixel + CAPI”
Step 5: 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 inside your Elevar dashboard
- 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 Existing under Choose Workspace > and select 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 6: 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 7: 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 8: 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 9: 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 10: 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 11: 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 12: Add in Your Facebook Pixel ID & Access Token
1. Add in your Facebook Pixel ID
2. Add in your Facebook CAPI Access Token
3. Select Save & Continue
Step 13: 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 14: [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
Elevar offers two ways to implement the Facebook Pixel (client-side) and Conversion API for your Facebook pixel on your ReCharge checkout:
- Google Tag Manager & Elevar’s server-side tracking
- Google Tag Manager & GTM’s 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.
Please note: if you are on the unified Shopify checkout with ReCharge then the setup is the same with our base Facebook CAPI integration for Shopify. So you don’t need to duplicate the steps from this guide.
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: Install Data Layer on ReCharge Checkout Pages
Add the following to the “Enable JavaScript on page 1 of checkout” box
var cartItems = cart_json.line_items; window.dataLayer = window.dataLayer || []; var cartProducts = []; for (var i = 0; i < cartItems.length; i++) { var item = cartItems[i]; cartProducts.push({ 'id': item.sku, 'name': item.title, 'price': item.price, 'quantity': item.quantity, 'product_id':item.product_id, 'variant_id':item.variant_id }); } window.dataLayer.push({ "event": "dl_begin_checkout", "event_id": getEventId(), "cart_total": cart_json.subtotal_price, "ecommerce": { "currencyCode": cart_json.currency, "checkout": { "actionField": {"step":1}, "products": cartProducts } } }); function getEventId(){ var ga = ""; var name = "_ga" + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { var ga = c.substring(name.length, c.length); } } return ga + Date.now(); }
Step 4: Install Data Layer on ReCharge Thank You Page
If you are still using ReCharge checkout (instead of unified checkout) you’ll need to manually add our data layer to the checkout thank you page settings.
Copy the script below and:
- Update the currency code (if needed)
- Input your GTM web container ID to replace the GTM-11111 placeholder
- Paste into your thank you page script configuration in ReCharge checkout settings
{% if first_time_load %} <script> window.dataLayer = window.dataLayer || []; </script> <script> window.dataLayer.push({ 'event': 'dl_subscription_purchase', "event_id": '{{ order_name }}', "user_properties":{ "customer_id": "{{ customer.shopify_customer_id }}", "customer_email": "{{ email }}", "customer_first_name": "{{ first_name }}", "customer_phone": "{{ shipping_address.phone }}", "customer_last_name": "{{ last_name }}", "customer_city": "{{ shipping_address.city }}", "customer_zip": "{{ shipping_address.zip }}", "customer_address_1": "{{ shipping_address.address1 }}", "customer_address_2": "{{ shipping_address.address2 }}", "customer_country": "{{ shipping_address.country }}", "customer_province": "{{ shipping_address.province }}" }, 'ecommerce': { 'currencyCode':'USD', 'purchase': { 'actionField': { 'id': '{{ order_name }}', 'order_name': '{{ order_number }}', 'affiliation': 'ReCharge', 'revenue': {{ total_price }}, 'discount_amount': {{ total_discounts }}, 'tax': {{ total_tax }}, 'shipping': {{ total_shipping }}, 'sub_total': {{subtotal_price}}, 'coupon': '{{ discount_code }}' }, 'products': [ {% for item in line_items %} { 'name': '{{ item.name }}', 'product_id': '{{ item.product_id }}', 'id': '{{ item.sku }}', 'variant_id': '{{ item.variant_id }}', 'price': {{ item.price }}, 'brand': '', 'category': '', 'variant': '{{ item.variant_title }}', 'quantity': {{ item.quantity }} }, {% endfor %} ] } } }); </script> {% endif %} <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-1111111');</script> <!-- End Google Tag Manager -->
Step 5: 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 6: 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 7: 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:
Tags
- 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.
Variables
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 8: 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)*
- purchases
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 9: 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

Data Layer
FAQs
View common integration questions
-
If you are not on the legacy ReCharge checkout and all orders go through the standard Shopify checkout then you do not need to implement any additional changes. Just use our standard Shopify <> Facebook pixel integration and it will cover ReCharge orders.