Overview

This guide covers how to set up Everflow tracking with Shopify's new Checkout Extensibility framework.

By implementing this integration, you'll be able to capture Shopify events as Offer Events, including:

Product added to cart
Checkout started / Checkout completed
[Other key events]

This is a perfect fit if you want to have a complete picture of your customer journey across all channels and Partner types by tracking your Shopify Customer Events in Everflow.

📖 Important Setup Notes:

Using Checkout Extensibility? Let your developer know - this is the best way to go around this setup.

Access to the Shopify store and Settings menu is required for this integration.
Knowledge of Javascript is also needed as the integration requires modification of the Click script to best suit the unique environment of each landing page.
For a guide to Shopify integration using the Everflow app - [Click Here]

A How-To Guide

Step 1a: Integrate with Shopify

Before following the guide below, configure your Shopify app and enable the click script - [Click Here]

If this option is not available, you will need access to the theme.liquid file in order to place custom code inside the <head> tag in Shopify

Step 1b: Place Click Script in a `theme.liquid` with Shopify

From your Shopify admin, go to Online Store > Themes.
Click ... > Edit code.

When you click a file in the directory on the left, it opens in the code editor.
Open theme.liquid and place the click script below.
Replace TRACKING_DOMAIN with your tracking domain.

  <script type="text/javascript"
    src="https://www.TRACKING_DOMAIN.com/scripts/sdk/everflow.js"></script>

  <script type="text/javascript">
  EF.click({
      offer_id: EF.urlParameter('oid'),
      affiliate_id: EF.urlParameter('affid'),
      transaction_id: EF.urlParameter('_ef_transaction_id'),
      sub1: EF.urlParameter('sub1'),
      sub2: EF.urlParameter('sub2'),
      sub3: EF.urlParameter('sub3'),
      sub4: EF.urlParameter('sub4'),
      sub5: EF.urlParameter('sub5'),
      uid: EF.urlParameter('uid'),
      source_id: EF.urlParameter('source_id'),
      creative_id: EF.urlParameter('creative_id'),
  }).then(function (transaction_id) {
      const payload = {};

  if (transaction_id) {
      payload['attributes[eftid]'] = transaction_id;
  }
  if (EF.urlParameter('oid') && EF.urlParameter('affid')) {
      payload['attributes[oid]'] = EF.urlParameter('oid');
      payload['attributes[affid]'] = EF.urlParameter('affid');
  }
  
  $.ajax({
      type: 'POST',
      url: '/cart.js',
      data: payload,
      success: function (d) { console.log('Updated cart', d)},
      dataType: 'json'
  });
 })  
</script>

Save to ensure the file is successfully saved on the store.

Step 2: Add a Customer Event Pixel

Navigate to Settings > Customer Events > Add Custom Pixel.

Name the pixel and click Add Pixel.

Paste the following script, replacing INSERT_ADVERTISER_ID with the advertiser ID associated with the advertiser for this Shopify integration, and INSERT_TRACKING_DOMAIN with the tracking domain from your Everflow account:

 analytics.subscribe("checkout_completed", event => {
    console.log('Everflow checkout tracking started');
    var script = document.createElement('script');
    script.onload = function() {
        var aid = INSERT_ADVERTISER_ID;
        var total = event.data.checkout.totalPrice.amount;
        var tax = event.data.checkout.totalTax.amount;
        var ship = 0;
        if (event.data.checkout.shippingLine.price.amount) {
            ship = event.data.checkout.shippingLine.price.amount;
        }
        var amount = total - tax - ship;
        var email =  event.data.checkout.email;
        var order_id = event.data.checkout.order.id;
        var coupon_code = '';
        if (event.data.checkout.discountApplications.length > 0) {
            coupon_code = event.data.checkout.discountApplications[0].title;
        }
        var cookie = EF.getAdvertiserTransactionId(aid);
        var eftid;
        for (var i = 0; i < event.data.checkout.attributes.length; i++) {
            if (event.data.checkout.attributes[i].key === 'eftid') {
                eftid = event.data.checkout.attributes[i].value;
                console.log(eftid);
                break;
            }
        }
        if (!eftid) {
          console.log('No eftid found in attributes');
          eftid = cookie;
          console.log(eftid);
        }
        
        var order = {
            oid: event.data.checkout.order.id,
            amt: event.data.checkout.subtotalPrice.amount,
            bs: event.data.checkout.shippingAddress ? event.data.checkout.shippingAddress.province : '',
            bc: event.data.checkout.shippingAddress ? event.data.checkout.shippingAddress.country : '',
            cc: coupon_code,
            items: []
        };
        
        event.data.checkout.lineItems.forEach(function(line_item) {
            var item = {};
            item.ps = line_item.variant.sku;
            item.p = line_item.variant.price.amount;
            item.qty = line_item.quantity;
            item.ds = line_item.discount_allocations && line_item.discount_allocations.length > 0 ? line_item.discount_allocations[0].amount : 0;
            console.log(item)
            order.items.push(item);
        });
        
        console.log(event.data.checkout);
     
        var data = {
            aid: aid,
            transaction_id: eftid,
            amount: amount,
            order: order,
            coupon_code: coupon_code,
            email: email,
            order_id: order_id,
        };
        
        console.log(data);

        EF.conversion(data).then((result) => {
            console.log(result);
        });
    } 

    script.src = 'https://www.INSERT_TRACKING_DOMAIN.com/scripts/sdk/everflow.js';
    script.async = true;
    document.head.appendChild(script);
});

