​

Overview

Reminding users about items left in their shopping carts is one of the most effective ways to drive conversions and recover lost revenue. When implemented properly, abandoned cart campaigns deliver proven results as shown in our Case Studies.

This step-by-step guide shows how to implement abandoned cart notifications with example code using OneSignal’s powerful tagging, segmentation, and messaging tools.

​

Setup

​

1. Track cart activity with tags

Use tags to track when users add items to their cart. These tags can include product name, image, and a timestamp:

• 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

Here’s a basic example to tag items added to a cart:

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);

If users check out or remove items, be sure to remove the tags to avoid false positives.

Remove tags when purchase is complete:

//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

Once the tagging setup is complete we’ll need to target these users and send them messages after some time has passed. In your OneSignal Dashboard, go to Audience > Segments.

Segments allow for grouping subscriptions based on the data collected: 1 - if they have items in the cart and 2 - how long it has been since those items were left in the cart.

​

3. Create abandoned cart message

This is where we can use some creativity! If your site/app has certain phrases, language, or emojis you like, then use it! All that is great for brand recognition, get users to click, and getting them to checkout.

Also, using the product_name and product_image tags, we can include this data within the message for Message Personalization.

For example, we can say: “Hey Cool Cat 😸 ! Your new Yellow Cat Water Dish is waiting for you!”. And include the picture of the item in the message.

In the OneSignal Dashboard, go to Messages > Templates and select “New Push Template”.

Templates are a way to create reusable message and monitor how many times they have been sent and clicked.

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

Important: you can use any language in these fields (does not have to be English) and if you want to add more than 1 language, just select “Add Languages” to put your own translation for the message.

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

Navigate to Journeys > New 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.

5. Press Save.

​

Journey steps

Currently users that enter the segment will then start flowing through the Journey. If they leave the segment, they will leave the Journey and can’t re-enter until 1 day has passed.

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

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

Your users will be sent the personalized Abandoned Cart template once per 8 days ( 1 week wait node + 1 day re-entry rule) until they either update their car or check out.

​

5. Optional setup abandoned cart performance tracking

Once abandoned cart message are set up, you can track how well it performs by going to Templates and looking at the open and click rates.

If you have a Paid OneSignal Account, you can also use Outcomes to track actual revenue brought in.

When the customer finishes payment, upon selection of the “Submit Payment” button call the following method.

//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.