Tracking an Abandoned Cart Using Tidio – Tidio

There are several ways you can track abandoned carts with the help of Tidio. If your store is on Shopify, you won't need to deal with any coding in your back-end - use the tracking option from Settings. If your store is built on a different platform, you'll need to add a small script to your store's source code.

In this article, you'll learn:

How to track an abandoned cart for Shopify users
How to track an abandoned cart for non-Shopify users

Automated for Shopify Users

Once enabled, tracking will start automatically to trace the cart. To activate it, go to Settings > Tracking > Manage tracking, and select the Shopify platform there. Click on Save - your tracking will now be enabled!

Screenshot_2022-12-16_at_11.32.31.png

Now, you can add your abandoned bot. Head over to the Chatbots section and look for the Discount when cart is abandoned bot in the Boost Online Sales section. You can edit the bot and adjust it to your needs, leaving the New Event trigger with the abandoned cart event name.

Non-Shopify Users - Developers Only

This method is an advanced implementation and will be useful for developers only.

The chat needs to know where is the cart on your site and where starts the checkout area. To point out to the app where the visitor proceeds from the cart, you'll need to use this code and specify the cart page as the 'start' point, and the checkout page as the 'end' point. The code needs to be added after the chat's installation script.

<script>
  (function() {
    function onTidioChatApiReady() {
      // below is the list which starts the abandoned cart process. If some of the steps will be missed, and the visitor doesn't land on the page given in "checkoutFinished" - abandoned cart will be triggered.
      var checkoutSteps = [
        "http://shop.com/cart", // checkout step 1
        "http://shop.com/payments", // checkout step 2
        "http://shop.com/shipping" // checkout step 3
      ];
      // below is the list which clears the abandon cart process without triggering it
      var checkoutFinished = [
        "http://shop.com/order-complete" // the purchase page
      ];
      // do not modify the code below
      function executeTidioChatApiTrack() {
        tidioChatApi.track("Abandoned Cart");
      }

      function checkUrl(e) {
        var t = "tidioStartUrlVisited",
          i = getCookie(t),
          o = e.replace(/\/$/, "");
        if (-1 < checkoutSteps.indexOf(e) || -1 < checkoutSteps.indexOf(o))
          return setCookie(t, "1", "10"), !0;
        i &&
          1 == +i &&
          -1 === checkoutFinished.indexOf(e) &&
          -1 === checkoutFinished.indexOf(o) &&
          executeTidioChatApiTrack(),
          setCookie(t, "", -1);
      }

      function setCookie(e, t, i) {
        var o = new Date();
        o.setTime(o.getTime() + 24 * i * 60 * 60 * 1e3);
        var n = "expires=" + o.toUTCString();
        document.cookie = e + "=" + t + ";" + n + ";path=/";
      }

      function getCookie(e) {
        for (
          var t = e + "=",
            i = decodeURIComponent(document.cookie).split(";"),
            o = 0; o < i.length; o += 1
        ) {
          for (var n = i[o];
            " " == n.charAt(0);) n = n.substring(1);
          if (0 == n.indexOf(t)) return n.substring(t.length, n.length);
        }
        return "";
      }
      var i, o;
      checkUrl(document.location.href),
        (i = window.history),
        (o = i.pushState),
        (i.pushState = function(e) {
          "function" == typeof i.onpushstate && i.onpushstate({
            state: e
          });
          var t = o.apply(i, arguments);
          return checkUrl(document.location.href), t;
        });
    }
    if (window.tidioChatApi) {
      window.tidioChatApi.on("ready", onTidioChatApiReady);
    } else {
      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
    }
  })();
</script>

Don't forget to check our best solutions to reduce the abandoned cart rate with Chatbots.