Abandoned cart setup

The Abandoned Carts add-on helps you send reminders to your customers if they for some reason have left items in the shopping cart on your site. You may want to encourage them to complete their purchase with a custom email that includes product links or special offers. After you set up an Abandoned Cart workflow, your customers who leave items in their shopping cart will automatically receive a follow-up email.

The Abandoned Cart functionality consists of two parts, the Abandoned Cart Retainer and the Abandoned Carts Client. During your buyers process of purchasing, you need to update the AC Retainer with the items in the shopping cart.

This way, Symplify can use this information to send personalized reminder emails if the shopping cart is abandoned. Every time the AC Retainer is updated in any way the countdown to abandonment is pushed forward. When the shopping cart is considered abandoned in the AC Retainer the AC Client will automatically send a personalized reminder to the buyer.

The number of AC Clients you set up depends on how your e-shop solutions works, the normal solution would be one AC Client per language and company/brand. This since you will be able to configure the language and design on your reminder per AC Client.

​To empower your e-shop with Abandoned Cart you need to add a script tag to the e-shop. You will then use script functions to update the AC Retainer with items when the buyer ad products to the shopping cart and if the buyer goes through with the purchase. You will find the specific scripts under integrations on your AC Client.

We’re using the term cart to refer to the Abandoned Cart Client meta-data, and shopping cart to refer to the actual shopping cart in your web shop.

 

The setup

First, read this before setting up an Abandoned Cart.

  • An Abandoned Cart Client can only handle one currency.
  • If a customer starts adding products to a cart on the mobile device identified with a emailadress and at a later time goes through with the purchase on another device identified with the same emailadress this will reset the Abandoned Cart Retainer and no email will be sent.
  • In the Abandoned Cart Retainer you will store the products that the recipient adds to the cart and you will be able to use this information to precent what was in the shopping cart in the reminder email. In the reminder email you will then link back to the e-shop to recreate the cart. Different e-shops have different solutions to recreate the cart but it is normally done if the recover cart link provides a parameter for sessionID or cartID, please check this with the provider of your e-shop.
  • If the buyer goes through with the purchase after receiving and clicking in the reminder the purchase will then count as a re-won shopping cart and added as statistics on the Abandoned Cart Client.
  • As soon as the browser or computer is restarted after the redirect from the reminder email the value of a purchase will not be assumed to the abandoned shopping cart.

Tip! Add Abandoned Cart Client tracking to your account to automatically add this parameter to all email links.

 

Identifying the buyer

The buyer could be known or unknown when the purchase is started. A buyer is known if the Abandoned Cart Retainer knows the buyers email address. You can at any time during the purchase process update the AC Retainer with the buyer email address. We recommend that you use HTML local storage (or a cookie) to store the email address as soon as the buyer gives this information (even if this information is provided not specifically during the purchase process).

When you use Symplify for your email communication Symplify will help you identify recipients as soon as the recipient clicks in emails sent from Symplify, the Abandoned Cart Client script will then automatically store the email address in a cookie or in local storage on the device for future use.

To empower your e-shop with Abandoned Cart you need to add a script tag to the e-shop. You will then use script functions to update the AC Retainer with items when the buyer ad products to the shopping cart and if the buyer goes through with the purchase. You will find the specific scripts under integrations on your AC Client

 

Link to your web shop

Use a link similar to the one below to link to your shop.

http://test.symplify.com/test-shop/www4_StKAe?ac_revived=yes&email={{contact.emailAddress}}

(The link leads to our test shop where you can test this Abandoned Cart Client)

Parameters

Different e-shops have different solutions to recreate the cart but it is normally done if the recover cart link provides a parameter for sessionID or cartID, please check this with the provider of your e-shop.

ac_revived=yes

Tells the cart client that we’ve arrived from a reminder email.

email=your_email_address (optional)

Render cart contents in your email

Use handlebars logic to insert cart information into your reminder emails. The example below is for informational purposes, your cart data might not use the same format.

