WebPixel add to cart request body empty because it runs after redirect to cart page

[kajderuyter]

Hello, we are getting empty request bodies from the WebPixel add to cart events on a client's website. I checked and it seems to be because the WebPixel code runs after the redirect to the cart page, which causes the data to not be available anymore. I'm not sure about it but it's the only thing I can think of that would cause the request body to be empty. Has anyone ever dealt with this problem before and how can we fix this?

In this screenshot of the DevTools Network tab you can see that our request is sent after the /cart redirect

[SBD_]

Hey @kajderuyter 

I reached out to the WebPixels team on this one and they said:

Yes unfortunately this is one of the known limitations of add to cart. The way add_to_cart works is that we listen to the /add request, and when the response is returned, we confirm that the new cart (which is in the response) contains the added item. If the merchant has customized their shop to force a redirect before the response is returned, we are unable to capture this event. In general our events are tested against the Shopify first party themes (like Dawn).

For other customizations, we offer custom events. They can emit their own add_to_cart event based on how their shop works. They should find a place in their theme JS/liquid files, and if they see a place where they are sure an item has been added to their cart, they can emit that custom event  (or even fire the actual add_to_cart event).

// In their theme file where they are sure their add to cart has successfully completed
// The `...` are payloads they need to construct, the payload structure is outlined in https://shopify.dev/docs/api/pixels/customer-events#product_added_to_cart

analytics.publish('product_added_to_cart', {
  cost: {
    totalAmount: {
      amount: ...,
      currencyCode: ...,
    },
  },
  merchandise: ...,
  quantity: ...,
});

Let me know if this unblocks you!