@cartbase/storefront 0.20.1 → 0.22.0

package/src/tracking/rybbit-events.ts

@@ -179,6 +179,22 @@ export type RybbitBeginCheckoutData = {
   value: number
 }
 
+export type RybbitAddShippingInfoData = {
+  item_ids: string[]
+  num_items: number
+  currency: string
+  value: number
+  shipping_tier?: string
+}
+
+export type RybbitAddPaymentInfoData = {
+  item_ids: string[]
+  num_items: number
+  currency: string
+  value: number
+  payment_type?: string
+}
+
 export type RybbitPurchaseData = {
   transaction_id: string
   item_ids: string[]
@@ -217,6 +233,32 @@ export function trackRybbitBeginCheckout(
   })
 }
 
+export function trackRybbitAddShippingInfo(
+  data: RybbitAddShippingInfoData
+): void {
+  fireEvent("add_shipping_info", {
+    item_ids: joinIds(data.item_ids),
+    num_items: data.num_items,
+    currency: data.currency,
+    value: data.value,
+    // Rybbit accepts string and number only, so an empty tier is omitted
+    // rather than sent as "".
+    ...(data.shipping_tier ? { shipping_tier: data.shipping_tier } : {}),
+  })
+}
+
+export function trackRybbitAddPaymentInfo(
+  data: RybbitAddPaymentInfoData
+): void {
+  fireEvent("add_payment_info", {
+    item_ids: joinIds(data.item_ids),
+    num_items: data.num_items,
+    currency: data.currency,
+    value: data.value,
+    ...(data.payment_type ? { payment_type: data.payment_type } : {}),
+  })
+}
+
 /**
  * Purchase event — fired client-side on the order-confirmed page.
  *

package/src/tracking/ttq.ts

@@ -141,6 +141,30 @@ export function trackTikTokInitiateCheckout(data: {
   })
 }
 
+/**
+ * AddPaymentInfo — TikTok's own standard event, fired when the shopper has
+ * settled how they will pay. There is no TikTok equivalent of
+ * `add_shipping_info`, so the shipping step reaches Meta, GA4 and Rybbit
+ * and stops there; inventing a custom event on this vendor would optimise
+ * nothing and report nowhere.
+ */
+export function trackTikTokAddPaymentInfo(data: {
+  contents: TikTokContentItem[]
+  currency: string
+  value: number
+  paymentType?: string
+}): void {
+  const ttq = safeTtq()
+  if (!ttq) return
+  ttq.track("AddPaymentInfo", {
+    contents: data.contents,
+    content_type: "product",
+    currency: data.currency,
+    value: data.value,
+    ...(data.paymentType ? { payment_type: data.paymentType } : {}),
+  })
+}
+
 export function trackTikTokPurchase(data: {
   contents: TikTokContentItem[]
   currency: string

package/src/tracking/types.ts

@@ -93,6 +93,40 @@ export type InitiateCheckoutData = {
   contents: MetaContentItem[]
 }
 
+/**
+ * AddShippingInfo. Not one of Meta's standard events, so the Pixel takes
+ * it through `trackCustom`; GA4 and Rybbit both name it
+ * `add_shipping_info`. `shipping_tier` is the courier the shopper chose,
+ * omitted while they have filled the address but picked nobody yet.
+ */
+export type AddShippingInfoData = {
+  content_ids: string[]
+  content_type: "product" | "product_group"
+  currency: string
+  value: number
+  num_items: number
+  contents: MetaContentItem[]
+  shipping_tier?: string
+}
+
+/**
+ * AddPaymentInfo, a Meta standard event. Cash on delivery counts: Meta
+ * defines the event as "payment information is added in the checkout
+ * flow" and GA4 defines `payment_type` as "the chosen method of payment",
+ * so choosing to pay the courier completes the step, it just involves no
+ * card. Carrying `payment_type` is what keeps the two paths separable in
+ * reporting.
+ */
+export type AddPaymentInfoData = {
+  content_ids: string[]
+  content_type: "product" | "product_group"
+  currency: string
+  value: number
+  num_items: number
+  contents: MetaContentItem[]
+  payment_type?: string
+}
+
 export type PurchaseData = {
   content_ids: string[]
   content_type: "product" | "product_group"