Guide

Implement Facebook Conversion API on ReCharge via GTM

With the experience of Elevar tagging experts that have implemented ReCharge tracking for 100’s of stores, all Shopify merchants can now implement the Facebook Conversion API on ReCharge on their own as well.

This is possible with Elevar and Google Tag Manager using the most up-to-date requirements for iOS14 Facebook requirements.

Plus – this integration comes with built-in data layer error monitoring so you’re the first to know when a tag breaks and risks impacting your campaigns. Learn more about how to get started below.

About ReCharge

ReCharge is a leading subscription provider for Shopify, powering thousands of successful direct to consumer subscription businesses.

Integration Specs

  • Available for Elevar Error Monitoring: Yes
  • Require Elevar Data Layer: Yes
  • Is Google Tag Manager Template Customizable: Yes
  • Require Server Side Container for GTM: Yes
  • Implementation Skill Level: Advanced
  • Available on Elevar Plans: Basic and up (view plans here)

Facebook Events Included in Template

  1. Purchase
  2. Subscribe
  3. event_id for deduplication with pixel (pixel must run through GTM)

User Properties Included in Template

  1. Email
  2. Customer ID
  3. First Name
  4. Last Name
  5. City
  6. Zip
  7. Address 1
  8. Address 2
  9. Country
  10. Province

Steps To Implement Facebook Conversion API with ReCharge

Follow these steps to get your tag tracking in no time:

  1. Elevar Data Layer implemented on your website and ReCharge
  2. Create GTM server side container following Elevar instructions
  3. Generate Facebook Conversion API token
  4. Import GTM Web container with Elevar <> ReCharge Pre-Built Container
  5. Import GTM Server container with Elever <> Facebook Conversion API server side container
  6. Remove native ReCharge Facebook Pixel

Step 1: Data Layer Implementation

You need to implement the Elevar data layer to the exact spec outlined below. This is a mandatory step for the FB CAPI integration.

If you modify from the steps below then the integration may not work.

If you are on ReCharge PRO then follow this step to enable the native data layer for the initiate checkout and payment page event tracking:

If the Google Tag Manager integration is not available in your account already, reach out to ReCharge to have this feature made available on your account (GTM integration found by clicking wrench icon in top right → Checkout)

Screenshot of feature not available:

recharge-nopro

Screenshot of feature available (notice the checkbox):

gtm available on recharge

The native ReCharge integration adds GTM to all pages of the ReCharge checkout.

Not on ReCharge Pro? Don’t worry – this won’t prevent you from adding the FB Conversion API to your Recharge transactions. However, you won’t be able to send Initiate Checkout events from the 1st step of ReCharge checkout.

For all ReCharge plans (PRO and non-PRO), copy the Elevar dataLayer shown below to the “Thank you page” box 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':'',
'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 -->

This will be used for the Facebook Conversion API integration that includes the event_id deduplication required.

With the ReCharge data layer enabled and Elevar dataLayer on the thank you page, run all Facebook events through GTM instead of using ReCharge Facebook Pixel.

This allows you to include all product data and advanced matching parameters in the Facebook conversion events.

Step 2: Create Server Side Container for GTM

The tl;dr on a server side container for GTM is:

  • It allows you to create a 1st party domain to collect and manage your customer data (e.g. marketing.yourdomain.com)
  • It allows for server to server connections for other uses besides Facebook CAPI. Google Analytics, affiliates, etc.
  • Improves the quality and accuracy of data collected for attribution and other analysis

We have complete guides on how to get this up and running.

Once you’ve signed up for Elevar you will see step by step instructions for creating your server side container:

server-container

You can also view our complete guide here on server side tagging.

Step 3: Create Facebook Conversion API token

This is the easiest step – it takes less than a minute.

Follow our help docs guide here.

This is part of Elevar server side tagging setup process so be sure to follow step 2 above closely.

Step 4: Implement Facebook Pixel Via GTM

Whether you have a Shopify checkout in addition to ReCharge or ReCharge only then you will need to disable the native Shopify <> FB Pixel integration to prevent duplicate conversion tracking.

This is the trade off in order to implement the ReCharge <> Facebook Conversion API integration via Elevar.

The Facebook pixel and Conversion API is implemented via Google Tag Manager across your entire store.

By moving to GTM, you can replicate the same data and events with the native Shopify <> FB Pixel Integration, plus you get the added benefit of:

  • CAPI events for view content, add to cart, and initiate checkout
  • Resetting the fbp Facebook Cookie to 90 days (instead of 7 days which some browsers otherwise enforce)
  • Implement CCPA and/or GDPR compliance with your pixel and server side CAPI event

Inside your Elevar account you will find a pre-built container that has all of the events required for your base pixel integration:

fb-pixel-capi

This help guide walks through this entire process as part of Elevar onboarding.

Once you’ve imported to GTM then you’ll also need to check the Subscription and Subscribe checkboxes on the Facebook Server Side Events tag found in your web container:

enable-subscription-events

This enables the following:

  • A “Purchase” event sent when users complete purchase on ReCharge
  • A “Subscribe” event when users complete purchase on ReCharge

subscribe-events

If you are ReCharge PRO, then download the ReCharge add-on event container and import into GTM:

recharge-facebook-conversion-api-elevar

That’s it.

Step 5: Download and Import GTM Server Container

Next up is implementing your server side conversion API events for all of your Shopify and ReCharge events.

Inside your Elevar dashboard navigate to your server side pre-built tag template:

fb-server-tag-template

Input your Facebook pixel ID and token and download the container.

This container already has the configurations mapped to your ReCharge purchases in addition to the remainder of your Facebook events (view content, add to cart, etc).

You can follow this same help guide shared in the above pixel integration.

Step 6: Publish and Remove Native ReCharge Pixel

Once the steps above are completed and you’re ready to go live you’ll need to complete the following:

  1. Publish web container
  2. Publish server side container
  3. Remove Facebook pixel from ReCharge settings
  4. If you are deploying all Facebook sitewide events (including your Shopify store) then you’ll need to disable your native Shopify <> Facebook pixel integration as well.

disable-recharge-fb-pixel

That’s it!

Don't Have An Elevar Account Yet?

Create your account today to get started with your ReCharge + Facebook CAPI integration.

Common Issues

  1. Facebook pixel is not removed from Shopify which results in duplicates
  2. Tags not configured in GTM using Elevare pre-built container
  3. Server side GTM container URL not created