Overview

Please note that you need access to the liquid.theme file in order to place custom code inside the <head> tag in Shopify. If you're not sure about this, please reach out to the Everflow Customer Success team for assistance.

This code will track a new Add-To-Cart event for each item added to the cart. There can be multiple Add-To-Cart events per user session.

Step #1 : Set Up in Everflow

First, navigate to Advertisers > Manage, then click on the Advertiser.

If you don't see an Advertisers tab (please note: it might be labeled "Brands" or something else instead of "Advertisers"), please see this article on gaining access through "Roles".

Click on the Events tab, then click + Event:

Name the Event "Add to Cart" and click Add at the bottom of the page.

Then, navigate to Offers - Manage and click on the desired Offer.

On the Revenue & Payout card, click the vertical dots and then select Edit.

Under Additional Events, click + Add Event.

Name the event "Add to Cart" and configure the event's payout and revenue settings.

Click Add.

Step #2 - Set Up the Code

From the Offer page in Everflow, find the Revenue & Payout card and scroll right.
Copy the Advertiser Event ID from the Advertiser Event column, and save it to paste later.
The Advertiser Event ID in the example below is 25.

Copy the Advertiser ID from the General card and save it to paste later.
The Advertiser ID in the example below is 139.

Navigate to Control Center - Platform Configurations > Domains. Copy one of the tracking domains and save it to paste later.
The tracking domain in the example below is www.serve-eflow-test.com.

Paste the Advertiser Event ID, Advertiser ID and Tracking Domain into the code below.
Simply replace INSERT_DOMAIN, INSERT_ADVERTISER_ID and INSERT_ADVERTISER_EVENT_ID with the values copied above.

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

<script type="text/javascript">

var aid = INSERT_ADVERTISER_ID;
var adv_event_id = INSERT_ADVERTISER_EVENT_ID;
var order = {"items" : []};

function addedToCart() {
	fetch(window.location.origin + "/cart.js").then(function(d) {
		d.clone().json().then(function(c) {
			var adv1 = c.total_price / 100;
			c.items.forEach(function(a) {
				var b = {};
				b.ps = a.sku;
				b.p = a.price / 100;
				b.qty = a.quantity;
				b.ds = a.discount_allocations && 0 < a.discount_allocations.length ? a.discount_allocations[0].amount : 0;
				order.items.push(b)
			});
			EF.conversion({
				aid: aid,
				adv_event_id: adv_event_id,
				order: order,
				adv1: adv1
			})
		})
	})
}
(function() {
	var d = XMLHttpRequest.prototype.send;
	XMLHttpRequest.prototype.send = function() {
		this.addEventListener("load", function(c) {
			"/cart/add.js" == c.target._url && addedToCart()
		});
		return d.apply(this, arguments)
	}
})();

</script>

Using the values from the examples above, the final code would look like this:

<script type="text/javascript"
    src="https://www.serve-eflow-test.com/scripts/sdk/everflow.js"></script>

<script type="text/javascript">

var aid = 139;
var adv_event_id = 25;
var order = {"items" : []};

function addedToCart() {
	fetch(window.location.origin + "/cart.js").then(function(d) {
		d.clone().json().then(function(c) {
			var adv1 = c.total_price / 100;
			c.items.forEach(function(a) {
				var b = {};
				b.ps = a.sku;
				b.p = a.price / 100;
				b.qty = a.quantity;
				b.ds = a.discount_allocations && 0 < a.discount_allocations.length ? a.discount_allocations[0].amount : 0;
				order.items.push(b)
			});
			EF.conversion({
				aid: aid,
				adv_event_id: adv_event_id,
				order: order,
				adv1: adv1
			})
		})
	})
}
(function() {
	var d = XMLHttpRequest.prototype.send;
	XMLHttpRequest.prototype.send = function() {
		this.addEventListener("load", function(c) {
			"/cart/add.js" == c.target._url && addedToCart()
		});
		return d.apply(this, arguments)
	}
})();

</script>

Step #3 - Place Code in Shopify

In your Shopify account, navigate to Online Store - Themes.

In the Live Theme section, click the Actions dropdown and select Edit Code.

Click the theme.liquid file.

Paste the code inside the <head> tag, at the bottom. This should be the last script placed before the </head> tag.

Here is an example:

Click Save.