How do I fire a checkoutStarted event with the cart on my Hydrogen storefront?
Auto tracking already gives me product views and cart views, which is great, but I want an explicit checkout-start signal that carries the cart contents so I can use it as an experiment goal later.
How do I send it, and what does teh payload look like? I have a checkout button handler where I can drop the call:
function onCheckout() { // fire event here}2 answers
checkoutStarted is a manual event you send through the SDK, and it takes a cart payload. In your handler:
function onCheckout() { croct.track('checkoutStarted', { cart: { currency: 'USD', total: 129.90, items: [ {product: {productId: 'sku-123', name: 'Runner Tee'}, quantity: 2, total: 59.90}, ], }, });}The auto tracking you already have covers product views, cart views, and cart updates from the storefront, so this is the one you add by hand because only your checkout flow knows when it actually starts. Custom events like this are sent through the SDK right alongside the auto-tracked ones, no separate setup.
One sequencing note so you do not trip on it: a goal event has to already be tracked before you can select it as an experiment goal. So fire the checkoutStarted call, confirm it is landing, and only then will it be available to pick as the primary goal when you set up the experiment. If it is not showing in the goal list, it is almost always that no event has come through yet.
That worked. Fired a couple of test checkouts first and then it showed up in the goal picker. Thanks both, cart payload is landing correctly now.