Abandoned Cart Message

Overview

A cart event trigger initiates an automated message that targets a customer who has shopped on your website, added items to their cart, and then abandoned the shopping experience.

This message can be delivered automatically, and in a truly 1:1 fashion, to promote each of the unique items that were left in the cart. This may include images of the product, links back to the cart or product page and descriptions of the product.

Get creative! Incentivize customers with a discount, free shipping or a compelling call to action that rekindles their interest. The abandoned cart email, although a lower volume campaign, can yield high engagement and a great conversion rate.

Implementing the Trigger

In order for the abandon cart message to send, there needs to be data sent to the system that will trigger the automation.

In the case of an abandon cart message, we will use the trigger of when a contact adds an item to the cart. If the item is ordered, we will then cancel the message based on an order event.

This strategy utilizes 3 primary pieces of data:

1. Cart attribute
1. Purpose: Used to personalize the body of the message with the actual items left in the cart.
2. Data type: An object stored as contact attribute data. The object contains an array of cartitem objects, each describing the items in the cart.
2. "Cart" event
1. Purpose: This named event is used to simply trigger the actual message sending process. It is not necessary to pass any properties along with this event as the details of the cart will be written to the cart attribute above.
2. Data type:  Event data stored in the contactactivities collection.
3. Note: The actual name of the event is up to the client, but we typically recommend "cart".
3. "Order" event
1. Purpose: This event will be used to cancel the message sending process if a purchase occurs during the time frame between the cart event and the message send (per the custom delay).
2. Data type: Event data stored in the contactactivities collection.
3. Note: The actual name of the event is up to the client, but we typically recommend "order".

There are 2 implementations you can use to send the data to cordial:

• JavaScript listener implementation - JavaScript code placed on your website that sends data to Cordial from the client side browser. Learn more about setting up the core JavaScript listener version 2 code.
• Rest API implementation - a server-side alternative to JavaScript that sends data to Cordial via the API. Learn about updating contact records via the API.

JavaScript Listener Implementation

Prerequisite - assumes the user's browser has a cookie that holds the necessary contact identification data. There are 2 ways this cookie may be set.

1. A cookie will be set when a contact arrives on the site via a tracked link clicked from an email. In this case, a first party cookie is automatically written with the necessary information to identify the contact.
2. The second way a cookie may be set is by calling a basic identification function in JavaScript. When a customer logs into a site/store or provides their email address via a form submission (ex: newsletter sign up form), a function may be called to pass the email address to Cordial. The crdl(contact) method can set the cookie and add or update a contact record.
   • JS Listener V2
   • JS Listener V1

   crdl('contact', auth_data, contact_data);

   In JS listener v1, the cordial.identify sets the cookie and the cordial.contact adds or updates the contact record.

   cordial.identify(emailaddress);
   cordial.contact();

   Learn more about the crdl(contact) method.

When a cart is updated, run the following functions:

crdl([
    ['cart', 'clear'],
    ['cartitem', 'action' , cart_data], 
    ['event', 'cart']
]);

cordial.event('cart');
cordial.clearcart();
cordial.cartitem('action',[array of cartitemObjects]);

There are 2 possible actions for the crdl(cartitem) method: 'add' or 'remove'.

• 'add' - will add a new cart item record or increment the quantity of an existing record.
• 'remove' - will remove an existing cart item (supports a single object of cartitems).

Full details on working with a single or an array of cart items.

Best practice for managing the cart state - Although we do support the ability to "add" or "remove" individual items to the cart object, most implementations simplify the management of the cart state by calling ['cart', 'clear'] and then ['cartitem', 'add' , cart_data] on each cart event, effectively clearing and repopulating the entire cart object. This assumes the front end has access to all of the items in a given cart.

When an order is placed (checkout), run the following functions:

crdl([
    ['cart', 'clear'],
    ['order', 'action' , order_data], 
    ['event', 'order']
]);

cordial.clearcart();
cordial.order('action',orderObject);
cordial.event('order');

Full details on the order object.

REST API Implementation (server-side alternative to JavaScript)

Note: The REST API Implementation is an alternative method to the embedded JavaScript listener. This is a server-side approach to sending the same data.

Assumes the contact has been identified as part of the session.

Methods to call when a cart is updated:

• POST /v2/contacts/{primary_key}/cart (writes the cart items to the cart attribute)
• POST /v2/contactactivities (writes a named event "cart" to the contactactivites collection)

Methods to call when an order/purchase occurs:

• POST /v2/contactactivities (writes a named event "order" to the contactactivites collection)
• POST /v2/orders (writes the data for the order to the orders collection)

Creating an Automated Message

Now that we have the appropriate data points (passed by either the JavaScript listener or REST API) we can set up the event triggered automation template.

From the main platform navigation menu, choose Message Automation > Create New Automation. Provide the necessary information and click Continue.

In the left panel under Sending Methods, click Event Triggered.

For Trigger event, choose Custom event and select cart.

For Delivery time choose Delay sending. Set the Dlay to 2 hours (or whatever interval makes sense for your shopping experience).

For Handling events triggered during delay, there are a series of conditions that can be set.

For the first condition: If cart Then select Restart the delay timer. This ensures the full 2 hour delay is respected if other cart events occur after the initial event.

Add a second condition: If order Then select Cancel sending. This ensures that the cart abandonment email is not sent if the customer actually completes the order before the delay time ends.

For How often can this message be sent to an individual select Custom interval and set as 1 time(s) per 7 days. The frequency limit can be set to whatever interval makes the most sense for the shopping experience you would like to create.  We recommend limiting these triggers to a once a week.

Save the trigger setting.  

Once this is saved and the message content is published, you can Enable the message. As soon as the message is enabled, the triggers are active and will send the message according to the rules applied.

Coding the Message Content

The following is a very simple example of the smarty script for printing the cart items in the body of the message. Apply markup and styling according to your brand or style guide.

You left the following items in your cart:<br> 

{foreach $contact.cart.cartitems as $item} 
<b><a href="{$item.url}">{$item.name}</a></b><br> 
SKU: {$item.sku}<br/> Description: {$item.description}<br>
Qty: {$item.qty}<br/> Price: {$item.amount}<br><br> 
<a href="{$item.url}"><img src="{$item.images.0}" /></a><br>
{/foreach}

Once your draft is tested and ready to be published, publish the content, set the headers, and enable the trigger sending method, and your abandoned cart email will be enabled and active.

In the next article learn how to set up an order confirmation message.