Please note that if you have a ShopRenter, Shopify, WordPress, WooCommerce or Magento site, OptiMonk can automatically detect the content of the visitor's cart and use this information for the display rules of your campaigns once the OptiMonk code is installed.
If you are using one of the above, you do not need any additional JavaScript code — install OptiMonk on your site and the Cart rules targeting rule is ready to use. Jump straight to Set up the campaign below.
If you run a different kind of site, add the code described in this article so OptiMonk knows what is in the cart.
1. When should I use eCommerce cart segmentation?
When you want to display your message based on the contents of the cart. For instance, when you want to provide a special offer to visitors who have added some products to their cart, and a different message to visitors who haven't put anything into their cart yet.
2. Why should I use eCommerce cart segmentation?
Cart abandonment is one of the main challenges for eCommerce sites. Using eCommerce cart segmentation with OptiMonk helps you keep your visitors moving towards checkout, and encourages visitors to add items to their cart by displaying specific messages to each group of visitors.
3. How do I set up my site for OptiMonk to retrieve the contents of a visitor's cart?
OptiMonk retrieves information on cart contents using JavaScript code. You customize the code based on cart contents, or specific items, then place that code on your site.
4. What code do I need for OptiMonk to retrieve information on cart contents?
When someone adds a product to their cart on your site, a code such as the one below should be executed:
<script type="text/javascript">
if (window.OptiMonk || window.OptiMonkEmbedded ) {
var OM = window.OptiMonk || window.OptiMonkEmbedded;
var adapter = OM.Visitor.createAdapter();
adapter.Cart.add('##{{ cartProductID }}', {quantity:##{{ cartProductQty }}, price:##{{ cartProductPrice }}});
}
</script>
Important: OptiMonk.Visitor exists only if there is at least one active campaign on the domain.
In the above example, OptiMonk only retrieves some very basic data about cart contents.
OptiMonk can also retrieve more detailed information about particular products in a visitor's cart. For more detailed information, a code such as this should be executed:
<script type="text/javascript">
if (window.OptiMonk || window.OptiMonkEmbedded ) {
var OM = window.OptiMonk || window.OptiMonkEmbedded;
var adapter = OM.Visitor.createAdapter();
adapter.Cart.add('##{{ 'product1' }}', {quantity:##{{ 3 }}, price:##{{ 1000 }}, color:##{{ red }}});
adapter.Cart.add('##{{ 'product2' }}', {quantity:##{{ 3 }}, price:##{{ 1000 }}, color:##{{ blue }}});
}
</script>
In the above example, two products added to the cart are defined, their IDs are:
product1andproduct2
and there are 3 variables passed for both products:
quantity, i.e. "3"
price, i.e. "1000"
color, i.e. "blue"
Important: the quantity and price of the product are required data, so they should always be set up.
5. What happens when a visitor removes an item from their cart?
You can also add code to your site so OptiMonk knows when a visitor removes an item from their cart:
<script type="text/javascript">
if (window.OptiMonk || window.OptiMonkEmbedded ) {
var OM = window.OptiMonk || window.OptiMonkEmbedded;
var adapter = OM.Visitor.createAdapter();
adapter.Cart.remove('##{{ cartProductID }}');
}
</script>
Or you can empty the cart with a single call:
<script type="text/javascript">
if (window.OptiMonk || window.OptiMonkEmbedded ) {
var OM = window.OptiMonk || window.OptiMonkEmbedded;
var adapter = OM.Visitor.createAdapter();
adapter.Cart.clear();
}
</script>
6. Details to pay attention to when you insert the code
The name of your custom attributes or products cannot include special characters.
Products and variables are case-sensitive.
The
OptiMonkOnReadyfunction should be defined only once, i.e. only one time per page.
Set up the campaign
Once the cart data reaches OptiMonk — either automatically on a supported platform, or through the code above — you add a Cart rules targeting rule to the campaign.
Open Campaigns in the left menu and click the campaign you want to use cart data in.
Open the Settings tab.
In the Who should see the popup section, click Add new rule.
Pick Cart rules — Cart value, item count, products (Shopify & co.).
Build your conditions. Each condition starts with what it looks at:
Condition What it matches Operators Cart value The total value of the cart equals, greater than, less than, at least, at most, between Number of products How many items are in the cart the same six Product in cart A specific product — cart contains or cart does NOT contain matched by product (picked from your catalog) or by name Click Add condition for a second, third… condition. They are AND-ed: Cart conditions are AND-ed and evaluated live on the store (Shopify, ShopRenter, WooCommerce, …). On non-supported stores the rule never matches.
Save the rule, then click Save changes at the bottom of the Settings tab.
The rule card then reads, for example, Cart rules · Cart value at least 100, and the settings summary shows Cart rules (1 conditions).
Picking products from your catalog
For Product in cart, OptiMonk can offer your actual product list: type into Search products… and pick from the results. This needs an active Shopify store connected to the account — otherwise the modal says Product picking needs an active Shopify store — you can remove selected products, or match by name instead, and you match by name (the product name as it appears in the cart) instead.
Examples
Abandoning a full cart: Cart value — at least —
100, combined with an exit-intent trigger.Encouraging the first item: Number of products — equals —
0.Category-specific offer: Product in cart — cart contains — pick the products from the catalog.
Tip: you can also ask the assistant on the right to set this up (for example: "only show when the cart is over 100 euros"). The rule cards update as it edits them.