Skip to main content
All CollectionsIntegration GuidesE-CommerceShopify Add-Ons
Shopify - 'Add To Cart' Event Tracking.
Shopify - 'Add To Cart' Event Tracking.

This article will show you how to track the add-to-cart event back to Everflow.

peter kurjanowicz avatar
Written by peter kurjanowicz
Updated over 9 months ago

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.


Did this answer your question?