This article is for the developer who connects your web shop to Abandoned cart. Once it's set up, contacts who leave items in their shopping cart automatically get a reminder email. For an overview, see Abandoned cart.
- How it works
- Before you start
- Identify the buyer
- Add the script
- Build the reminder email
- Use the REST API instead
How it works
Abandoned cart has two parts:
- The monitor stores what's in each buyer's shopping cart. Your web shop updates it while the buyer shops.
- The abandoned cart client sends the reminder. When a cart hasn't been updated for the set time, the cart counts as abandoned and the client sends a personalized reminder to the buyer.
Every update to the cart restarts the countdown. Most shops need one client per language and brand, because you set the language and design of the reminder per client.
In this article, cart means the data Symplify stores, and shopping cart means the cart in your web shop.
Before you start
- A client can only handle one currency.
- The buyer is identified by email address. If a buyer adds products on one device and completes the purchase on another with the same email address, the cart is reset and no reminder is sent.
- The reminder links back to your shop to restore the shopping cart. How that works depends on your shop platform, but usually the link carries a session ID or cart ID. Check with your platform provider.
- If the buyer clicks the reminder and completes the purchase, the cart counts as won back and is added to the client's statistics. If the buyer restarts the browser or computer after arriving from the reminder, the purchase is no longer linked to the cart.
Tip: Add abandoned cart tracking to your account so the tracking parameter is added to all links in your emails automatically.
Identify the buyer
A buyer is known when the monitor has their email address. You can send the email address at any point during the purchase. We recommend that your shop stores it in local storage or a cookie as soon as the buyer gives it, even outside the purchase.
When a contact clicks a link in an email from Symplify, the script stores their email address on the device automatically, so they're known the next time they shop.
Add the script
Go to Automation > Abandoned carts, open your client and go to the Integration tab. It has the sub-tabs Introduction, Data format, Email, Javascript and REST, with your client's own ID filled in. Copy the script from the Javascript tab.
Script tag
Add the script to every page that should update the cart:
<script id="carma_ac" type="text/javascript" src="//mimgs.s3.amazonaws.com/scripts/ac.js" data-cid="[your client ID]"></script>
Note: data-cid tells the script which client the page belongs to. Use the value from the Integration tab of the right client.
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 buyer's email address,
// add the metadata the reminder email needs:
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);
};
// On the order confirmation page:
var onPurchaseFinished = function(){ carma.ac.purchaseCompleted(); };
Cart and metadata format
var product = {
id: "sku12345", // the item ID, usually the SKU
name: "Product name", // the item name
description: "Product description", // short, ideally 1-2 lines in the email
quantity: 1, // number of items
amount: "299", // the price of the item
rating: 3 // item rating
};
var metaData = {
returnUrl: "https://www.example.com/shop?ac_revived=yes&sessionId=ABC123", // a URL that restores the shopping cart
currency: "USD", // the cart currency
couponCode: "CODE" // a coupon code from your shop, if any
};
Methods
- carma.ac.registerEmail("shopper@example.com") sets the email address that identifies the cart owner. If you call it and no item is added, a reminder with an empty cart is sent when the time runs out.
- carma.ac.addToCart(item) adds an item. The item can be any set of key-value pairs. If it has an amount, it's used for the cart total.
- carma.ac.removeFromCart(properties) removes the last item that matches all the key-value pairs you give.
- carma.ac.setCart(cartData, totalAmount) sets the whole cart. After you've used it, you can't use addToCart or removeFromCart.
- carma.ac.resetCart() removes all data from the cart.
- carma.ac.purchaseCompleted() marks the cart as purchased, so no reminder is sent.
Build the reminder email
Link back to your shop
Link to your shop with the ac_revived=yes parameter, which tells the client that the buyer came from a reminder. You can also add the email address, to identify the buyer automatically:
https://www.example.com/shop?ac_revived=yes&email={{contact.emailAddress}}
The Integration tab also has a link to a test shop where you can try your client.
Show the cart contents
The cart is available in the email as contact.__ac_cart. Use jsonRender to show it, see the Handlebars rundown. This example lists the items and the total. Your cart data may use other field names:
{{#jsonRender contact.__ac_cart}}
{{#with cart}}
<table width="100%">
{{#each cart.contents}}
<tr><td><a href="{{statLink url}}">{{name}}</a></td><td align="right">{{amount}} $</td></tr>
{{/each}}
</table>
<p align="right">Total: {{cart.amount}} $</p>
{{/with}}
{{/jsonRender}}
Use the REST API instead
If you'd rather update carts from your server than with the script, use the REST operations on the Integration tab:
- PUT .../[client ID]/[email address] sets the whole cart. Send it on every change. Include an amount and a contents list of items with sku and amount to make segments and reports easier.
- PUT .../[client ID]/[email address]/purchase removes the cart and marks it as purchased.
The full URLs for your client are on the Integration tab.