Abandoned Cart setup

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.

Introduction

Carma Abandoned Cart helps you send reminders to your customers if they for some reason abandoned a shopping cart in you e-shop. 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 Abandoned Cart Retainer with the items in the shopping cart. This way, Carma can use this information to send personalized reminder emails if the shopping cart is abandoned. Every time the Abandoned Cart Retainer is updated in any way the countdown to abandonment is pushed forward. When the shopping cart is considered abandoned in the Abandoned Cart Retainer the Abandoned Cart Client will automatically send a personalized reminder to the buyer.

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

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 Abandoned Cart 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 Carma for your email communication Carma will help you identify recipients as soon as the recipient clicks in emails sent from Carma, 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 functionality you need to add a script tag to the e-shop. You will then use script functions to update the Abandoned Cart 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 Abandoned Cart Client.

Bear in mind!

  • 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 in Carma.

 

Link to your web shop

Use a link similar to the one below to link to your shop. (The link below leads to our test shop where you can test this Abandoned Cart Client)

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

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

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

email (optional)

Identifies the cart owner automatically. This could be done by your web shop as well.

Render cart contents in your email

Use Handlebars.js 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.
Make sure the value is www4_StKAe on each page that should interact with Ny 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. "ac_revived=yes" tells Carma that the cart is no longer abandoned.

"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){

ac.addToCart(item);

};

// The buyer removes an item from the shopping cart:

var onItemRemoved = function(item){

ac.removeFromCart(item);

};

// When your site knows the buyers email address:

// Add metadata required for your reminder email

var onEmailAddressEntered = function(emailAddress){

ac.addMetaData({ 'returnUrl': 'https://www.example.com/shop?ac_revived=yes&sessionId=' + currentUser.sessionId})

ac.addMetaData({ 'couponCode': 'FREESHIPPING'})

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(){

ac.cartPurchased();

};

Methods

carma.ac.registerEmail(emailAddress)

This is used as cart owner identifier.

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

carma.ac.addToCart(item)

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.

ac.addToCart({

id: "someItem",

amount: 100

});

carma.ac.removeFromCart(properties)

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

ac.removeFromCart({

id: "someItem",

amount: 100

});

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.

ac.setCart([{

id: "someItem",

amount: 100

}]);

carma.ac.resetCart();

Removes all data from the cart

ac.resetCart();

carma.ac.cartPurchased();

Marks this cart as purchased.

ac.cartPurchased();