Adding custom data to PRODUCT_ADD_TO_CART

[Marcoj776]

Adding custom data to an Analytics component such as ProductView is a breeze
such as:

<Analytics.ProductView
  data={{
    products: [
      {
        id: product.id,
        title: product.title,
        ....
      },
    ],
  }}
  customData={{
    isNonDtc: isNonDtc,
  }}
/>

But how do I pass custom data for the PRODUCT_ADD_TO_CART ?

As you can see from the screenshot this is the data that is passed to my analytics
subscribe('product_added_to_cart', (data) => {...})

[opusxj]

There's no per-event customData for product_added_to_cart, and it's down to how the event is produced.

Unlike ProductView, add-to-cart isn't published from a component you render. CartAnalytics (inside Analytics.Provider) compares the previous and current cart after each cart update and publishes product_added_to_cart for any new or increased line. The payload is only:

{ cart, prevCart, currentLine, prevLine?, shop, customData, eventTimestamp }

customData here is the global value from <Analytics.Provider customData={...}>, not anything from the add-to-cart itself. (The skeleton's AddToCartButton posts a hidden analytics field, but the /cart action never reads it, so it never reaches the event.)

So put the data on the cart line and read it from currentLine.

Option 1: line attributes (best for per-add values)

<AddToCartButton
  lines={[{
    merchandiseId: selectedVariant.id,
    quantity: 1,
    attributes: [{key: '_isNonDtc', value: String(isNonDtc)}],
  }]}
>

subscribe('product_added_to_cart', ({currentLine}) => {
  const isNonDtc = currentLine?.attributes
    ?.find((a) => a.key === '_isNonDtc')?.value === 'true';
});

The skeleton's CartLine fragment already queries attributes { key value }. The _ prefix is the usual convention for hiding a property from customers.

Option 2: query it on the product (best if it's a fixed product property)

If isNonDtc is a product setting, store it as a metafield or tag, add it to the merchandise { product { ... } } part of the CartLine fragment, and read it from currentLine.merchandise.product. No form changes needed.

Option 3: global customData

Only works if the value is the same for the whole session (locale, market, customer type).