Abandoned cart example

​

Overview

​

Setup

​

1. Track cart activity with tags

• cart_update: Unix timestamp of when the cart was updated
• product_name: Human-readable product name for personalization
• product_image: Direct URL to product image for visual engagement

let productName = "Name of the Product"; // Replace with the name of item
let productImageURL = "https://yoursiteurl.com/image-file.jpg"; // Replace with the url to the image

// Use this example method when user adds item to cart
async function addTagsUponCartUpdate(productName, productImageURL) {
await OneSignalDeferred.push(async function (OneSignal) {
let timestamp = Math.floor(Date.now() / 1000);
await OneSignal.User.addTags({
cart_update: timestamp,
product_name: productName,
product_image: productImageURL,
});
// Call getTags after adding tags
const tags = await OneSignal.User.getTags();
console.log(tags);
});
}

// Call the function, or attach to add to cart button
addTagsUponCartUpdate(productName, productImageURL);

//Removes the cart tags, call when user purchases or removes items from cart
async function removeCartTags() {
  await OneSignalDeferred.push(async function (OneSignal) {
    let timestamp = Math.floor(Date.now() / 1000);
    await OneSignal.User.addTags({
      cart_update: "",
      product_name: "",
      product_image: "",
    });
    // Call getTags after removing tags
    const tags = await OneSignal.User.getTags();
    console.log(tags);
  });
}

​

2. Create abandoned cart segment

• With Last Session Filter
• With Time Operators

This segment will include users that have items in their cart and have left the site or mobile app over 1 hour ago. The user adds an item to the cart, then leaves the app or site, 1 hour later they will be in this segment.

1. Select the “User Tag” filter
2. Set cart_update to “exists”
3. Select “Add Filter” to create an “AND” relationship.
4. Select “Last Session” filter and set “greater than” 1.
5. Select “Add Filter” again and set another “Last Session” filter to “less than” 24. (the user will leave the segment after 24 hours).
6. Name the Segment Abandoned Cart 1 Hour (not required but helpful to remember).

Abandoned cart segment example

​

3. Create abandoned cart message

1. Name the Template: Abandoned Cart 1 Hour or whatever you named the Segment.
2. Add your Title, example: Hey Cool Cat 😸 !
3. Add your Message, example: Your new {{product_name | default: "item"}} is waiting for you!

• here {{product_name | default: "item"}} will be replaced by whatever value is set for that tag. If no tag is set than “item” will be used.

4. Set the Image to be: {{product_image}}

• here {{product_image}} will be replaced with the URL of the image to the product. If tag value is not a direct link to the image, then it will not show.

5. Set the Launch URL to be the URL of your checkout page

• here if the checkout page is unique per user, we would need to either link to the cart page (if not unique) or use more tag substitution. For example, if your checkout page is: https://yoursite.com/username/checkout we need to tag the user with a user_name tag so their username can be replaced if we use: https://yoursite.com/{{user_name}}/checkout

Abandoned cart message example

6. Under the preview, click “Send Test Message” to test out how it looks!
7. When done press “Save” at the bottom.

​

4. Setup abandoned cart journey

​

Journey settings

1. Name the Journey: Abandoned Cart or anything you like to recognize what this Journey does.
2. Entry Rules: Include Segment Abandoned Cart 1 Hour segment.
3. Exit Rules: Check Exit when a user no longer matches the audience conditions.
4. Re-entry Rules: Select Yes, after a certain amount of time and set to 1 Day.

Journey settings example

5. Press Save.

​

Journey steps

1. Add a Push Notification message step, select the Abandoned Cart 1 Hour template and Save.

Journey steps example

2. Add a Wait step, select 1 Week and Save.
3. Select Save & Close.

​

5. Optional setup abandoned cart performance tracking

//Example to get the price and total items in cart
// replace ".checkout-price-total" with the class name the element containing the cart's total price
const checkoutPriceTotal = document.querySelector(".checkout-price-total").innerText;
// optional replace ".checkout-items-total" with the class name the element containing the total items in cart to be purchased
const checkoutItemsTotal = document.querySelector(".checkout-items-total").innerText;
//Call this method in the click event for the final button to submit payment
function updateOSOnCartPurchase(checkoutPriceTotal, checkoutItemsTotal) {
  let purchasePriceTotal = parseFloat(checkoutPriceTotal);
  let purchasedItemCount = parseInt(checkoutItemsTotal);
  OneSignalDeferred.push(function (OneSignal) {
    OneSignal.sendOutcome("Purchase", purchasePriceTotal);
    OneSignal.sendOutcome("Purchased Item Count", purchasedItemCount);
  });
}
//example of adding this method to the "submit-payment" button
const submitPurchaseButton = document.querySelector(".submit-payment");
if (submitPurchaseButton) {
  submitPurchaseButton.addEventListener("click", () => {
    updateOSOnCartPurchase(checkoutPriceTotal, checkoutItemsTotal);
  });
}

• OneSignal.sendOutcome("Purchase", purchasePriceTotal); - will send OneSignal the total purchase amount and accumulate that revenue for all purchases made by all customers that clicked a push or received a push within a specific timeframe (influenced) and made the purchase.
• OneSignal.sendOutcome("Purchased Item Count", purchasedItemCount); - will send OneSignal the total amount of items purchased associated with the customer that directly clicked the push to make a purchase or made the purchase “influenced” by a push.