Merge pull request #55 from searchhub/feature/nested-redirect-tracking

Feature/nested redirect tracking
searchhub · Sep 28, 2023 · 50797ae · 50797ae
2 parents 705c06f + 6315ce1
commit 50797ae
Show file tree

Hide file tree

Showing 18 changed files with 2,081 additions and 263 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ has loaded.
 
 # Getting started
 
-Checkout the <a href="https://www.searchhub.io/search-collector/demo/" target="_blank">Demo</a>
+Checkout the <a href="https://searchhub.github.io/search-collector/demo/" target="_blank">Demo</a>
 and <a href="https://github.com/searchhub/search-collector-blueprint" target="_blank">Blueprint</a>
 or `npm i -S search-collector`
 

diff --git a/demo/index.html b/demo/index.html
@@ -73,6 +73,10 @@ <h2 class="">Usage</h2>
     <div class="p-3">
         <ol>
             <li>Search for any search phrase</li>
+            <li>
+                (Optional) search for a "redirect" to be redirected to a special campaign landing page to test redirect
+                tracking
+            </li>
             <li>Click a product</li>
             <li>Put it into the basket</li>
             <li>Repeat as many times you wish</li>

diff --git a/demo/js/collector-integration.js b/demo/js/collector-integration.js
@@ -24,7 +24,8 @@ const {
 	CheckoutClickCollector,
 	ConsoleTransport,
 	SuggestSearchCollector,
-	AssociatedProductCollector
+	AssociatedProductCollector,
+	ListenerType,
 } = window.SearchCollector;
 
 
@@ -88,13 +89,44 @@ collectorModule.add(new SuggestSearchCollector((writer, type, context) => {
 	});
 }));
 
-collectorModule.add(new RedirectCollector(firedSearchCallback, isSearchPage, context));
+const redirectProductClickCollector = new ProductClickCollector('[data-track-id="product"]', {
+	idResolver: element => element.getAttribute('data-product-id'),
+	positionResolver: element => positionResolver('[data-track-id="product"]', element),
+	priceResolver: element => extractPrice(element.querySelector('[data-track-id="priceContainer"]')?.textContent),
+	metadataResolver: element => void 0, // metadata can be anything
+	trail
+});
+
+const redirectImpressionCollector = new ImpressionCollector('[data-track-id="product"]',
+	element => element.getAttribute('data-product-id'),
+	element => positionResolver('[data-track-id="product"]', element));
+
+redirectProductClickCollector.setContext(context);
+redirectImpressionCollector.setContext(context);
+
+collectorModule.add(new RedirectCollector(firedSearchCallback, isSearchPage, {
+	resultCountResolver: searchResultCountResolver,
+	collectors: [redirectProductClickCollector, redirectImpressionCollector],
+	nestedRedirects: {
+		depth: 2,
+		subSelectors: ['[data-track-id="redirectSubSelector"]']
+	}
+}, ListenerType.Sentinel, context));
+
+// basket PDP
 collectorModule.add(
 	new BasketClickCollector('[data-track-id="addToCartPDP"]',
 		element => element.getAttribute('data-product-id'),
 		element => extractPrice(document.querySelector('[data-track-id="priceContainer"]').textContent))
 );
 
