Guide

Implement Facebook Conversion API on Upscribe via GTM

Need to implement the Facebook Conversion API on your Upscribe subscriptions platform?

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

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 Upscribe

Upscribe is a new merchant centric subscription platform for high growth Shopify brands.

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 Upscribe

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

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

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.

In Upscribe, go to Settings => Integrations.

Then in the GTM box enter the GTM container ID and click save. This adds GTM to all pages of the Upscribe checkout along with a data layer.

Next go to Settings => Success Page, copy the Elevar data layer below, and complete the following steps;

  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 Upscribe success page settings
{% if is_first_load %}
<script>
window.dataLayer = window.dataLayer || [];
</script>
<script>
window.dataLayer.push({
'event': 'dl_subscription_purchase',
"event_id": '{{ order.order_number }}',
"user_properties":{
"customer_id": "{{ order.customer.id }}",
"customer_email": "{{ order.customer.email }}",
"customer_first_name": "{{ order.customer.first_name }}",
"customer_phone": "{{ order.customer.default_address.phone }}",
"customer_last_name": "{{ order.customer.last_name }}",
"customer_city": "{{ order.customer.default_address.city }}",
"customer_zip": "{{ order.customer.default_address.zip }}",
"customer_address_1": "{{ order.customer.default_address.address1 }}",
"customer_address_2": "{{ order.customer.default_address.address2 }}",
"customer_country": "{{ order.customer.default_address.country }}",
"customer_province": "{{ order.customer.default_address.province }}",
"customer_province_code": "{{order.customer.default_address.province_code}}",
"customer_order_count": "{{order.customer.orders_count}}",
"customer_total_spent": "{{order.customer.total_spent}}"
},
'ecommerce': {
'currencyCode':"{{order.presentment_currency}}",
'purchase': {
'actionField': {
'id': '{{ order.order_number }}',
'affiliation': 'Upscribe',
'revenue': {{ order.total_price }},
'tax': {{ order.total_tax }},
'shipping': {{ order.total_shipping_price_set.presentment_money.amount}},
'sub_total': {{order.subtotal_price}},
{% if order.discount_codes[0] %}
'coupon': '{{ order.discount_codes[0].code }}',
'discount_amount': {{ order.discount_codes[0].amount }}
{% endif %}
},
'products': [
{% for item in order.line_items %}
{
'name': '{{ item.title }}',
'product_id': '{{ item.product_id }}',
'id': '{{ item.sku }}',
'variant_id': '{{ item.variant_id }}',
'price': {{ item.price }},
'brand': '{{item.vendor}}',
'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 Upscribe data layer enabled and Elevar dataLayer on the thank you page, run all Facebook events through GTM.

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

If you have a Shopify checkout in addition to Upscribe 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 Upscribe <> Facebook Conversion API integration via Elevar.

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

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, subscribe, and initiate checkout
  • Resetting the fbp Facebook fbp 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 Upscribe
  • A “Subscribe” event when users complete purchase on Upscribe

subscribe-events

Inside your Elevar dashboard, download the Upscribe add-on event container and import into GTM:

upscribe-fb-capi-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 Upscribe 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 Upscribe 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 Pre-Existing Facebook Pixels

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 Upscribe Success Page 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.

Double check your success page for any FB pixel code like this:

upscribe-thankyou

That’s it!

Don't Have An Elevar Account Yet?

Create your account today to get started with your Upscribe + 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