Overview

A browse abandonment message targets a customer who has visited your website, browsed items, and then abandoned the website without adding anything to their cart.

This message can be delivered automatically to promote items the customer viewed, using images and descriptions of the products that link back to product pages. Browse abandonment messages are a great way to engage customers by showing items they recently browsed and offering an incentive to return to the site and continue shopping.

Implement the trigger

In order for the browse abandonment message to send, there needs to be data sent to the system that will trigger the automation. We'll use the trigger of when a contact browses an item on your website. If an item is ordered or added to the cart, we'll cancel the message based on a cart or order event.

This strategy utilizes three primary pieces of data:

1. Browse event

• Purpose: This named event is used to trigger the message sending process. Optional properties (category, product, description, etc.) can be passed along with the event to personalize message content and create audience rules for searching and segmentation.
• Data type:  Event data stored in the Contact Activities collection.  

2. Cart event

• Purpose: This named event is used to cancel the message sending process if an item is added to the cart during the time between the browse event and the message send (per the custom delay).
• Data type: Event data stored in the Contact Activities collection.  

3. Order event

• Purpose: This event will cancel the message sending process if a purchase occurs during the time between the browse event and the message send (per the custom delay).
• Data type: Event data stored in the Contact Activities collection.   

Implementation methods

There are two implementation methods 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 JavaScript Listener v2.
• Rest API implementation: A server-side alternative to JavaScript that sends data to Cordial with the API. Learn about updating contact activities with the API.

JavaScript Listener implementation

This method assumes the user's browser has a cookie that holds the necessary contact identification data. There are two ways this cookie can be set.

1. A cookie will be set when a contact arrives on your site from a tracked link clicked in 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 can be set is by calling a basic identification function in JavaScript. When a customer logs into a site/store or provides their email address with a form submission (ex: newsletter sign-up form), a function can be called to pass the email address to Cordial. The crdl(contact) method can set the cookie and add or update a contact record.

crdl('contact', auth_data, contact_data);

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

• Learn more about the crdl(contact) method here here.

When you would like to capture a browse event, run the following function

crdl('event', 'action_name', properties);

cordial.event('eventName',propertiesObject);

The properties object passes key/value pairs describing the browse event that can be used for creating an audience, searching contacts, and personalizing message content.

var properties = {
 'category': 'Shirts',
 'product': 'khaki shirt'
};
 
crdl('event', 'browse', properties); 

cordial.event('browse',{
 'category': 'Shirts',
 'product': 'khaki shirt'
});

• You can learn more about event properties here.

When an item is added to the cart, run the following function

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

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

The cart event is used to cancel the message if an item is added to the cart during the time between the browse event and the message send (per the custom delay). You also have the option of adding the details of cart items to the cart object (stored as contact attribute data) for the purpose of an abandoned cart message.

• Read more about setting up an abandoned cart message here.

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

• Learn more about the order object here.

REST API implementation (server-side alternative to JavaScript)

This method assumes the contact has been identified as part of the session.

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.

Method to call when an item is browsed:

• POST /v2/contactactivities: writes a named event "browse" in the Contact Activities collection.

Method to call when an item is added to cart:

• POST /v2/contactactivities: writes a named event "cart" in the Contact Activities collection.

Methods to call when an order/purchase occurs:

• POST /v2/contactactivities: writes a named event "order" in the Contact Activities collection.
• POST /v2/orders: writes data for the order to the Orders Collection.

Create an automated message

Once you have the appropriate data points passed by either the JavaScript Listener or REST API, you can set up the event triggered automation template.

1. From the Cordial Dashboard, navigate to Message Automation > Create New Automation.

2. Provide the necessary information and click Continue.

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

4. For Trigger Events, choose Custom event and select browse.

Note: The browse option will appear in this menu as soon as the first browse event has been passed to the account.

5. For Delivery Time choose Delay for minutes, hours, or days. Set the Delay to 2 hours (or whatever interval makes sense for your shopping experience).

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

• For the first condition: If browse Then select Restart the delay time. This ensures the full two-hour delay is respected if other browse events occur after the initial event.

• Add a second condition: If cart Then select Cancel sending. This ensures that the browse abandonment email is not sent if the customer adds an item to their cart before the delay time ends.

