Shopping cart abandonment is quite common - a potential customer adds products to their virtual cart and goes away from the store without making a purchase. According to global statistics, more than 69% of online shopping carts are abandoned before a sale. If someone has left a filled cart behind, it doesn't necessarily mean that they have lost interest in the product or have purchased it elsewhere. Instead, they may just be looking for that little nudge in your direction and this is where PushAlert can help.
Earlier this year, we had introduced personalized automated Abandoned Cart recovery notifications for Shopify, Magento, WooCommerce and Prestashop. We are extending it to any custom store back-end or platform. With our new REST and JS API endpoints, any store will be able to send automated notifications when a cart is abandoned. Moreover, you will be able to personalize the notifications with the names of your customers and the items they have in their carts.
Based on input from our eCommerce partners, they have seen their store orders increase by at least 2% with automated abandoned cart notifications to as much as 10% within a month. One of our newest partners were able to recover more than $1300 in sales in just 7 days of using our marketing automation. Here's how you can boost your sales with personalized abandoned cart push notifications:
This guide is for custom eCommerce platforms that want to setup abandoned cart notifications. For Shopify, Magento, WooCommerce and Prestashop, please use our dedicated plugin.
There are three steps to setting up abandoned cart notifications:
You can send a mail to support@pushalert.co with the subject line stating that you want to enable abandoned cart notifications on your account or talk to one of our support representatives on chat to enable it on your account. Chat will be the fastest way to activate abandoned cart push notifications on your account.
Abandoned cart notifications can be personalized with the first name of the customer and total items in their cart. Try not to sound too robotic or generic with the notification. You can check out the 5 top abandoned cart notification templates here. Now, let us start with the configuration:
There are three cart events we need to consider when a customer comes to your eCommerce store. Each one of them needs to be handled, you can use either our JS API in the front-end of the store or the REST API in the back-end of the store. Implementation of both will be discussed in detail here.
Three Cart events that need to be handled for automated abandoned cart recovery:
If you want to send a custom notification on order completion or any other event, have a look at Custom Events based Triggered Notifications.
Both the events are handled by the same code. Whenever a new cart is created or an existing cart is updated you will be calling our API endpoints to update the Abandoned Cart Notification for the subscriber. There are two ways to handle this event, the JS API on the front-end which would be executed on your Add to Cart button or through the REST API at the back-end.
You don't need to implement both the JS and REST API. You can use either one of them based on whether you are implementing it on the front-end of your store or on the back-end.
You need to attach the following code to your 'Add to Cart' button or background script which handles adding or updating products in the cart. This code must be executed each time a new product is added to a cart, something is removed from the cart or the quantity of products is changed.
As mentioned earlier, you can personalize notifications with four parameters - product_name, image, first_name and total_items. Where 'product_name' is the name of the product, 'image' is the product image served over HTTPS with a recommended size of 720x360 pixels (download the template here for reference), 'first_name' is the first or full name of the customer, while 'total_number' is the number of items in cart.
For e.g. {'product_name':'Green T-Shirt','image':'https://mywebsite.com/green-shirt.jpg','first_name':'Jonathan','total_items':3}
Schedule an abandoned cart notification or update an existing notification when the cart is changed.
Examples
With attributes:
<script> (pushalertbyiw = window.pushalertbyiw || []).push(['abandonedCart', 'add-to-cart',{'product_name':'Green T-Shirt','image':'https://mywebsite.com/green-shirt.jpg','first_name':'Alex','total_items':1,'cart_url':'https://mywebsite.com/cart/','checkout_url':'https://mywebsite.com/checkout/'}]); </script>
Without attributes:
<script> (pushalertbyiw = window.pushalertbyiw || []).push(['abandonedCart', 'add-to-cart']); </script>
Using this endpoint you can schedule a notification when a cart is abandoned on your eCommerce store. This needs to be added to the background script which handles cart creation and order updates.
Resource Information
Method | POST |
---|---|
URL | https://api.pushalert.co/rest/v1/abandonedCart |
Requires authentication? | Yes |
Parameter | Type | Description |
---|
Request Parameters
subscriber | (string) | Required The subscriber ID for the subscriber that triggered the event. |
---|---|---|
extra_info | (JSON Encoded Key-value Pair) | Optional There can be six parameters sent in extra_info - product_name, image, first_name, total_items, cart_url and checkout_url. You can choose to include some, all or none of them. These are optional. Where 'product_name' is the name of the product, 'image' is the large image with recommended size of 720x360 pixels served over HTTPS, 'first_name' is the first or full name of the customer, 'total_number' is the number of items in cart, 'cart_url' is the URL where the customer would be directed on clicking the main notification body and 'checkout_url' is the URL associated with the Checkout Button (if added). Both the cart_url and checkout_url parameters will override the URLs added on the PushAlert Abandoned Cart automation settings. For e.g. {'product_name':'Green T-Shirt','image':'https://mywebsite.com/green-shirt.jpg','first_name':'Jonathan','total_items':3} This will be used to personalize the notification for your customer. |
Example
curl -H "Authorization: api_key=<insert api key here>" --data "subscriber=SUBSCRIBER_ID&extra_info={'product_name':'Green T-Shirt','image':'https://mywebsite.com/green-shirt.jpg','first_name':'Jonathan','total_items':3}" https://api.pushalert.co/rest/v1/abandonedCart
<?php $subscriber = "SUBSCRIBER_ID"; $extra_info = array( 'product_name'=>'Green T-Shirt', 'image':'https://mywebsite.com/green-shirt.jpg', 'first_name':'Alex', 'total_items':1, 'cart_url':'https://mywebsite.com/cart/', 'checkout_url':'https://mywebsite.com/checkout/' ); $apiKey = "YOUR_API_KEY"; $curlUrl = "https://api.pushalert.co/rest/v1/abandonedCart"; //POST variables $post_vars = array( "subscriber" => $subscriber, "extra_info" => json_encode($extra_info), ); $headers = Array(); $headers[] = "Authorization: api_key=".$apiKey; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $curlUrl); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post_vars)); curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $result = curl_exec($ch); $output = json_decode($result, true); if($output["success"]) { echo "success"; } else { //Others like bad request } ?>
Output
{ "result": "success" }
In both cases we need to clear the previously set abandoned cart notification. Therefore, this code needs to go on the order completion page or when the customer clears the cart.
Delete an abandoned cart notification on order completion or when all products are removed from cart.
Example
<script> (pushalertbyiw = window.pushalertbyiw || []).push(['abandonedCart', 'completed']); </script>
Just to re-iterate, either the JS API or the REST API should be used, both are NOT REQUIRED.
Using this endpoint you can delete a previously scheduled abandoned cart notification when the order is completed or all products are removed from cart.
Resource Information
Method | POST |
---|---|
URL | https://api.pushalert.co/rest/v1/abandonedCart/delete |
Requires authentication? | Yes |
Parameter | Type | Description |
---|
Request Parameters
subscriber | (string) | Required The subscriber ID for the subscriber that triggered the order completed event. |
---|
Example
curl -H "Authorization: api_key=<insert api key here>" --data "subscriber=SUBSCRIBER_ID" https://api.pushalert.co/rest/v1/abandonedCart/delete
<?php $subscriber = "SUBSCRIBER_ID"; $apiKey = "YOUR_API_KEY"; $curlUrl = "https://api.pushalert.co/rest/v1/abandonedCart/delete"; //POST variables $post_vars = array( "subscriber" => $subscriber ); $headers = Array(); $headers[] = "Authorization: api_key=".$apiKey; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $curlUrl); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post_vars)); curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $result = curl_exec($ch); $output = json_decode($result, true); if($output["success"]) { echo "success"; } else { //Others like bad request } ?>
Output
{ "result": "success" }