📘

Case Studies - ecommerce

Read the Case Study on how MuteSix Increased Revenue by 182% with Abandoned Cart Notifications.

Review all case studies here.

One of the most common uses for notifications is reminding users about the items left in their shopping carts that they have not yet purchased. Used correctly, these notifications will often increase sales as seen in the Princeton Review Case Study and Evino Case Study.

OneSignal supports several ways to build abandoned cart notifications. The general flow to use them:

1. Use OneSignal Data Tags to mark and segment users when they add items to their carts.

2. Send notifications to those users after a period of time.

3. Remove the tags when they clear their cart or checkout.

Once setup, this process will all happen automatically.

Quickstart

When a customer adds an item to the cart (usually click "Add to cart" button), use the OneSignal Data Tags with a Unix Timestamp to leverage Time Operators. For example:

OneSignal.push(function() {
  let timestamp = Math.floor(Date.now() / 1000);
  OneSignal.sendTag("cart_update", timestamp).then(function(tagsSent) {
    // Callback called when tags have finished sending
    console.log(tagsSent);
  });
});

If you have a free OneSignal account or looking for more detailed data to add to users jump down to Tagging Users.

To remove the cart_update tag when the user clears their cart or makes a purchase use:

OneSignal.push(function() {
  OneSignal.sendTag("cart_update", "").then(function(tagsSent) {
    // Callback called when tags have finished sending
    console.log(tagsSent);
  });
});

👍

Quickstart Code Complete

That's the minimal code needed to achieve abandoned cart. If you would like to look at more data you can tag users with see below Tagging Users..

If you would like to start sending, jump to Sending Abandoned Cart Notifications.

Tagging Users

We recommend tagging users the moment they add an item to the shopping cart. For users that add multiple items to their cart, we recommend just keeping track of the last item they added, overwriting the old value.

To store the item name, use a tag key like cart_item. Whenever a user adds another item, update this tag to a different value. For example:

• A user adds a T-Shirt to their cart. Tag them with "cart_item": "t-shirt"
• The user then adds sunglasses to their cart. Tag them with "cart_item": "sunglasses", which will overwrite the t-shirt value.

var itemAddedToCart = "t-shirt"; // capture the name of the item
OneSignal.push(function() {
  /* These examples are all valid */
  OneSignal.sendTag("cart_item", itemAddedToCart); 
});

If you want to tag the users with multiple cart_items, use "cart_item1", "cart_item2", etc to mark each item individually.

📘

Recommended Setup

As soon as the item is added to the cart, tag the user with another value "cart_update": unix_timestamp where the unix timestamp is the current time.

This requires a Paid Account and allows knowing how long it has been since an item has been added. More details on Time Operators.

Recommended Example with Time Operators:

var itemAddedToCart = "t-shirt"; // capture the name of the item
var productImageURL = "https://cdn.pixabay.com/photo/2016/12/06/09/31/blank-1886008_960_720.png"; // capture the product image url

OneSignal.push(function() {
  let timestamp = Math.floor(Date.now() / 1000);
  OneSignal.sendTags({
    cart_item: itemAddedToCart,
    cart_update: timestamp,
    cart_image: productImageURL
  }).then(function(tagsSent) {
    // Callback called when tags have finished sending
    console.log("tagsSent: ", tagsSent);
  });
});

If the user leaves your site without checking out (abandoning their cart), you now have enough information to target them with an abandoned cart notification.

Next, make sure you do not send abandoned cart notifications if the user checks out or clears their cart. Simply set all cart_item's and cart_update values to an empty string ("cart_item": "" and "cart_update": "") once a user clears their cart or checks out to remove the tag from them.

OneSignal.push(function() {
  OneSignal.sendTags({
    cart_item: "",
    cart_update: "",
    cart_image: ""
  }).then(function(tagsSent) {
    // Callback called when tags have finished sending  
    console.log("tagsSent: ", tagsSent);
  });
});

Please see our Using Data Tags documentation for more on tagging.

👍

Abandoned Cart Code Finished

You should now have successfully finished adding the code to your site. Follow below steps to setup automated messages to retarget users who add items.

Sending Abandoned Cart Notifications

Once you've set up your tagging system to keep track of abandoned carts, you'll need to target these users and send them notifications.

Targeting users

With the cart_update or cart_item tags, you can target users in two ways: create a segment in the dashboard, or use a filter in the API (see: advanced scheduled messages).

To create a segment in the dashboard, go to Audience > Segments and click 'Create a Segment'. Then use the User Tag filters. Examples:

Option 1 With Time Operators:

Recommended

1. Select the "User Tag" filters.
2. Set "cart_update" with "time elapsed greater than" and number of seconds.
   Example: 21600 for 6 hours (60 seconds 60 minutes 6 hours)

Option 2 With Last Session Filter:

Sending messages

Next, you will want to send the actual abandoned cart message to users.

While you can send abandoned cart message manually, we recommend creating an Automated Message so these notifications will automatically go out to users.

When crafting your messages, we recommend adding a link back to the cart itself to make it easy for users to checkout.

You may wish to create several automated messages at different time intervals. For instance, you may want to remind the user 6 hours after their last session, and again 24 hours later. Note this also requires creating additional segments (above) for each time interval.

Personalizing messages

Personalizing your messages is a great way to increase message conversion, and we highly recommend doing this with your abandoned cart messages. Instead of sending a message with something generic like 'You have items in your cart', a personalized message lets you say 'Don't forget about those Sunglasses in your cart' with an image of Sunglasses - making the message more memorable for users and increasing their likelihood of coming back to your app or website.

See Message Personalization to create a template using Tag Substitution. This adds the item's name to the notification to remind the user of an item in the cart.

For example, if you use: "Don't forget those {{ cart_item | default: "items" }} in your cart!"

The tagged notification will show: "Don't forget those sunglasses in your cart!"
The default value will show: "Don't forget those items in your cart!"

And to display the image of sunglasses, you can set the tag key for cart image like {{cart_image}} and/or add a default image like
{{cart_image | default: 'https://cdn.pixabay.com/photo/2016/03/09/11/59/sunglasses-1246251_960_720.jpg'}}

Go to Templates to set this up.

Tracking Performance

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

You can also use Outcomes to track revenue brought in.

Advanced: Scheduled Messages

If you are using the API, you may wish to create your own automations to send your abandoned cart messages using scheduled messages instead of automated messages. Scheduling messages provides several benefits.

First, you have more flexibility in the contents and delivery options for your messages, because your server is taking care of the automation. This means you can schedule very precise future messages (e.g. 30 minutes after last session).

Second, you do not need to do the above steps of creating tags or segments, nor do you need to use the dashboard at all.

To set this up, you must do the following:

1. When a user adds an item to their cart, instead of tagging them you can schedule a message in the future using the API's delivery parameters. You can set the time to be whatever you like for that user, and include the item name directly in the message contents.

2. When a user clears their cart or checks out, simply cancel the scheduled message using the Cancel notification endpoint.

The drawbacks of this approach are that a) you have to keep track of which message is scheduled for which user in order to cancel it, and b) you do not get analytics associated with the template you send. Despite these drawbacks, many apps and websites choose this method.

FAQ

How long should I wait before sending an abandoned cart notification?

We recommend sending an abandoned cart notification within the first 24 hours since a user has been to your app or website, and ideally within the two hours. If you wait much longer, users may not remember as well or have as strong a desire to complete a purchase.