refactor(tracker): changing id -> uid adding support for supplyin…

…g `childUid` additionally made changes to the cookie order - specifically the priority was changed to favor child data over parent, and sku over uid
searchspring · Jul 25, 2024 · ce32d44 · ce32d44
1 parent 5d4fea8
commit ce32d44
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 99 deletions.
diff --git a/docs/INTEGRATION_TRACKING.md b/docs/INTEGRATION_TRACKING.md
@@ -19,14 +19,15 @@ searchspring.tracker.track.shopper.login({
 ```
 
 ### Product View
-Tracks product page views. Should only be installed on product detail pages. An `id` and/or `sku` and/or `childSku` are required.
+Tracks product page views. Should only be installed on product detail pages. A `uid` and/or `sku` and/or `childSku` and/or `childUid` are required (provide as many of these product identifiers that are available).
 
 ```html
 <script type="searchspring/track/product/view">
 	item = {
-		id: '123',
+		uid: '123',
 		sku: 'product123',
-		childSku: 'product123_a',
+		childUid: '123_a',
+		childSku: 'product123_a'
 	};
 </script>
 ```
@@ -35,31 +36,34 @@ Alternatively, this can also be integrated using the `searchspring.tracker.track
 
 ```typescript
 searchspring.tracker.track.product.view({
-	id: '123',
+	uid: '123',
 	sku: 'product123',
-	childSku: 'product123_a',
+	childUid: '123_a',
+	childSku: 'product123_a'
 });
 ```
 
 
 ### Cart View 
 Tracks cart contents. Should only be installed on a cart page. If the checkout process does not contain a dedicated cart page (ie. slideout cart) then this method should be invoked when the cart comes into view. 
 
-Each item object must contain a `qty`, `price`, (`id` and/or `sku` and/or `childSku`)
+Each item object must contain a `qty`, `price`, (`uid` and/or `sku` and/or `childSku` and/or `childUid` - provide as many of these product identifiers that are available).
 
 ```html
 <script type="searchspring/track/cart/view">
 	items = [
 		{
-			id: '123',
+			uid: '123',
 			sku: 'product123',
+			childUid: '123_a',
 			childSku: 'product123_a',
 			qty: '1',
 			price: '9.99',
 		},
 		{
-			id: '456',
+			uid: '456',
 			sku: 'product456',
+			childUid: '456_a',
 			childSku: 'product456_a',
 			qty: '2',
 			price: '10.99',
@@ -74,15 +78,17 @@ Alternatively, this can also be integrated using the `searchspring.tracker.track
 searchspring.tracker.track.cart.view({
 	items: [
 		{
-			id: '123',
+			uid: '123',
 			sku: 'product123',
+			childUid: '123_a',
 			childSku: 'product123_a',
 			qty: '1',
 			price: '9.99',
 		},
 		{
-			id: '456',
+			uid: '456',
 			sku: 'product456',
+			childUid: '456_a',
 			childSku: 'product456_a',
 			qty: '2',
 			price: '10.99',
@@ -123,15 +129,17 @@ Tracks order transaction. Should be invoked from an order confirmation page. Exp
 	};
 	items = [
 		{
-			id: '123',
+			uid: '123',
 			sku: 'product123',
+			childUid: '123_a',
 			childSku: 'product123_a',
 			qty: '1',
 			price: '9.99'
 		},
 		{
-			id: '456',
+			uid: '456',
 			sku: 'product456',
+			childUid: '456_a',
 			childSku: 'product456_a',
 			qty: '2',
 			price: '10.99'
@@ -154,15 +162,17 @@ searchspring.tracker.track.order.transaction({
 	},
 	items: [
 		{
-			id: '123',
+			uid: '123',
 			sku: 'product123',
+			childUid: '123_a',
 			childSku: 'product123_a',
 			qty: '1',
 			price: '9.99'
 		},
 		{
-			id: '456',
+			uid: '456',
 			sku: 'product456',
+			childUid: '456_a',
 			childSku: 'product456_a',
 			qty: '2',
 			price: '10.99'
@@ -212,7 +222,7 @@ Adding the following attributes to clickable cart elements allows for real-time
 If you are using multiple custom Tracker instances with a different tracker `config.id`, attributes are namespaced by the trackers `id` (Default: `'track'`, Example: `ss-track-cart-add`)
 
 ### Add to cart
-Adds product `id` or `sku` (or `childSku`) to `ssCartProducts` cookie. Supports multiple skus using a comma delimiter.
+Adds product `uid` or `sku` (or `childSku`/`childUid`) to `ssCartProducts` cookie. It is preferable to use the more specific variant `childSku` or `childUid` if available. Supports multiple products using a comma delimiter.
 
 ```html
 <button ss-track-cart-add='product123'>Add to cart</button>
@@ -226,7 +236,7 @@ searchspring.tracker.cookies.cart.add(['product123'])
 
 
 ### Remove from cart
-Removes product `id` or `sku` (or `childSku`) from `ssCartProducts` cookie. Supports multiple skus using a comma delimiter.
+Removes product `uid` or `sku` (or `childSku`/`childUid`) to `ssCartProducts` cookie. It is preferable to use the more specific variant `childSku` or `childUid` if available. Supports multiple products using a comma delimiter.
 
 ```html
 <button ss-track-cart-remove='product123'>Remove</button>

diff --git a/packages/snap-preact-demo/public/cart.html b/packages/snap-preact-demo/public/cart.html
@@ -244,13 +244,13 @@ <h3>Answer To Your Layers Butterscotch Yellow Top</h3>
     <script type="searchspring/track/cart/view">
         items = [
             {
-                id: "182146",
+                uid: "182146",
                 sku: "C-AD-W1-1869P",
                 qty: 1,
                 price: 48
             },
             {
-                id: "174287",
+                uid: "174287",
                 sku: "C-AD-Y5-814MD",
                 qty: 1,
                 price: 36

diff --git a/packages/snap-preact-demo/public/order.html b/packages/snap-preact-demo/public/order.html
@@ -210,13 +210,13 @@ <h2>Order Confirmation</h2>
     <script type="searchspring/track/order/transaction">
         items = [
             {
-                id: "99688",
+                uid: "99688",
                 sku: "C-BP-G7-B1469",
                 qty: "1",
                 price: "22"
             },
             {
-                id: "181655",
+                uid: "181655",
                 sku: "C-VJ-P2-32007",
                 qty: "1",
                 price: "39"

diff --git a/packages/snap-preact-demo/public/product.html b/packages/snap-preact-demo/public/product.html
@@ -223,7 +223,7 @@ <h2 id="name">Stripe Out Off-The-Shoulder Dress</h2>
 
     <script type="searchspring/track/product/view">
         item = {
-            id: "182146",
+            uid: "182146",
             sku: "C-AD-W1-1869P"
         };
     </script>

diff --git a/packages/snap-preact-demo/tests/cypress/e2e/tracking/track.cy.js b/packages/snap-preact-demo/tests/cypress/e2e/tracking/track.cy.js
@@ -2,11 +2,15 @@ import { BeaconType, BeaconCategory } from '@searchspring/snap-tracker';
 
 describe('Tracking', () => {
 	beforeEach(() => {
+		cy.clearCookies();
+
 		cy.on('window:before:load', (win) => {
 			win.mergeSnapConfig = {
 				mode: 'production',
 			};
 		});
+
+		cy.wait(1000);
 	});
 	it('tracked shopper login', () => {
 		cy.visit('https://localhost:2222');
@@ -89,7 +93,7 @@ describe('Tracking', () => {
 				expect(beacon.category).to.equal(BeaconCategory.PAGEVIEW);
 
 				expect(beacon.event).to.be.an('object').to.include.all.keys(['sku']);
-				expect(beacon.event.id).to.equal('182146');
+				expect(beacon.event.uid).to.equal('182146');
 				expect(beacon.event.sku).to.equal('C-AD-W1-1869P');
 			});
 
@@ -123,16 +127,16 @@ describe('Tracking', () => {
 				expect(beacon.event).to.have.property('items');
 				expect(beacon.event.items).to.be.an('array').to.have.length(2);
 
-				expect(beacon.event.items[0]).to.be.an('object').include.all.keys(['id', 'sku', 'qty', 'price']);
-				expect(beacon.event.items[1]).to.be.an('object').include.all.keys(['id', 'sku', 'qty', 'price']);
+				expect(beacon.event.items[0]).to.be.an('object').include.all.keys(['uid', 'sku', 'qty', 'price']);
+				expect(beacon.event.items[1]).to.be.an('object').include.all.keys(['uid', 'sku', 'qty', 'price']);
 				expect(beacon.event.items[0]).to.deep.equal({
-					id: '182146',
+					uid: '182146',
 					sku: 'C-AD-W1-1869P',
 					qty: '1',
 					price: '48',
 				});
 				expect(beacon.event.items[1]).to.deep.equal({
-					id: '174287',
+					uid: '174287',
 					sku: 'C-AD-Y5-814MD',
 					qty: '1',
 					price: '36',
@@ -172,17 +176,17 @@ describe('Tracking', () => {
 				expect(beacon.event).to.have.property('items');
 				expect(beacon.event.items).to.be.an('array').to.have.length(2);
 
-				expect(beacon.event.items[0]).to.be.an('object').include.all.keys(['id', 'sku', 'qty', 'price']);
-				expect(beacon.event.items[1]).to.be.an('object').include.all.keys(['id', 'sku', 'qty', 'price']);
+				expect(beacon.event.items[0]).to.be.an('object').include.all.keys(['uid', 'sku', 'qty', 'price']);
+				expect(beacon.event.items[1]).to.be.an('object').include.all.keys(['uid', 'sku', 'qty', 'price']);
 
 				expect(beacon.event.items[0]).to.deep.equal({
-					id: '99688',
+					uid: '99688',
 					sku: 'C-BP-G7-B1469',
 					qty: '1',
 					price: '22',
 				});
 				expect(beacon.event.items[1]).to.deep.equal({
-					id: '181655',
+					uid: '181655',
 					sku: 'C-VJ-P2-32007',
 					qty: '1',
 					price: '39',

diff --git a/packages/snap-tracker/README.md b/packages/snap-tracker/README.md
@@ -83,8 +83,9 @@ This method will call the `retarget` method on all `DomTargeters` set in the Tra
 ```html
 <script type="searchspring/track/product/view">
     item = {
-        id: '123',
+        uid: '123',
         sku: 'product123',
+        childUid: '123_a',
         childSku: 'product123_a',
     };
 </script>
@@ -96,15 +97,17 @@ This method will call the `retarget` method on all `DomTargeters` set in the Tra
 <script type="searchspring/track/cart/view">
     items = [
         {
-            id: '123',
+            uid: '123',
             sku: 'product123',
+            childUid: '123_a',
             childSku: 'product123_a',
             qty: '1',
             price: '9.99',
         },
         {
-            id: '456',
+            uid: '456',
             sku: 'product456',
+            childUid: '456_a',
             childSku: 'product456_a',
             qty: '2',
             price: '10.99',
@@ -127,15 +130,17 @@ This method will call the `retarget` method on all `DomTargeters` set in the Tra
     };
     items = [
         {
-            id: '123',
+            uid: '123',
             sku: 'product123',
+            childUid: '123_a',
             childSku: 'product123_a',
             qty: '1',
             price: '9.99'
         },
         {
-            id: '456',
+            uid: '456',
             sku: 'product456',
+            childUid: '456_a',
             childSku: 'product456_a',
             qty: '2',
             price: '10.99'
@@ -155,8 +160,9 @@ Each tracking method expects a data object which contains different attributes d
 
 ```typescript
 tracker.track.product.view({
-    id: '123',
+    uid: '123',
     sku: 'product123',
+    childUid: '123_a',
     childSku: 'product123_a',
 });
 ```
@@ -165,8 +171,9 @@ If a bundle is using multiple Snap Controllers with different `siteId`, an optio
 
 ```typescript
 tracker.track.product.view({
-    id: '123',
+    uid: '123',
     sku: 'product123',
+    childUid: '123_a',
     childSku: 'product123_a',
 }, 'abc123');
 ```
@@ -276,12 +283,13 @@ tracker.track.product.click({
 ```
 
 ### Product View `track.product.view`
-Tracks product page views. Should be invoked from a product detail page. An `id` and/or `sku` and/or `childSku` are required.
+Tracks product page views. Should be invoked from a product detail page. A `uid` and/or `sku` and/or `childUid` and/or `childSku` are required.
 
 ```typescript
 tracker.track.product.view({
-    id: '123',
+    ud: '123',
     sku: 'product123',
+    childUid: '123_a',
     childSku: 'product123_a',
 });
 ```
@@ -297,21 +305,23 @@ tracker.track.shopper.login({
 ```
 
 ### Cart View `track.cart.view`
-Tracks cart contents. Should be invoked from a cart page. Each item object must contain a `qty`, `price`, (`id` and/or `sku` and/or `childSku`)
+Tracks cart contents. Should be invoked from a cart page. Each item object must contain a `qty`, `price`, (`uid` and/or `sku` and/or `childUid` and/or `childSku`)
 
 ```typescript
 tracker.track.cart.view({
     items: [
         {
-            id: '123',
+            uid: '123',
             sku: 'product123',
+            childUid: '123_a',
             childSku: 'product123_a',
             qty: '1',
             price: '9.99',
         },
         {
-            id: '456',
+            uid: '456',
             sku: 'product456',
+            childUid: '456_a',
             childSku: 'product456_a',
             qty: '2',
             price: '10.99',
@@ -351,15 +361,17 @@ tracker.track.order.transaction({
     },
     items: [
         {
-            id: '123',
+            uid: '123',
             sku: 'product123',
+            childUid: '123_a',
             childSku: 'product123_a',
             qty: '1',
             price: '9.99'
         },
         {
-            id: '456',
+            uid: '456',
             sku: 'product456',
+            childUid: '456_a',
             childSku: 'product456_a',
             qty: '2',
             price: '10.99'
@@ -472,7 +484,7 @@ console.log(tracker.getShopperId())
 The `cookies` property provides access to the `cart` and `viewed` tracking cookies.
 
 #### `cookies.cart.get` method
-Returns an array of strings containing the `ids` and/or `skus` of each item last registered as being in the shopping cart. This value is stored in the `ssCartProducts` cookie and is set via the calls to the `tracker.track.cart.view` event.
+Returns an array of strings containing the `uids` and/or `skus` of each item last registered as being in the shopping cart. This value is stored in the `ssCartProducts` cookie and is set via the calls to the `tracker.track.cart.view` event.
 
 ```typescript
 const tracker = new Tracker();
@@ -527,7 +539,7 @@ tracker.cookies.cart.clear();
 ```
 
 #### `cookies.viewed.get` method
-Returns an array of strings containing the `ids` and/or `skus` of items which have been viewed. This value is stored in the `ssViewedProducts` cookie and is set via the calls to the `tracker.track.product.view` event.
+Returns an array of strings containing the `uids` and/or `skus` of items which have been viewed. This value is stored in the `ssViewedProducts` cookie and is set via the calls to the `tracker.track.product.view` event.
 
 ```typescript
 const tracker = new Tracker();