How can we help?

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.

We typically recommend browse as the name for this event.

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.

We typically recommend cart as the name for this event.

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.

We typically recommend order as the name for this event.

Sending methods

There are two 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. A cookie can also be set 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);

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

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

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

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

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

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

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

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.

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

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

The ['event', 'order'] call is optional, and not required for browse abandonment. However, we highly recommend that order data is passed using either this method or the REST API when an order is placed to take advantage of segmentation by purchase behavior.

Create the 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. Log in to Cordial and navigate to Automations > 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 A contact's real-time behavior and select browse.
5. For Delay choose Delay for minutes, hours, or days. Set the delay to two hours (or whatever interval makes sense for your shopping experience).
6. Under Handling events triggered during delay, there are a series of conditions you can 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.
   • 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.
7. For How often can this message be sent to an individual select Custom Interval and set it for one time(s) per seven days.
8. Click the Save button to save your trigger settings.
9. Once your trigger settings are saved and your message content is published, you can click the button to Enable the send method.

Code the message content

{$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}

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.

Set the limit and sort results

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

Show browse events from the last seven days

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

Display unique browse events (deduping)

{$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}