How to send events from cart to analytics apps

We recognize the significance of tracking user events to design an optimal user experience. You might already be using services like Growlytics and Mixpanel to monitor various user events occurring in your store. Within Corner Cart, you have the option to track numerous events that occur inside the cart. This document will guide you on how to track these cart events.

Before you begin learning how to track these events, ensure that the analytics platform you are using has a JavaScript snippet to send events to their service. For example, here are the documentation links for two well-known analytics platforms:

Growlytics: Installation Guide
Mixpanel: Installation Guide

In this document, we will focus solely on how to obtain events from our cart. Details on setting up an analytics app for your store will be provided by the respective app's support team.

How to Track Various Cart Events

Inside Corner Cart, we offer a handful of events that you can use to track specific actions:

onCartEdit: Triggered when any type of edit occurs within the cart.
onCowiOpen: Triggered when the cart widget is opened.
onCowiClose: Triggered when the cart widget is closed.
onCartCtaClick: Triggered when the Call to Action (CTA) button on the cart is clicked.
onUpsellCtaClick: Triggered when the CTA button on upsell products is clicked.
onDiscountCodeAdd: Triggered when a user adds a discount code.
onDiscountCodeRemove: Triggered when a user removes a discount code.
onSatcCtaClick: Triggered when the CTA button on the Sticky Add to Cart is clicked.
onCartGoalMilestoneAchieve: Triggered when user achieves a new cart goal Milestone
onCartGoalMilestoneLost: Triggered when user looses a cart goal Milestone which they previously achieved.



To utilise these events, follow these steps:

Go to our app > Cart drawer > Advanced Settings.
Inside "Custom JS Script," you can paste the snippets as instructed below:

Track Cart Edits

To capture any changes made to the cart, use the following snippet:

corner.on("onCartEdit", (params) => {
   // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...} // An object containing details of the current cart state
cartEdits:[{...},{...}] // An array of cart edits user made
}

Track Cart Widget Open

To capture when a visitor opens the cart, use the following snippet:

corner.on("onCowiOpen", (params) => {
   // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...} // An object containing details of the current cart state
}

Track when user click the checkout button

To capture when a visitor clicks the checkout button, use the following snippet:

corner.on("onCartCtaClick", (params) => {
    // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...} // An object containing details of the current cart state
}

Track Upsell Product CTA Click

To capture when a visitor clicks the CTA button on an upsell product featured inside the cart, use the following snippet:

corner.on("onUpsellCtaClick", (params) => {
   // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...} // An object containing details of the current cart state
productAdded : {...} // An object containing detials of specific variant the user just added cart
}

Track Discount Code Additions

To capture when a visitor adds a discount code via our cart widget, use the following snippet:

corner.on("onDiscountCodeAdd", (params) => {
    // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...} // An object containing details of the current cart state
discountCodeAdded : {...} // An object containing details regarding the discount code user just added
}

Track Discount Code Removal

To capture when a visitor removes a discount code via our cart widget, use the following snippet:

corner.on("onDiscountCodeRemove", (params) => {
    // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...} // An object containing details of the current cart state
discountCodeRemoved : {...} // An object containing details regarding the discount code user just removed
}

Track Sticky Add to Cart CTA Click

To capture when a visitor clicks the CTA button on the Sticky Add to Cart bar, use the following snippet:

corner.on("onSatcCtaClick", (params) => {
   // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...} // An object containing details of the current cart state
}

Track Cart Goal Campaign Milestones progression

To capture when a visitor achieves a new milestone, use the following snippet:

corner.on("onCartGoalMilestoneAchieve", (params) => {
   // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...} // An object containing details of the current cart state
achievedMilestoneIndex: 1 // Position of the milestone user just achieved (starting from 1). 
}

Track Cart Goal Campaign Lost Milestones

To capture when a visitor losses a cart goal milestone, use the following snippet:

corner.on("onCartGoalMilestoneLost", (params) => {
   // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDertails:{...}, // An object containing details of the current cart state
lostMilestoneIndex: 1 // Position of the milestone user just achieved (starting from 1). 
}

These snippets will help you track specific events within the Corner Cart, providing valuable insights for optimizing your user experience.

Updated on: 31/10/2023