fix: use items in purchase ids (#283)

The id we were generating for purshases was alays the same as purchases
do not have a bid id, meaning that if two purchases were reported in the
same page, only one of them was being reported.

CHANGELOG.md

@@ -11,6 +11,8 @@ We follow the format used by [Open Telemetry](https://github.com/open-telemetry/
 ### Fixed
 - Fix truncation of `seenEvents`
   ([#282](https://github.com/Topsort/analytics.js/pull/282))
+- Fix id of purchase events
+  ([#283](https://github.com/Topsort/analytics.js/pull/283))
 
 ## Version 2.3.1 (2024-04-11)
 

src/detector.purchases.test.ts

@@ -9,6 +9,7 @@ test("check purchase", async () => {
   });
   document.body.innerHTML = `
     <div data-ts-action="purchase" data-ts-items='[{"product":"product-id-purchase1", "price": "2399", "quantity": 1}, {"product":"product-id-purchase2", "price": "299", "quantity": 1}, {"product":"product-id-purchase3", "price": "399", "quantity": 4}]'></div>
+    <div data-ts-action="purchase" data-ts-items='[{"product":"product-id-purchase-after", "price": "2199", "quantity": 1}]'></div>
   `;
   await import("./detector");
 
@@ -25,5 +26,13 @@ test("check purchase", async () => {
         { product: "product-id-purchase3", price: "399", quantity: 4 },
       ],
     },
+    {
+      type: "Purchase",
+      page: "/",
+      product: undefined,
+      bid: undefined,
+      id: expect.stringMatching(/[\d.a-zA-Z-]+/),
+      items: [{ product: "product-id-purchase-after", price: "2199", quantity: 1 }],
+    },
   ]);
 });

src/detector.ts

@@ -192,7 +192,10 @@ function logEvent(info: ProductEvent, node: Node) {
 }
 
 function getId(event: ProductEvent): string {
-  return [event.page, event.type, event.product ?? event.additionalProduct, event.bid].join("-");
+  const items = JSON.stringify(event.items || []);
+  return [event.page, event.type, event.product ?? event.additionalProduct, event.bid, items].join(
+    "-",
+  );
 }
 
 function getPage(): string {