How can we help?

Search

Browse abandonment message

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

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.

This article assumes you have implemented JavaScript Listener v2. We have included examples applicable to JavaScript Listener v1 in case you aren't using v2 at this time.

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

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.

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

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.

REST API implementation (server-side alternative to JavaScript)

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

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:

Method to call when an item is added to cart:

Methods to call when an order/purchase occurs:

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.

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

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.

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.

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 one time(s) per seven days.

The frequency limit can be set to whatever interval makes the most sense for the shopping experience you want to create. We recommend limiting these triggers to once a week.

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.  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.

  • {$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"
  }
]
  • Items You Browsed

    Khaki Shirt
    $9.99 
    A Really Cool Khaki Shirt
    http://example.com/shirts 

    Khaki Pants
    $19.99
    Awesome Khaki Pants
    http://example.com/pants

    Suede Shoes
    $29.99
    Sweet Suede Shoes
    http://example.com/shoes

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

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'])}

"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.

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

Comments

0 comments

Please sign in to leave a comment.