+// basket PLP
+collectorModule.add(
+	new BasketClickCollector('[data-track-id="addToCartPLP"]',
+		element => element.getAttribute('data-product-id'),
+		element => extractPrice(document.querySelector('[data-track-id="priceContainer"]').textContent))
+);
+
 collectorModule.add(
 	new CheckoutClickCollector('[data-track-id="checkoutButton"]', '[data-track-id="checkoutProduct"]',
 		element => element.getAttribute("data-product-id"),

diff --git a/demo/js/index.window.bundle.js b/demo/js/index.window.bundle.js
diff --git a/demo/js/util.js b/demo/js/util.js
@@ -43,8 +43,12 @@ document.addEventListener("DOMContentLoaded", () => {
 		event.preventDefault();
 
 		const query = document.querySelector("input").value;
-		if (query)
+		if (query === "redirect" || query === '"redirect"') {
+			redirect(`/redirect-landing-page.html?query=${query}`);
+
+		} else if (query) {
 			redirect(`/product-listing.html?query=${query}`);
+		}
 	});
 	document.querySelector('[data-track-id="searchButton"]').addEventListener("click", event => {
 		const query = document.querySelector("input").value;
@@ -67,7 +71,7 @@ document.addEventListener("DOMContentLoaded", () => {
 	Array.from(document.querySelectorAll("main.products a")).forEach(anchor => {
 		anchor.addEventListener("click", (e) => {
 			e.preventDefault();
-			redirect(`/product-detail.html?id=${e.currentTarget.getAttribute("data-product-id")}`)
+			redirect(`/product-detail.html?id=${e.currentTarget.parentElement.getAttribute("data-product-id")}`)
 		});
 	});
 
@@ -85,10 +89,14 @@ document.addEventListener("DOMContentLoaded", () => {
 	/**
 	 * AddToBasket Click
 	 */
-	Array.from(document.querySelectorAll("main.pdp button")).forEach(anchor => {
+	Array.from(document.querySelectorAll("main.pdp button, main.products button")).forEach(anchor => {
 		anchor.addEventListener("click", (e) => {
 			e.preventDefault();
-			basket.add(e.currentTarget.getAttribute("data-product-id"));
+			if (e.currentTarget.hasAttribute("data-product-id")) {
+				basket.add(e.currentTarget.getAttribute("data-product-id"));
+			} else {
+				basket.add(e.currentTarget.parentElement.getAttribute("data-product-id"));
+			}
 			redirect(`/basket.html`)
 		});
 	});

diff --git a/demo/product-listing.html b/demo/product-listing.html
@@ -64,77 +64,95 @@ <h4 style="text-align: left">Search Terms</h4>
 		document.querySelector("#searchPhrase").textContent = new URLSearchParams(window.location.search).get("query");
     </script>
     <section class="row">
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1234">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1234">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/pink_dress.png" alt="product image">
                 <h5 class="m-2">Pink Dress</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1234" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1235">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1235">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/pink_high_heel.png" alt="product image">
                 <h5 class="m-2">Pink High Heel</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1235" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1236">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1236">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/purple_boot.png" alt="product image">
                 <h5 class="m-2">Purple Boot</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1236" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1237">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1237">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/green_leather_shoe.png" alt="product image">
                 <h5 class="m-2">Green Leather Shoe</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1237" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1238">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1238">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/grey_polo.png" alt="product image">
                 <h5 class="m-2">Grey Polo</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1238" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1239">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1239">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/yellow_sneaker.png" alt="product image">
                 <h5 class="m-2">Yellow Sneaker</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1239" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1240">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1240">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/grey_tshirt.png" alt="product image">
                 <h5 class="m-2">Grey Shirt</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1240" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1241">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1241">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/blue_trousers.png" alt="product image">
                 <h5 class="m-2">Blue Trousers</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1241" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
-        <div class="col-12 col-md-6 col-xl-4 p-5">
-            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center"
-               data-track-id="product" data-product-id="1242">
+        <div class="col-12 col-md-6 col-xl-4 p-5" data-track-id="product" data-product-id="1242">
+            <a href="/product-detail-page.html" class="d-flex flex-column align-items-center justify-content-center">
                 <img src="images/green_coat.png" alt="product image">
                 <h5 class="m-2">Green Coat</h5>
                 <div data-track-id="priceContainer" class="price">19.99 €</div>
             </a>
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <button data-track-id="addToCartPLP" data-product-id="1242" type="button" class="m-2 btn btn-primary">Add2Basket</button>
+            </div>
         </div>
     </section>
 </main>