wickes-css2 2.112.0-develop.10 → 2.112.0-develop.11

package/src/js/emulation/tracking-emulation.js

@@ -0,0 +1,38 @@
+const TRACKING_WIDGET_SELECTOR = '[data-complete-widget], [data-why-not-add-widget]';
+const TRACKED_EVENT_NAMES = [
+    'brRecommendationWidgetView',
+    'brRecommendationWidgetClick',
+    'brRecommendationWidgetAddToCart',
+];
+
+function initializeTrackingEmulation() {
+    if (
+        !document.querySelector(TRACKING_WIDGET_SELECTOR) ||
+        window.__trackingEmulationInitialized
+    ) {
+        return;
+    }
+
+    window.__trackingEmulationInitialized = true;
+    window.dataLayer = window.dataLayer || [];
+
+    const originalPush = window.dataLayer.push;
+
+    window.dataLayer.push = function () {
+        const entries = Array.prototype.slice.call(arguments);
+        const result = originalPush.apply(window.dataLayer, entries);
+
+        entries.forEach(function (entry) {
+            if (!entry || TRACKED_EVENT_NAMES.indexOf(entry.event) === -1) {
+                return;
+            }
+
+            console.log('[TRACKING EMULATION]', entry.event, entry);
+            console.log('[DATA LAYER]', window.dataLayer.slice());
+        });
+
+        return result;
+    };
+}
+
+$(document).ready(initializeTrackingEmulation);

package/src/js/page/bloomreach-widget/bloomreach-widget-tracking.js

@@ -0,0 +1,87 @@
+import { pushDataLayerEvent } from '../utils/data-layer';
+
+const EVENT_NAMES = {
+    view: 'brRecommendationWidgetView',
+    click: 'brRecommendationWidgetClick',
+    addToCart: 'brRecommendationWidgetAddToCart',
+};
+
+function disconnectViewObserver(state) {
+    if (!state.viewObserver) {
+        return;
+    }
+
+    state.viewObserver.disconnect();
+    state.viewObserver = null;
+}
+
+function observeView(state, elements) {
+    if (!window.IntersectionObserver) {
+        return;
+    }
+
+    elements = Array.isArray(elements) ? elements : [elements];
+
+    state.viewObserver = new IntersectionObserver(function (entries) {
+        if (
+            entries.some(function (entry) {
+                return entry.isIntersecting;
+            })
+        ) {
+            pushDataLayerEvent(EVENT_NAMES.view, state.widgetData);
+            disconnectViewObserver(state);
+        }
+    });
+
+    elements.forEach(function (element) {
+        if (element) {
+            state.viewObserver.observe(element);
+        }
+    });
+}
+
+function trackClick(state, itemId) {
+    pushDataLayerEvent(EVENT_NAMES.click, {
+        ...state.widgetData,
+        item_id: itemId,
+    });
+}
+
+function trackAddToCart(state, items) {
+    pushDataLayerEvent(EVENT_NAMES.addToCart, {
+        ...state.widgetData,
+        items,
+    });
+}
+
+export function createBloomreachWidgetTracking() {
+    const state = {
+        initWidgetPayload: null,
+        viewObserver: null,
+    };
+
+    return {
+        setPayload(payloadData) {
+            disconnectViewObserver(state);
+            const metadata = payloadData.widgetMetadata;
+
+            state.widgetData = {
+                wrid: metadata.responseId,
+                wid: metadata.id,
+                wty: metadata.type,
+            };
+        },
+
+        observeView(element) {
+            observeView(state, element);
+        },
+
+        trackClick(itemId) {
+            trackClick(state, itemId);
+        },
+
+        trackAddToCart(items) {
+            trackAddToCart(state, items);
+        },
+    };
+}

package/src/js/page/bloomreach-widget/complete-your-project-widget.js

@@ -4,6 +4,7 @@ import { createCountStepper } from '../utils/create-count-stepper';
 import { createDropdown } from '../utils/custom-dropdown';
 import { createLoadingButton } from '../utils/create-loading-button';
 import { createToast } from '../utils/create-toast';
