Skip to main content
All CollectionsIntegration GuidesE-CommerceBuilt-In / Direct Integrations
Integration: Shopify (feat. Customer Event Pixels)
Integration: Shopify (feat. Customer Event Pixels)

Guide for integrating Shopify & Checkout Extensibility, including the setup, adding a customer pixel, testing, and reporting.

Dasha Shareyko avatar
Written by Dasha Shareyko
Updated over a week ago

Overview

This guide will walk you through the Shopify integration, which also accommodates the Shopify Checkout Extensibility upgrade.

📖 Note: For more information about Shopify Checkout Extensibility, refer to [this article].

For post-purchase tracking, refer to [this article].

Step-By-Step

Step #1

  • To connect your Shopify store (if you have not connected it already), navigate to Integrations > E-Commerce, then click Add for Shopify.

Step #2

  • Click Add.

Step #3

  • You will be redirected to the Shopify App Store for the Everflow app.

  • Click the Add app button, then enter the custom domain of your Shopify store (the part before .myshopify.com).

  • Then, you will need to login with your email address if you haven't already.

Step #4

  • Click the Install button.

Step #5

  • Input your Everflow network identifier. Then, click the Complete Installation button.

To find your Everflow network identifier, you can also navigate to Control Center - Platform Configurations - General Tab - General > Network Identifier.

Step #6

  • After clicking Complete Installation button, you will need to pay the time charge of $100.

  • This fee helps us cover the integration and initial setup costs, ensuring you receive the best support and continuous updates.

Step #7

  • Once you are successfully connected, click the Access Integration button.

Step #8

  • You will be redirected back to the Shopify Integrations tab in the Everflow Portal. Click Edit on the integration to set up proper Click and Conversion tracking.

Step #9

  • Enable the settings shown below for normal Shopify setups, including Enable Reconciliation, Install Click Script, and your Target: Advertiser. This automatically activates this Shopify Click tracking across every Offer associated with the selected Advertiser. The Enable Reconciliation toggle allows the use of the Shopify API, which adds an extra level of tracking accuracy.

  • For this integration, please DISABLE the Install Conversion Script from this app.

❗Note that for reconciliation to work properly, you'll need to show the Click Script and update it to the following:

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'
});
})

Step 2: Add a Custom 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;
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);
});

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


Reporting

To view specific details from Shopify for a conversion:

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

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


Did this answer your question?