Elevar Integrations How To Implement Facebook Pixel & Conversion API with Skio Subscriptions

How To Implement Facebook Pixel & Conversion API with Skio Subscriptions

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

beginner 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
  • 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
  • e-mail
  • 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

PLEASE NOTE: Since Skio uses the native Shopify checkout, these steps are the exact same as our Shopify <> Facebook CAPI integration guide.

Elevar offers two ways to implement the Conversion API for your Facebook pixel

  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:

You can follow Step 2 from the client-side guide for more details on the data layer installation process.

Step 2: 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:

  1. Navigate to your Pre-Built Facebook Pixel & CAPI Tags. [ShopifyPlus] [Shopify Non-Plus]
  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 New under Choose Workspace > titled it 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

Step 3: Add Facebook as a Server-Side Destination

1. In your Elevar App, navigate to Server-Side > Select Add Destination > Find and select Facebook.

Server-Side Elevar 2022-04-11 at 9.49.57 AM

2. You’ll be taken to an Overview Page, select Get Started

Server-Side Elevar 2022-04-11 at 9.52.41 AM

 

Step 4: 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.

Screen Shot 2021-11-02 at 1.23.41 PM

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.

Server-Side Elevar 2022-04-11 at 10.00.50 AM

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 5: 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.

Screen Shot 2021-11-02 at 1.24.04 PM

If you want to learn more about this setting, visit this Facebook article.

Step 6: 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.

Screen Shot 2021-11-02 at 1.24.11 PM

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

Screen Shot 2022-04-27 at 9.47.15 AM

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 8: Configure your Subscription Settings

Skio customers 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.

Server-Side Elevar 2022-04-11 at 10.50.21 AM

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 9: Add in Your Facebook Pixel ID & Access Token

1. Add in your Facebook Pixel ID

Server-Side Elevar 2022-04-12 at 2.41.24 PM

2. Add in your Facebook CAPI Access Token

Server-Side Elevar 2022-04-12 at 2.42.46 PM

3. Select Save & Continue

Step 10: Go Live & Remove Previous Tracking

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

Server-Side Elevar 2022-04-12 at 3.12.13 PM

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 11: [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

PLEASE NOTE: Since Skio uses the native Shopify checkout, these steps are the exact same as our Shopify <> Facebook CAPI integration guide.

It’s likely you will be implementing the Conversion API for your Shopify store in addition to just the pixel.

You can follow this guide in addition to the server-side steps if you are utilizing Elevar’s server-side tracking for your Facebook pixel integration.

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.

installdatalayer

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: Download Container for GTM

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

facebook-pixel-capi-shopify

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

Step 4: Import Container to GTM

Next up, go to your Google Tag Manager container > Admin > Import.

import-container-gtm

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:

Screen Shot 2020-12-02 at 9.12.06 PM

Verify your Pixel ID variable is accurate.

Step 5: 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:

Image 2020-02-25 at 9.52.28 PM

Here is what a valid product match looks like:

*Click here to download the Facebook Pixel Helper Chrome Extension

valid-product-id-fb (1)

This is an invalid product match:

fb-invalid-prod-id (1)

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

changeskutoproductid

Note: Be sure to confirm the ‘Content_Type‘ if it’s using ‘product‘ or ‘product_group‘

variant ID Feed

Then hit Save.

Variables

Now you need to update 3 variables that are used in Facebook’s checkout related tags.

Screen Shot 2020-12-02 at 9.20.48 PM

Here is how to switch things out for the Initiate Checkout variable which you can replicate to the Purchase/Thank you page variable.

Screen Recording 2020-12-02 at 09.21.45 PM

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

fb-pixel-helper

 

Note: Purchase and Initiate Checkout

The Facebook Transaction reporting has been improved with new callouts:

  1. The contents group that contains line item data (ID, Product Name, Product Category, Item Price and Quantity)
  2. Manual advanced matching which contains a hashed version of fn/ln etc., of purchaser

New FB Transaction Reporting

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

fb-shopify-app-disable-tracking

Once you’ve completed this step then that’s it – you are live with Facebook tracking via GTM!

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