To find an Advertiser ID, navigate to Advertisers - Manage and select an Advertiser associated with your Shopify account.

2. To find your Tracking Domain, navigate to Control Center - Platform Configurations - Domains tab.

Click Save to apply the changes, then click Connect.

Testing the Integration

❗Ensure that Direct Linking is turned on inside the offer's Tracking & Controls section before generating a tracking link.

If using Redirect Links for this Offer, please make sure to add the following string to the end of the Base Destination URL:

?_ef_transaction_id={transaction_id}

Here is an example:

Use a tracking link for one of your Shopify offers and make a test purchase. You should see the order show up as a Conversion inside your Everflow account.

📖 Learn more about testing your tracking and troubleshooting using our Getting Started - Testing Conversion Tracking article.

Examples of Customer Events

INSERT_ADVERTISER_ID - replace with Advertiser ID
INSERT_ADVERTISER_EVENT_ID - replace with Advertiser Event ID, offer level events cannot be used, must be Advertiser Event ID (maybe link to that article?)
INSERT_TRACKING_DOMAIN - replace with Tracking Domain

product_added_to_cart: When someone adds a product to their cart, the product_added_to_cart event gets triggered. This can happen on any store page where customers can add items to their cart.

analytics.subscribe("product_added_to_cart", (event) => { console.log('Everflow event tracking started');
var script = document.createElement('script'); 
script.onload = function() {
 var aid = INSERT_ADVERTISER_ID;
 var adv_event_id = INSERT_ADVERTISER_EVENT_ID;
 var eftid = EF.getAdvertiserTransactionId(aid);
 var data = {
   aid: aid,
   adv_event_id: adv_event_id,
   transaction_id: eftid,
 };
 EF.conversion(data).then((result) => {
 console.log(result);
 });
 } 
script.src = 'https://www.INSERT_TRACKING_DOMAIN.com/scripts/sdk/everflow.js'; script.async = true; document.head.appendChild(script);
});

checkout_started: The checkout_started event happens when someone starts checking out. If your store Checkout Extensibility, this event triggers every time they enter checkout. For non-checkout extensible shops, it only triggers the first time they start checking out.

analytics.subscribe("checkout_started", (event) => {
console.log('Everflow event tracking started');
var script = document.createElement('script'); 
script.onload = function() {
 var aid = INSERT_ADVERTISER_ID;
 var adv_event_id = INSERT_ADVERTISER_EVENT_ID;
 var eftid = EF.getAdvertiserTransactionId(aid);
 var data = {
   aid: aid,
   adv_event_id: adv_event_id,
   transaction_id: eftid,
 };
 EF.conversion(data).then((result) => {
 console.log(result);
 });
 } 
script.src = 'https://www.INSERT_TRACKING_DOMAIN.com/scripts/sdk/everflow.js'; script.async = true; document.head.appendChild(script);
});

checkout_completed: The checkout_completed event shows when someone finishes their purchase. Usually, this happens once on the Thank you page after checkout. But for upsells and post purchases, the checkout_completed event is triggered on the first upsell offer page instead. Just keep in mind - if the page doesn't load properly, this event won't trigger at all. Scroll up to see the actual example.

Customer Events Reference

Setting up these events is straightforward - just add them in Everflow and use the Event ID in your customer event pixel. But it's always good to check with Everflow Support if you need help. They're there to make sure everything's working the way it should!

Reporting

To view specific details from Shopify for a conversion:

Enter an order ID in the search bar at the top-right corner of the portal, or navigate to Reporting > Conversion to find the conversion.
Add the following columns to the report:
- Order ID
- Order Number
- Order Items

You can also filter conversions by Order ID on the Conversion Report by selecting it as a filter.

Cross-Domain Tracking with Shopify with Permalinks

Unbounce Integration

Integrations: Shopify

Post-Purchase Tracking in Shopify

Headless E-Commerce Integrations for Shopify