Why sessionStorage instead of localStorage?

sessionStorage is cleared when the tab closes. If the user returns the next day, no stale flag remains. With localStorage, a user visiting the site 3 days later could trigger a false positive cart_abandonment.

What happens if the user stays on the cart page and refreshes?

The flag is already set, it gets set again (same value). No problem. The event only fires when navigating to a page outside the cart.

Does it work on SPA (Single Page Application) sites?

The basic approach does not, as it relies on page loads. For SPAs, it needs to hook into history.pushState and popstate events. The server-side approach doesn't have this issue.

Can this code be used as conversion data for Google Ads or Meta?

Not directly, but after being pushed to dataLayer, it can be forwarded via GTM as a Google Ads remarketing tag or Meta Pixel custom event. Define the cart_abandonment event as a trigger in GTM.

How do I use it with Shopify Custom Pixel?

Shopify Custom Pixel runs in a sandbox and cannot access the main page's sessionStorage. Use a server-side approach (Webhooks + Customer Events API) for Shopify.

What is the difference between the basic approach and the state machine?

The basic approach uses a single flag and counts every cart exit as abandonment. The state machine knows the checkout funnel, applies grace periods for product page transitions, and doesn't fire events on return visits.

Why is the server-side approach more accurate?

Client-side approaches cannot capture tab closing. With a server-side heartbeat system, it's possible to verify whether the user truly left by waiting 30 minutes. It's also unaffected by ad-blockers.

Cart Abandonment Tracking: Triggering Events Across Page Navigations with sessionStorage

JavaScript code that fires a cart_abandonment event via dataLayer when a user leaves the cart page without placing an order. Platform-specific URL configurations for Ticimax, IdeaSoft, T-Soft and Shopify.

TL;DR

Not every cart exit is abandonment: returning to product pages and progressing through checkout are normal behavior, real abandonment is only funnel exits and site departures. The basic sessionStorage approach cannot make this distinction. For production, use a funnel-aware state machine or server-side Beacon API.

Get Access Sign In