From 3df82c14d8a29d288bf9b692b8a92120c69664c2 Mon Sep 17 00:00:00 2001
From: eliseacornejo <ecornejo@adobe.com>
Date: Thu, 13 Feb 2025 15:41:47 +0100
Subject: [PATCH] track product view mutation (#317)

---
 blocks/product-details/product-details.js |  5 +++++
 scripts/api/productTracking.js            | 23 +++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 scripts/api/productTracking.js

diff --git a/blocks/product-details/product-details.js b/blocks/product-details/product-details.js
index 4125f0e999..6bc629e94e 100644
--- a/blocks/product-details/product-details.js
+++ b/blocks/product-details/product-details.js
@@ -19,6 +19,7 @@ import ProductQuantity from '@dropins/storefront-pdp/containers/ProductQuantity.
 import ProductDescription from '@dropins/storefront-pdp/containers/ProductDescription.js';
 import ProductAttributes from '@dropins/storefront-pdp/containers/ProductAttributes.js';
 import ProductGallery from '@dropins/storefront-pdp/containers/ProductGallery.js';
+import trackViewedProduct from '../../scripts/api/productTracking.js';
 
 // Libs
 import { setJsonLd } from '../../scripts/commerce.js';
@@ -220,6 +221,10 @@ export default async function decorate(block) {
     pdpRendered.render(ProductAttributes, {})($attributes),
   ]);
 
+  if (product) {
+    trackViewedProduct(product.sku);
+  }
+
   // Lifecycle Events
   events.on('pdp/valid', (valid) => {
     // update add to cart button disabled state based on product selection validity
diff --git a/scripts/api/productTracking.js b/scripts/api/productTracking.js
new file mode 100644
index 0000000000..dc04022ebc
--- /dev/null
+++ b/scripts/api/productTracking.js
@@ -0,0 +1,23 @@
+import { getSignInToken, performMonolithGraphQLQuery } from '../commerce.js';
+
+const trackViewedProductMutation = `
+mutation trackViewedProduct($sku: String!) {
+  trackViewedProduct(sku: $sku)
+}
+`;
+
+/**
+ * Track a product was viewed
+ * @param sku SKU of the product viewed
+ * @returns {Promise<void>}
+ */
+export default async function trackViewedProduct(sku) {
+  const token = getSignInToken();
+
+  return performMonolithGraphQLQuery(
+    trackViewedProductMutation,
+    { sku },
+    false,
+    token,
+  );
+}