In This Section

Browse Abandonment Message

Overview

A browse event trigger initiates an automated message that targets a customer who has visited your website, browsed items and then abandoned the website without adding anything to the cart.

This message can be delivered automatically to promote items previously viewed and may include images/descriptions of the products and links back to product pages.

Browse abandon messages are a great way to re-engage prospective customers by showing items recently browsed and offering an incentive to return to the site and continue shopping.

Implementing the Trigger

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

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

This strategy utilizes 3 primary pieces of data.

  1. "Browse" event
    1. 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.
    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 "browse".
  2. "Cart" event
    1. Purpose: This named event is used to cancel the actual message sending process if an item is added to the cart during the time frame between the browse 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 "cart".
  3. "Order" event
    1. Purpose: This event will be used to cancel the actual message sending process if a purchase occurs during the time frame between the browse 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

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.

Note: This article assumes you have implemented the JavaScript listener version 2. We have included examples applicable to JavaScript listener version 1 in the event you are not using version 2 at this time.
  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. 
    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 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.

 

Example:

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

Full details on the event properties.

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 frame 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 abandon cart message. Read more about setting up an abandon 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');

Full details on the order object.

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

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.

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:

Creating an Automated Message

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

In the 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 browse.

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

For Delivery Time choose Delay sending. Set the Delay 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 browse Then select Restart the delay time. This ensures the full 2 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 the 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.

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 once a week.

Save the trigger setting.  

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

Coding 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, you can view the HTML and Smarty, the example event data used and the rendered output that will show when a message is sent or previewed.

Learn more about Smarty and the getEventRecords method.

{$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. Learn more about the getEventsRecords parameters.

Set the limit and sort results

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

The example above will limit the results to "5" events and sort them in a descending order.

Note: "ats" stands for Action Timestamp and is the parameter used for sorting or rendering the event time stamp.

Show browse events from the last 7 days

In our example, we are only allowing a message to be sent once every 7 days, so it makes sense to show only events that happened during that time period. We can add the "newerThan" parameter with Smarty that generates a date that is 7 days earlier than the current server timestamp. Learn more about data and timestamp variables.

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

Display unique browse events (deduping)

A site visitor may view the same item on a website multiple times which will generate duplicate browse events. We can use Smarty to display only the unique events using the following code:

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

The example above will query 5 browse events from the past 7 days and only display the items with a unique productID.

Related articles

Comments

0 comments

Please sign in to leave a comment.