+import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
 
 const Handlebars = require('hbsfy/runtime');
 
@@ -34,6 +35,7 @@ const CompleteYourProjectWidget = {
     lastCalculationResponse: null,
     dropdownCurrent: {},
     toast: null,
+    tracking: createBloomreachWidgetTracking(),
 
     el: {
         cardCheckbox: '.complete-card__select input[type="checkbox"]',
@@ -427,6 +429,55 @@ const CompleteYourProjectWidget = {
         });
     },
 
+    getSelectedTrackingItems($root) {
+        const { completeCard, cardCheckbox, recommendationIndexAttr } =
+            CompleteYourProjectWidget.el;
+        const items = [];
+
+        $root.find(completeCard).each(function () {
+            const $card = $(this);
+            const recommendationIndex = Number($card.attr(recommendationIndexAttr));
+
+            if (recommendationIndex === 0 || !$card.find(cardCheckbox).prop('checked')) {
+                return;
+            }
+
+            const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
+            const baseProduct = recommendation && recommendation.baseProduct;
+            const selectedProduct = CompleteYourProjectWidget.getCardProduct($card);
+
+            if (!baseProduct || !baseProduct.code || !selectedProduct || !selectedProduct.code) {
+                return;
+            }
+
+            items.push({
+                item_id: baseProduct.code,
+                sku: selectedProduct.code,
+            });
+        });
+
+        return items;
+    },
+
+    bindProductTracking($root) {
+        const { completeCard, recommendationIndexAttr, titleEl } = CompleteYourProjectWidget.el;
+
+        $root.off('click.bloomreachWidgetTracking', titleEl);
+        $root.on('click.bloomreachWidgetTracking', titleEl, function () {
+            const $card = $(this).closest(completeCard);
+            const recommendationIndex = Number($card.attr(recommendationIndexAttr));
+
+            if (recommendationIndex === 0) {
+                return;
+            }
+
+            const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
+            const baseProduct = recommendation && recommendation.baseProduct;
+
+            CompleteYourProjectWidget.tracking.trackClick(baseProduct && baseProduct.code);
+        });
+    },
+
     updateSummary($root, response = {}) {
         const totalPriceExclusiveVat = response.totalPriceExclusiveVat || response.totalExcVatPrice;
 
@@ -818,6 +869,12 @@ const CompleteYourProjectWidget = {
                 return;
             }
 
+            const trackingItems = CompleteYourProjectWidget.getSelectedTrackingItems($root);
+
+            if (trackingItems.length) {
+                CompleteYourProjectWidget.tracking.trackAddToCart(trackingItems);
+            }
+
             CompleteYourProjectWidget.dispatchAddToCart($root, $button);
         });
     },
