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

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]

Click Script

<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

Prepare your Conversion Script. Be sure to replace the values listed below.

Conversion Script

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


<script type="text/javascript">

var EFTID = "{{ attributes.eftid }}";

var nid = INSERT_NETWORK_ID;
var aid = INSERT_ADVERTISER_ID;
var amount = Shopify.checkout.subtotal_price;
var order;

if (Shopify.checkout.discount != null) {
    order = {
        oid: Shopify.checkout.order_id,
        amt: Shopify.checkout.subtotal_price,
        bs: Shopify.checkout.shipping_address ? Shopify.checkout.shipping_address.province : '',
        bc: Shopify.checkout.shipping_address ? Shopify.checkout.shipping_address.country : '',
        cc: Shopify.checkout.discount.code,
        items: []
    };
} else {
    order = {
        oid: Shopify.checkout.order_id,
        amt: Shopify.checkout.subtotal_price,
        bs: Shopify.checkout.shipping_address ? Shopify.checkout.shipping_address.province : '',
        bc: Shopify.checkout.shipping_address ? Shopify.checkout.shipping_address.country : '',
        cc: "",
        items: []
    };
}

Shopify.checkout.line_items.forEach(function (line_item) {
    var item = {};
    item['ps'] = line_item.sku;
    item['p'] = line_item.price;
    item['qty'] = line_item.quantity;

    order.items.push(item);
});

EF.conversion({
    aid: aid,
    amount: amount,
    order: order,
    order_id: Shopify.checkout.order_id,
    transaction_id: EFTID,
})

www.INSERT_TRACKING_DOMAIN.com
- Replace with your Tracking Domain. To read more about Tracking and Conversion Domain management, see this article - [Click Here]
INSERT_NETWORK_ID
- Replace with your Network ID (NID). Your NID can be found under Control Center - Platform Configurations - General.
INSERT_ADVERTISER_ID
- Replace with the Advertiser ID (aid). Your Advertiser ID can be found be navigating to Advertisers and clicking on the Advertiser.

Step #3

Log into Shopify and select the store where the Conversion Script will be installed - [Click Here]

Step #4

Navigate to Settings at the bottom of the lefthand menu.

Select Checkout. Scroll down to Order Status Page. Paste the Conversion Script from Step #2 under Additional Scripts, and click Save.

Testing the Integration

Run a test with Partner Tracking Link or Advertiser Test Link to ensure both clicks and conversions are tracked.
To learn how to generate a Partner Tracking Link - [Click Here]

To learn how to generate an Advertiser Test Link - [Click Here]

Direct Linking Between Two Everflow Networks

Cross-Domain Tracking with Shopify with Permalinks

Wix Integration

Unbounce Integration

Ecwid Conversion Tracking