How To Implement Facebook Conversion API on ReCharge via GTM

Elevar powers your data layer and server-side tracking needed to connect Facebook and ReCharge.

intermediate Implementation Difficulty

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
  • Initiate Checkout
  • Purchase
  • Base Tag
  • Event ID

Customer Parameters

What customer parameters are tracked in this integration

  • first name
  • last name
  • phone number
  • e-mail
  • address
  • address 2
  • city
  • state code
  • zip
  • country
  • country code
  • province
  • customer id
  • customer status
  • order id
  • line items

Step 1: Overview

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. Elevar helps with legacy ReCharge checkout as well as v2 that is in the native Shopify checkout.

This is possible with Elevar’s data layer, server-side tracking, 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.

Step 2: Install Data Layer on Website

Once the Elevar data layer is installed on your website then you have:

  1. All of the standard eCommerce events tracking like product view, add to carts, etc.
  2. Marketing attribution data that is collected and attached to the shopper.

If a user visits your site from a paid ad then we are storing attribution data such as:

  • UTM parameters
  • gclid
  • fbclid
  • ga and ga4 cookie values (for Google Analytics)
  • fbc and fbp cookie values (for Facebook)

This data is also visible in your data layer as shown here:

Datalayer screenshot

The reason this step is important is because we attach this data to the user’s shopping cart and when the user completes their purchase on ReCharge, this data is attached to the order that we use in our server side integrations with Shopify.

Step 3: Install Data Layer on ReCharge

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 -->

That’s it!

Step 4: Configure Server-Side Sources in Elevar

The next step is to configure your server side sources inside your Elevar dashboard.

elevar server side settings

Install Data Layer Listener

This is an addition to our data layer that routes user activity (i.e. add to cart) to Elevar. From here Elevar’s server sends the data to your server side destination (i.e. Facebook CAPI).

Inside your Elevar Server Side Settings, go to your Sources as shown in the image above and complete the 1-click install of the data layer listener.

Install Shopify Webhook Notifications

This next source enables the Shopify server < = > Elevar server integration for all of your transactions.

Step 5: Configure Sitewide Facebook Pixel

When enabling Facebook pixel and conversion API events via Elevar, we send the following events:

  • PageView
  • ViewContent
  • AddToCart
  • InitiateCheckout
  • AddPaymentInfo
  • Purchase
  • Subscribe (which is for ReCharge orders only)
  • Search
  • CompleteRegistration

To get started, complete these two steps first prior to configuring your server side settings.

Step 1: Import Facebook Pixel events to Google Tag Manager web container

Inside your Elevar dashboard, you can download this pre-built container for your GTM web container.

Screen Shot 2021-11-10 at 9.43.56 AM

Step 6: Import ReCharge pre-built container add-on for pre-purchase checkout events

This is also included in your Elevar pre-built container’s.

Simply download and import to your GTM web container.

Screen Shot 2021-11-10 at 9.44.26 AM

Step 7: Enable the Facebook destination in your server side settings

Inside Elevar, you’ll go through a step by step wizard to help configure your integration.

Remember – this configuration is for all of your transactions in your Shopify store, not just those created by ReCharge.

Since Elevar has access to all orders to send to Facebook Conversion API, you’ll need to decide:

  1. Do you want to block recurring orders from being sent to Facebook?
  2. Do you want transactions from other channels (besides ReCharge or Online Store) sent to Facebook?

You can control these configurations inside your Elevar settings.

Screen Shot 2021-11-10 at 9.45.18 AM

If you are using your own GTM server-side container then you’ll need to follow these steps inside your GTM server-side container that we provide for you to import.

Step 8: 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. Go live with your Elevar server-side Facebook destination (or publish server side container if you are using GTM server-side)
  3. Remove Facebook pixel from ReCharge settings
  4. Disable your native Shopify <> Facebook pixel integration

disable-recharge-fb-pixel

That’s it!

Compatible Data Sources

Data Layer

Complete data layer for Google Tag Manager including all native events and variables for Shopify.
Learn More

Shopify Webhooks

Used for our server-side integrations for 100% purchase capture rate.
Learn More

FAQs

View common integration questions

  • If you are on ReCharge PRO legacy checkout then you can enable GTM data layer in your ReCharge settings. Elevar's prebuilt containers that you import handle this by default.
  • No, this will cause duplicate tracking events.