I’m sure every eCommerce site owner knows the importance of cart abandonment campaigns to get the users back in the funnel. However, setting up cart abandonment campaigns in Drip is quite tedious and laborious.
To make life easier for those who rely on the Drip I thought of writing this guide to set up cart abandon campaigns.
To send events to Drip from the e-commerce store, I’m going to use Action Recorder by CustomerLabs.
Action Recorder helps you to set up event tracking on your website without writing code.
Set up Add to cart event on the e-commerce store:
To get started, paste the JS tracking on your e-commerce store from here,

Once that’s done, open action recorder by clicking on this icon.

Action Recorder will open on top of your e-commerce store.

Now let’s set up add to cart event. Click on record action, and choose add to cart event on the drop down.

Now use the hand picker icon and choose the add to cart button.

Once you choose the button, now start tracking the other properties like name, size, price and image of the product.

Similar to the add to cart button, you can choose the element which you need to track.

After this, I’d like to track the image of the product too.

Choose the product image you’d like to send to Drip,

When someone clicks on the add to cart button, drip will receive product name as well as the product image. You can choose to send as many parameters as you wish, just to keep it simple I’m sticking with two product attributes.
Once this is done, now let’s configure remove from cart. We don’t want to send items after they are removed from the cart right. To have this logic right we need to create an another event Removed from Cart.
Follow the same procedure as above and track the Remove button on the cart page.

You’ll also need to track the product name along with it so that we can compare add to cart and remove from cart products are the same.

Once that’s done, we are set.
DRIP and E-commerce Store Integration
In the integrations screen on the CustomerLabs app, you can enable Drip Integration by giving your Drip account ID.

That’s it, CustomerLabs starts sending the data to drip.
Now Let’s head over to DRIP and do some configuration.
Step 1: Custom Fields
We need to create two custom fields:
a) products_in_cart
b) removed_products_from_cart
Step 2: Basic Automation Rules

Here set up a trigger, performed a custom event and choose Added to cart (Which is sent from your store). On the right-hand side, set a custom field value, choose products_in_cart and paste this code – {% assign value = event.products | remove: “[{” | remove: “}]” | remove: “’” | append: “ || ” %} {{ subscriber.products_in_cart | append: value }}
Similarly set up one more trigger for remove from cart:

set up a custom field removed_products_from_cart and paste this code there:
{% assign value = event.products | remove: “[{” | remove: “}]” | remove: “’” | append: “ || ” %} {{ subscriber.removed_products_from_cart | append: value }}
That’s it with rules.
Step 3: Email Set up
Create an email template under the campaigns section and paste this code there,
{% assign products_in_cart = subscriber.products_in_cart | split: " || " %}{% assign removed_products_from_cart = subscriber.removed_products_from_cart | split: " || " %}{% for product in products_in_cart %}{% assign productsFields = product | split: ","%}{% assign product_name = "" %}{% assign removed = false %}{% for field in productsFields %}{% assign values = field | split: ":" %}{% if values[0] == "productname" %}{% assign product_name = field %}{% endif %}{% endfor %}{% for removed_product in removed_products_from_cart %}{% if removed_product == product_name %}{% assign removed = true %}{% endif %}{% endfor %} {% if removed == false %}{% tablerow field in productsFields %}{% assign value = field | split: ":" %} {% if value[0] == "productimg" %} {% assign url = value[1] | append: ":" | append: value[2] %} {% else %}{{value[1]}} {% endif %} {% endtablerow %}{% endif %} {% endfor%}
That’s it. Preview it, it should look like below.

Sweet eh? Do you know anyone who could be benefited out of this, share it with them?