@@ -991,6 +1048,7 @@ const CompleteYourProjectWidget = {
         CompleteYourProjectWidget.bindDropdowns();
         CompleteYourProjectWidget.bindDropdownValidation($completeWidget);
         CompleteYourProjectWidget.bindAddToCart($completeWidget);
+        CompleteYourProjectWidget.bindProductTracking($completeWidget);
         CompleteYourProjectWidget.bindVatToggle();
         CompleteYourProjectWidget.initQuantityFields($completeWidget);
 
@@ -1007,12 +1065,19 @@ const CompleteYourProjectWidget = {
     init(payloadData) {
         const $containers = $(CompleteYourProjectWidget.el.widgetContainer);
 
+        CompleteYourProjectWidget.tracking.setPayload(payloadData);
+
         if (!payloadData || !Wick.BloomreachWidget.hasRecommendations(payloadData)) {
             $containers.find(CompleteYourProjectWidget.el.completeWidget).hide();
             return;
         }
 
         CompleteYourProjectWidget.renderWidgetFromPayload(payloadData);
+
+        CompleteYourProjectWidget.tracking.observeView([
+            $containers.find(CompleteYourProjectWidget.el.titleEl).get(0),
+            $containers.find(CompleteYourProjectWidget.el.ctaButton).get(0),
+        ]);
     },
 };
 

package/src/js/page/bloomreach-widget/why-not-add-widget.js

@@ -1,6 +1,7 @@
 var Wick = window.Wick || {};
 
 import { createLoadingButton } from '../utils/create-loading-button';
+import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
 
 const Handlebars = require('hbsfy/runtime');
 
@@ -32,11 +33,15 @@ const WhyNotAddWidget = {
     products: [],
     sliders: [],
     loadingButton: null,
+    tracking: createBloomreachWidgetTracking(),
 
     el: {
         cta: '.why-not-add-card__cta',
         next: '[data-why-not-add-next]',
         pagination: '[data-why-not-add-pagination]',
+        productCard: '.why-not-add-card',
+        productCodeAttr: 'data-product-code',
+        productLink: '.why-not-add-card__title',
         prev: '[data-why-not-add-prev]',
         root: '[data-why-not-add]',
         slider: '[data-why-not-add-slider]',
@@ -119,14 +124,26 @@ const WhyNotAddWidget = {
             WhyNotAddWidget.sliders.push(slider);
         });
     },
+
+    bindProductTracking($root) {
+        $root.off('click.bloomreachWidgetTracking', WhyNotAddWidget.el.productLink);
+        $root.on('click.bloomreachWidgetTracking', WhyNotAddWidget.el.productLink, function () {
+            const productCode = $(this)
+                .closest(WhyNotAddWidget.el.productCard)
+                .attr(WhyNotAddWidget.el.productCodeAttr);
+
+            WhyNotAddWidget.tracking.trackClick(productCode);
+        });
+    },
+
     bindAddToCart($root) {
         $root.off('click.whyNotAdd', WhyNotAddWidget.el.cta);
         $root.on('click.whyNotAdd', WhyNotAddWidget.el.cta, function (event) {
             event.preventDefault();
 
             const $button = $(this);
-            const $card = $button.closest('.why-not-add-card');
-            const productCode = $card.attr('data-product-code');
+            const $card = $button.closest(WhyNotAddWidget.el.productCard);
+            const productCode = $card.attr(WhyNotAddWidget.el.productCodeAttr);
 
             if (!productCode || WhyNotAddWidget.loadingButton.isLoading($button)) {
                 return;
@@ -136,6 +153,13 @@ const WhyNotAddWidget = {
                 productCode,
             };
 
+            WhyNotAddWidget.tracking.trackAddToCart([
+                {
+                    item_id: productCode,
+                    sku: productCode,
+                },
+            ]);
+
             WhyNotAddWidget.loadingButton.start($button);
 
             Wick.BloomreachWidget.dispatchWidgetEvent(WhyNotAddWidget.ADD_TO_CART_EVENT, payload)
@@ -174,6 +198,7 @@ const WhyNotAddWidget = {
         Wick.BloomreachWidget.drawRating($root);
         WhyNotAddWidget.initSliders($root);
         WhyNotAddWidget.bindAddToCart($root);
+        WhyNotAddWidget.bindProductTracking($root);
         WhyNotAddWidget.bindVatToggle();
         Wick.BloomreachWidget.reapplyVatDisplay();
     },
@@ -181,6 +206,8 @@ const WhyNotAddWidget = {
     init(payloadData) {
         const $containers = $(WhyNotAddWidget.el.widgetContainer);
 
+        WhyNotAddWidget.tracking.setPayload(payloadData);
+
         if (!payloadData) {
             $containers.empty().hide();
             return;
@@ -192,6 +219,11 @@ const WhyNotAddWidget = {
             WhyNotAddWidget.renderWidget($container, payloadData);
             WhyNotAddWidget.initRenderedWidget($container);
         });
+
+        WhyNotAddWidget.tracking.observeView([
+            $containers.find(WhyNotAddWidget.el.productLink).get(0),
+            $containers.find(WhyNotAddWidget.el.cta).get(0),
+        ]);
     },
 };
 

package/src/js/page/utils/data-layer.js

@@ -0,0 +1,9 @@
+export function pushDataLayerEvent(eventName, data) {
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+        event: eventName,
+        data,
+    });
+
+    return true;
+}