Overview
Headless commerce is an eCommerce architecture in which a store’s frontend is separate from the backend, and allows online stores to have more flexibility with customization.
Your shop may be headless if:
You host the site yourself, while Shopify hosts your shopping cart
Your domain differs between your store and your shopping cart
📖 Note:
Access to the Shopify store and Settings menu is required for this integration. Knowledge of Javascript is also required 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 1: Setting up the Headless Click Script
Install the following click script on the landing page where you would like to track clicks.
Be sure to replace INSERT_TRACKING_DOMAIN with your tracking domain, and pay close attention to the last part of the script, noted below.
To read more about Tracking and Conversion Domains - [Click Here]
<script type="text/javascript" id="" src="https://www.INSERT_TRACKING_DOMAIN.com/scripts/sdk/everflow.js"></script>
<script type="text/javascript">
EF.click({
offer_id: EF.urlParameter("oid"),
affiliate_id: EF.urlParameter("affid"),
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"),
transaction_id: EF.urlParameter("_ef_transaction_id")
}).then(function (transaction_id) {
//INSERT CODE TO APPEND OUR 'TRANSACTION_ID' TO THE CART ATTRIBUTE CALLED "EFTID"
});
</script>
📖 Note: The following part of the click script MUST BE MODIFIED to best work with your website. This is not something Everflow's support team can provide as it will be completely custom.
//INSERT CODE TO APPEND OUR 'TRANSACTION_ID' TO THE CART ATTRIBUTE CALLED "EFTID"
❗Examples
These examples should not be used without consulting your development team. In other words, copying and pasting the following scripts is not advised.
}).then(function(transaction_id) {
var eftid = transaction_id;
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "attributes[eftid]");
input.setAttribute("value", eftid);
document.getElementsByClassName("CartForm")[0].appendChild(input);
})
--OR--
}).then(function(transaction_id) {
if (transaction_id) {
$.ajax({
type: "POST",
url: '/cart.js',
data: {"attributes[eftid]": transaction_id},
success: function(d){
console.log(d)
},
dataType: 'json'
});
}
})
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_IDwith the advertiser ID associated with the advertiser for this Shopify integration, andINSERT_TRACKING_DOMAINwith 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,
transaction_id: eftid,
};
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.
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.