Note: The cart option will appear in this menu as soon as the first cart event has been passed to the account.

• Add a third condition: If order Then select Cancel sending. This ensures that the browse abandonment email is not sent if the customer actually places an order before the delay time ends.

Note: The order option will appear in this menu as soon as the first order event has been passed to the account.

7. For How often can this message be sent to an individual select Custom Interval and set it for 1 time(s) per 7 days.

8. Save the trigger setting.  

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

Code the message content

The following is an example of the Smarty code used to display the browsed items in the body of a message. Using the tabs below, you can view the HTML and Smarty, example event data, and the rendered output that will show when a message is sent or previewed.

• Learn more about Smarty and the getEventRecords method here.

{$browseditems=$utils->getEventRecords('browse')}
<strong>Items You Browsed</strong><br><br>
{foreach $browseditems as $item}
{$item.properties.title|capitalize}<br>
{$item.properties.price} <br>
{$item.properties.description|capitalize} <br>
{$item.properties.url} <br><br>
{/foreach}

[
   {
    "cID": "58d2fc99ac0c8117814d4e78",
    "_id": "59014a9608ab4e356ec0706a",
    "properties": {
      "productID": "001"
      "title": "khaki shirt"
      "url": "http://example.com/shirt",
      "price": 9.99,
      "description": "a really cool khaki shirt",
    },
    "action": "browse",
    "time": "2017-04-27T01:34:13+0000",
    "email": "fredgarvin@gmail.com"
  },
   {
    "cID": "58d2fc99ac0c8117814d4e78",
    "_id": "59014a9608ab4e356ec0706a",
    "properties": {
      "productID": "002"
      "title": "khaki pants"
      "url": "http://example.com/pants",
      "price": 19.99,
      "description": "awesome khaki pants",
    },
    "action": "browse",
    "time": "2017-04-27T01:37:13+0000",
    "email": "fredgarvin@gmail.com"
  },
   {
    "cID": "58d2fc99ac0c8117814d4e78",
    "_id": "59014a9608ab4e356ec0706a",
    "properties": {
      "productID": "003"
      "title": "suede shoes"
      "url": "http://example.com/shoes",
      "price": 29.99,
      "description": "sweet suede shoes",
    },
    "action": "browse",
    "time": "2017-04-27T01:40:13+0000",
    "email": "fredgarvin@gmail.com"
  }
]

Add query filters

getEventRecords($eventName, $newerThan, $properties, $limit, $sort)

Our example code will pull all browse events from the database and render them in the message for each contact, but you'll most likely want to filter the results and show only the most recent browse events. The getEventRecords method has several parameters you can apply to filter the query results.

• Learn more about the getEventsRecords parameters here.

Set the limit and sort results

The following example will limit the results to five events and sort them in descending order.

{$browseditems=$utils->getEventRecords("browse",null,[],5,['column'=>'ats','direction'=>'desc'])}

Note: "ats" stands for Action Timestamp, and it's the parameter used for sorting or rendering the event time stamp.

Show browse events from the last seven days

In our example, we're only allowing a message to be sent once every seven days, so it makes sense to show only events that happened during that time period. You can add the "newerThan" parameter with Smarty that generates a date seven days earlier than the current server timestamp.

• Learn more about data and timestamp variables here.

{$browseditems=$utils->getEventRecords('browse',{'-7 days'},[],5,['column'=>'ats','direction'=>'desc'])}

Display unique browse events (deduping)

A site visitor might view the same item on a website multiple times, generating duplicate browse events. You can use Smarty to display only the unique events.

The following example will query five browse events from the past seven days and only display the items with a unique product ID.

{$browseditems=$utils->getEventRecords('browse',{'-7 days'},[],5,['column'=>'ats','direction'=>'desc'])}
{foreach $browseditems as $browseditem}
{$unique_products[$browseditem.properties.productID] = [
'productID' => $browseditem.properties.productID,
'title' => $browseditem.properties.title,
'description' => $browseditem.properties.description
]}
{/foreach}
{foreach $unique_products as $unique_product}
Title: {$unique_product.title}<br>
Description: {$unique_product.description}<br><br>
{/foreach}