How To Implement Facebook Pixel & Conversion API with ReCharge & Shopify

Elevar offers two ways to implement the Facebook Pixel & Conversion API on your ReCharge checkout:

1. Elevar’s server-side tracking
2. 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.

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:

1. Update the currency code (if needed)
2. Input your GTM web container ID to replace the GTM-11111 placeholder
3. 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 -->

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:

1. Navigate to your Pre-Built Facebook Pixel & CAPI Tags inside your Elevar dashboard
2. Add in your Facebook Pixel ID > Select Download Container
3. Log into Google Tag Manager > Select your desired Web GTM Container
4. Navigate to Admin > Import Container > Upload the file you just downloaded from Elevar
5. Select Existing under Choose Workspace > and select Elevar Facebook Pixel + CAPI
6. Select Merge > Then select Overwrite > Then Confirm
7. [Optional] QA the newly uploaded tags using Google Tag Manager’s Preview Mode
8. Once you’re ready to publish, navigate to the Elevar Facebook Pixel + CAPI Workspace > Select Submit at the top right > Then Publish

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:

1. Send “Purchase” events anytime your customers purchase a subscription (e.g. Subscription First Order).
2. 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.

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.

If you sell subscriptions then you have the option to:

1. Send the first order only, and block all recurring orders from going to Facebook.
2. 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.

Select Go Live on the Overview Page to launch your new Facebook CAPI tracking.

Elevar offers two ways to implement the Facebook Pixel (client-side) and Conversion API for your Facebook pixel on your ReCharge checkout:

1. Google Tag Manager & Elevar’s server-side tracking
2. 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.

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();
}

Inside of your Elevar account, go to Pre Built Tags > Facebook.

Update your Facebook Pixel ID in the tag settings shown below.

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

1. Facebook – Product View
2. 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

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!