​<div> {{#jsonRender contact.__ac_cart}} {{#with cart}}
<table class="table products" width="100%" style="font-family:Arial, sans-serif;font-size:12px;font-weight:normal;text-decoration:none;font-style:normal;mso-line-height-rule:exactly;line-height:16px;color:#000606;"> <tbody> {{#each cart.contents}} <tr> <td> <h5 style="font-family:Arial, sans-serif;font-size:12px;font-weight:normal;text-decoration:none;font-style:normal;mso-line-height-rule:exactly;line-height:16px;color:#000606;">{{name}}</h5> </td> <td style="width:20px;white-space:nowrap;text-align:right"> {{amount}}$ </td> </tr> {{/each}} </tbody> </table> <hr /> <div style="text-align:right"><h1 style="font-size:12px;font-family:Arial, sans-serif;font-weight:normal;text-decoration:none;font-style:normal;mso-line-height-rule:exactly;line-height:16px;color:#000606;">Total: {{cart.amount}}$</h1></div> {{/with}} {{/jsonRender}} </div>

Handlebars.js Helpers

{{#jsonRender contact.__ac_cart}}…{{/jsonRender}}

Javascript

Include the following script on pages that should interact with this Abandoned Cart Client.

<script id="carma_ac" type="text/javascript" src="//mimgs.s3.amazonaws.com/scripts/ac.js" data-cid="www4_StKAe"></script>

Important! The data-cid attribute instructs the script which Abandoned Cart Client the page interacts with. You must use the one available on the Integration tab of your Abandoned Cart Client.


Make sure that the script is on each page that should interact with New cart.

Example Shopping Cart Format

var product = {
id: "sku12345", //the id of this item, usually the stockkeeping unit (SKU)
name: "Product name", //the name of this item
description: "Product description", //a short description (should ideally fit on 1-2 lines in the email)
quantity: 1, //number of items
amount: "299", //the cost of this item
rating: 3 //item rating
};

var metaData = {
returnUrl: "https://www.example.com/shop?ac_revived=yes&sessionId=ABC123", //a URL that can reactivate the customer shopping cart in your shop.
currency: "USD", //the cart currency
couponCode: "CODE" //a coupon code generated by your shop, if available
}

Usage

// The buyer adds an item to the shopping cart:
var onItemAdded = function(item){ carma.ac.addToCart(item); };

// The buyer removes an item from the shopping cart:
var onItemRemoved = function(item){ carma.ac.removeFromCart(item); };

// When your site knows the buyers email address:
// Add metadata required for your reminder email
var onEmailAddressEntered = function(emailAddress){
carma.ac.addMetaData({"returnUrl": "https://www.example.com/shop?ac_revived=yes&sessionId=123"});
carma.ac.addMetaData({"couponCode": "FREESHIPPING"});
carma.ac.registerEmail(emailAddress);
};

//The buyer might continue with the purchase, or leave the web shop and return later from a reminder email.
//On confirmation page:
var onPurchaseFinished = function(){ carma.ac.purchaseCompleted(); };

Methods

carma.ac.registerEmail("shopper@example.com");

This is used as cart owner identifier.

Important! If you call this method and no item is added to the cart, an email with an empty cart will be sent when the expiration time has been reached.

 

carma.ac.addToCart({id: "someItem", description: "A description", quantity: 1, amount: 100 });

Adds an item to the cart. item can be any collection of key-value pairs. if item has an amount attribute, this will be used to keep track of the total cart amount.​

 

carma.ac.removeFromCart({ id: "someItem", amount: 100 }); 

​Removes the last item that contains all of the key-value pairs listed in properties.

 

carma.ac.setCart(cartData, totalAmount);

Sets the cart data. cartData can be any collection of key-value pairs. If amount is set, this will be used to keep track of the total cart amount.

You cannot use carma.ac.addToCart or carma.ac.removeFromCart after carma.ac.setCart has been used.

carma.ac.resetCart();

​Removes all data from the cart

 

carma.ac.purchaseCompleted();

Marks this cart as purchased.

Was this article helpful?
0 out of 0 found this helpful