/** * GTM Params */ var currencyCode = 'NZD'; var eventName_checkout = 'eec.checkout'; var eventName_checkoutOption = 'eec.checkout_option'; var eventName_purchase = 'eec.purchase'; var eventName_impression = 'impression'; var eventName_promotion = 'promotion'; var eventName_detail = 'eec.detail'; var eventName_selectProduct = 'eec.impressionClick'; var eventName_removeFromCart = 'eec.remove'; var eventName_addToCart = 'eec.add'; var eventName_enquire = 'enquire'; var checkoutStepLabel_startNotSignIn = 'Start - Not Signed In'; var checkoutStepLabel_startSignedIn = 'Start - Signed In'; var checkoutStepLabel_startGuestCheckout = 'Start - Guest Checkout'; var checkoutStepLabel_placeOrder = 'Place Order'; /** * SDK classes * Product Page */ var pdpApellation = 'product-attribute-apellation-value'; // brand? not currently on PDP page var pdpTitle = 'product-title-heading'; // Product name var pdpSkuTitle = 'product-sku-id'; // Sku var pdpPrice = 'price-actual'; // price var pdpQty = 'quantity-input'; // quantity - not sure how well this pulls from var pdpAddToCart = 'add-to-cart-ga'; // add to cart button // var pdpAddToCartBtnText = 'call-to-action__string'; // var pdpAddText1 = 'Add to Cart'; // var pdpAddText2 = 'Added to Cart'; var pdpBuyBox = 'buybox'; // buybox container var pdpEnquireFormButton = 'enquire-form-send-button'; var pdpVariantContainer = 'drop-down-item-container'; var pdpVariantDropdown = 'rich-select__toggle'; var pdpVariantStatic = 'drop-down-item-static'; // Cart Page var cartLineItems = 'cart-line-item'; var cartCheckoutButtonNotSignedIn = 'cart-checkout-button-sign-in'; var cartCheckoutButtonSignedIn = 'cart-checkout-button-checkout'; var cartCheckoutButtonGuest = 'cart-checkout-button-guest'; var cartLineItem = 'cart-line-item-product-heading'; var cartPriceContainer = 'cart-line-item-price'; // These cart page items identify price etc per cart line (not overall cart price) var cartPrice = 'price-actual'; // These cart page items identify price etc per cart line (not overall cart price) var cartSku = 'cart-line-item-sku'; var cartQty = 'quantity-input'; var cartRemoveItemButton = 'cart-line-item-actions-remove-button'; // Checkout Page var checkoutPlaceOrderButton = 'checkout-place-order__btn-place-order'; // made code change to add this to all place order buttons var checkoutLineItems = 'checkout-line-items__item'; var checkoutLineItem = 'checkout-line-items__item-name'; var checkoutQty = 'checkout-line-items__item-detail-value'; var checkoutPrice = 'checkout-line-items__item-price'; var checkoutStepButton1 = 'checkout-step-1'; var checkoutStepButton2 = 'checkout-step-2'; var checkoutStepButton3 = 'checkout-step-3'; var checkoutDlvOpt = 'deliveryoptions'; var checkoutDlvOptSelected = 'selected'; var checkoutDlvOptText = 'checkout-delivery-options__formgroup'; var checkoutPaymentOption = 'citta-payment-selected-option'; var checkoutApplyGiftCardBtn = 'checkout-gift-card__btn-apply'; // Order Confirmation Page var saleLineItems = 'sales-lines__item'; var saleLineItemName = 'sales-lines__item-name'; var saleLineItemSku = 'sales-lines__item-sku'; var saleLineItemQty = 'sales-lines__item-quantity'; var saleLineItemPrice = 'sales-lines__item-individual-price'; var saleLineItemColour = 'sales-lines__item-1'; var saleLineItemSize = 'sales-lines__item-3'; var saleLinePriceActual = 'price-actual'; var saleLineItemBeforeDiscount = 'msc-price__strikethrough'; var saleLineItemDiscount = 'msc-cart-line-item-product-discount'; var orderSummarySubTotal = 'order-summary__line-price-subtotal'; var orderSummaryShipping = 'order-summary__line-price-shipping'; var orderSummaryTaxAmount = 'order-summary__line-price-tax-amount'; var orderSummaryTotal = 'order-summary__line-price-total-amount'; var orderConfirmationId = 'order-information__confirmation-id'; var orderTransactionId = 'transactionId'; // Product Placement Item (for impression event) var productItems = 'product-placement__item'; var productItemTitle = 'product-placement__item-title'; var productItemPrice = 'product-placement__item-price'; var productItemSku = 'product-placement__item-sku'; var productPageItem = 'page-item active'; // Hero and Feature promo impressions var featureBanners = 'feature'; var featureTitle = 'feature-heading'; var heroBanners = 'citta-hero-banner'; var heroTitle = 'hero-heading'; var videoBanners = 'citta-video-wrapper'; var videoTitle = 'call-to-action__string'; // select product impression var productClickLink = 'product-placement-content'; // same for carousels and category pages var categoryPage = 'category_collection'; var categoryListName = 'Category Page'; var searchPage = 'search'; var searchListName = 'Search Results'; var carouselItem = 'ss-carousel-item'; var carouselListName = 'Product Carousel'; /** * General Helper Functions */ function getInnerText(elementClassName, numberField = false) { return ( document.getElementsByClassName(elementClassName) && document.getElementsByClassName(elementClassName)[0] && (numberField ? document.getElementsByClassName(elementClassName)[0].value : document.getElementsByClassName(elementClassName)[0].innerText) ); } function getElementInnerText(element, elementClassName, numberField = false) { return ( element && element.getElementsByClassName(elementClassName) && element.getElementsByClassName(elementClassName)[0] && (numberField ? element.getElementsByClassName(elementClassName)[0].value : element.getElementsByClassName(elementClassName)[0].innerText) ); } // To get value from query string parameter function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); } // helper function for getting index of child element function whichChild(elem){ var i= 1; while((elem=elem.previousSibling)!=null) ++i; return i; } /** * Purchase Event on order confirmation * Attempt to trigger 5 times, every 1s. */ var purchasedProductCheckCount = 0; var purchasedProductEventSent = false; var checkPurchasedProductImpression = setInterval(checkPurchasedProduct, 1000); function stopPurchaseCheck() { clearInterval(checkPurchasedProductImpression); } function checkPurchasedProduct() { if (purchasedProductEventSent || purchasedProductCheckCount >= 5) { return; } let data = []; let products = document.getElementsByClassName(saleLineItems); if (products) { for (let i = 0; i < products.length; i++) { let product = {}; // name product.name = getElementInnerText(products[i], saleLineItemName); // quantity let quantity = getElementInnerText(products[i], saleLineItemQty); if (quantity) { quantity = quantity.replace('Quantity: ', ''); product.quantity = quantity.replace('Quantity: ', ''); } // price let priceactual = products[i].getElementsByClassName(saleLineItemPrice); if (priceactual && priceactual[0]) { let price = getElementInnerText(priceactual[0], saleLinePriceActual); if (price) { product.price = price.replace('NZ$', ''); } } // sku/id let sku = getElementInnerText(products[i], saleLineItemSku); if (sku) { product.id = sku.replace('Sku: ', ''); } else { product.id = 'TEST001'; } // variant size let variantSize = getElementInnerText(products[i], saleLineItemSize); if (variantSize) { product.variant = variantSize.replace('Size: ', ''); } // colour let variantColour = getElementInnerText(products[i], saleLineItemColour); if (variantColour) { product.dimension1 = variantColour.replace('Color: ', ''); } // product.list_position = i + 1; // let actualprice = getElementInnerText(products[i], saleLineItemBeforeDiscount); // let discount = getElementInnerText(products[i], saleLineItemDiscount); // if (actualprice) { // product.actualprice = actualprice.replace('NZ$', ''); // } // if (discount) { // product.discountcode = discount; // } data.push(product); } } if (data && data.length > 0) { // let subTotal = getInnerText(orderSummarySubTotal); let shipping = getInnerText(orderSummaryShipping); let tax = getInnerText(orderSummaryTaxAmount); let orderTotal = getInnerText(orderSummaryTotal); let transactionId = getUrlParameter(orderTransactionId); // let confirmationId = getInnerText(orderConfirmationId); // if (subTotal) { // subTotal = subTotal.replace('Subtotal', '').replace(/\n/g, '').replace('NZ$', ''); // } if (shipping) { shipping = shipping.replace('Shipping', '').replace(/\n/g, '').replace('NZ$', ''); } if (tax) { tax = tax.replace('Shipping', '').replace('Tax', '').replace(/\n/g, '').replace('NZ$', ''); } if (orderTotal) { orderTotal = orderTotal.replace('Total', '').replace(/\n/g, '').replace('NZ$', ''); } dataLayer.push({ 'event': eventName_purchase, 'ecommerce': { 'currencyCode': currencyCode, 'purchase': { 'actionField': { 'id': transactionId, 'revenue': orderTotal, 'tax': tax, 'shipping': shipping }, 'products': data } } }); purchasedProductEventSent = true; } purchasedProductCheckCount++; if (purchasedProductEventSent || purchasedProductCheckCount >= 5) { stopPurchaseCheck(); } } // /** // * Product Impression Event // * Attempt to trigger 5 times, every 2s. // * Capture data for the Product Placement Item (product tile) // */ // var productImpressionCheckCount = 0; // var productImpressionEventSent = false; // var checkProductImpression = setInterval(checkProductPlacement, 2000); // function stopProductImpressionCheck() { // clearInterval(checkProductImpression); // } // function checkProductPlacement() { // if (productImpressionEventSent || productImpressionCheckCount > 4) { // return; // } // let data = []; // let products = document.getElementsByClassName(productItems); // if (products) { // for (let i = 0; i < products.length; i++) { // let productname = getElementInnerText(products[i], productItemTitle); // let productPrice = getElementInnerText(products[i], productItemPrice); // let productPlacement = { // 'name': productname, // 'listName': 'Product placement', // 'listPosition': i + 1, // 'price': productPrice // } // data.push(productPlacement); // } // } // if (data && data.length > 0) { // let pageitem = getInnerText(productPageItem); // let ecommerce = {}; // ecommerce.currencyCode = currencyCode; // if (pageitem) { // ecommerce.pagenumber = pageitem; // } // ecommerce.products = data; // dataLayer.push({ // 'event': eventName_impression, // 'ecommerce': ecommerce // }); // productImpressionEventSent = true; // } // productImpressionCheckCount++; // if (productImpressionEventSent || productImpressionCheckCount >= 5) { // stopProductImpressionCheck(); // } // } /** * Page View Detail * Triggers on Product Detail Page */ var productDetailEventCheckCount = 0; var productDetailEventSent = false; var checkProductDetailEvent = setInterval(checkProductEventDetail, 2000); function stopProductDetailEvent() { clearInterval(checkProductDetailEvent); } function checkProductEventDetail() { if (productDetailEventSent || productDetailEventCheckCount > 4) { return; } let isPdpBuybox = document.getElementsByClassName(pdpBuyBox); if (isPdpBuybox && isPdpBuybox[0]) { let productdetails = []; productdetails.push(addProductInfo()); if (productdetails && productdetails.length > 0) { dataLayer.push({ 'event': eventName_detail, 'ecommerce': { 'detail': { 'actionField': { 'list': 'PDP page' }, 'products': productdetails } } }); productDetailEventSent = true; } } productDetailEventCheckCount++; if (productDetailEventSent || productDetailEventCheckCount >= 5) { stopProductDetailEvent(); } } // /** // * Promotion Impression Event // * Attempt to trigger 5 times, every 2s. // * Capture data for the Feature and Hero banners // */ // var promoImpressionCheckCount = 0; // var promoImpressionEventSent = false; // var checkPromoImpression = setInterval(checkPromoPlacement, 2000); // function stopPromoImpressionCheck() { // clearInterval(checkPromoImpression); // } // function checkPromoPlacement() { // if (promoImpressionEventSent || promoImpressionCheckCount >= 5) { // return; // } // let promos = []; // // check feature banners // let features = document.getElementsByClassName(featureBanners); // if (features) { // for (let i = 0; i < features.length; i++) { // let featurename = getElementInnerText(features[i], featureTitle); // let featureslot = 'feature_banner_' + i; // let featureItem = { // 'name': featurename, // 'creativeSlot': featureslot // } // promos.push(featureItem); // } // } // // check hero banners // let heroes = document.getElementsByClassName(heroBanners); // if (heroes) { // for (let i = 0; i < heroes.length; i++) { // let heroname = getElementInnerText(heroes[i], heroTitle); // let heroslot = 'hero_banner_' + i; // let heroItem = { // 'name': heroname, // 'creativeSlot': heroslot // } // promos.push(heroItem); // } // } // // check video banners // let videos = document.getElementsByClassName(videoBanners); // if (videos) { // for (let i = 0; i < videos.length; i++) { // let videoname = getElementInnerText(videos[i], videoTitle); // let videoslot = 'video_banner_' + i; // let videoItem = { // 'name': videoname, // 'creativeSlot': videoslot // } // promos.push(videoItem); // } // } // if (promos && promos.length > 0) { // dataLayer.push({ // 'event': eventName_promotion, // 'promotions': promos // }); // promoImpressionEventSent = true; // } // promoImpressionCheckCount++; // if (promoImpressionEventSent || promoImpressionCheckCount >= 5) { // stopPromoImpressionCheck(); // } // } /** * Helper functions for click event */ function currentNodeHasClass(targetNode, className) { return ( targetNode && targetNode.className && targetNode.className.includes(className) ); } function isAddToCartButton(targetNode) { return ( targetNode && (currentNodeHasClass(targetNode, pdpAddToCart) || currentNodeHasClass(targetNode.parentNode, pdpAddToCart)) ); } function isRemoveItemButton(targetNode) { return targetNode && currentNodeHasClass(targetNode, cartRemoveItemButton); } function isCheckoutButton(targetNode) { return ( targetNode && (currentNodeHasClass(targetNode, cartCheckoutButtonNotSignedIn) || currentNodeHasClass(targetNode, cartCheckoutButtonSignedIn) || currentNodeHasClass(targetNode, cartCheckoutButtonGuest)) ); } function isPlaceOrderButton(targetNode) { return ( currentNodeHasClass(targetNode, checkoutPlaceOrderButton) && !currentNodeHasClass(targetNode, 'disabled') ); } function isProductClickLink(targetNode) { return targetNode && currentNodeHasClass(targetNode, productClickLink); } function isCheckoutStepButton(targetNode) { let value = -1; if (targetNode) { value = checkoutStepHelper(targetNode); if (value < 1 && targetNode.parentNode) { value = checkoutStepHelper(targetNode.parentNode); if (value < 1 && targetNode.parentNode.parentNode) { value = checkoutStepHelper(targetNode.parentNode.parentNode); } } } return value; } function checkoutStepHelper(targetNode) { if (targetNode) { if (currentNodeHasClass(targetNode, checkoutStepButton1)) { return 1; } if (currentNodeHasClass(targetNode, checkoutStepButton2)) { return 2; } if (currentNodeHasClass(targetNode, checkoutStepButton3)) { return 3; } } return -1; } function isEnquireFormButton(targetNode) { return ( targetNode && (currentNodeHasClass(targetNode, pdpEnquireFormButton) || currentNodeHasClass(targetNode.parentNode, pdpEnquireFormButton)) ); } function isApplyGiftCardButton(targetNode) { return ( targetNode && (currentNodeHasClass(targetNode, checkoutApplyGiftCardBtn) || currentNodeHasClass(targetNode.parentNode, checkoutApplyGiftCardBtn)) ); } /** * Helper function to add Product info on addtobag event and pdp load page */ function addProductInfo() { let productdetail = {}; productdetail.name = getInnerText(pdpTitle); productdetail.id = getInnerText(pdpSkuTitle); let pdpqtyelement = document.getElementsByClassName(pdpQty); if (pdpqtyelement && pdpqtyelement[0]) { productdetail.quantity = pdpqtyelement[0].value; } // check for price let price = getInnerText(pdpPrice); if (price) { productdetail.price = price.replace('NZ$', ''); } // get variant details let variantContainer = document.getElementsByClassName(pdpVariantContainer); if (variantContainer && variantContainer[0]) { // colour let colour = getElementInnerText(variantContainer[0], pdpVariantStatic); if (!colour) { colour = getElementInnerText(variantContainer[0], pdpVariantDropdown); } if (colour) { productdetail.dimension1 = colour; } if (variantContainer[1]) { // size let size = getElementInnerText(variantContainer[1], pdpVariantStatic); if (!size) { size = getElementInnerText(variantContainer[1], pdpVariantDropdown); } if (size) { productdetail.variant = size; } } } return productdetail; } /** * Helper function to add cartline items on remove event and checkout event */ function addCartInfo(lineItemProduct) { let cartqtyelement = lineItemProduct.getElementsByClassName(cartQty); let cartprodqty = ''; let name = getElementInnerText(lineItemProduct, cartLineItem); let sku = getElementInnerText(lineItemProduct, cartSku); let priceContainer = lineItemProduct.getElementsByClassName(cartPriceContainer); let price = ''; if (cartqtyelement && cartqtyelement[0]) { if (cartqtyelement[0].tagName === 'SELECT') { cartprodqty = cartqtyelement[0].options[cartqtyelement[0].selectedIndex].text; } if (cartqtyelement[0].tagName === 'INPUT') { cartprodqty = getElementInnerText(lineItemProduct, cartQty, true); } } if (priceContainer && priceContainer[0]) { price = getElementInnerText(priceContainer[0], cartPrice); if (price) { price = price.replace('NZ$', ''); } } let cart = { 'name': name, 'id': sku, 'quantity': cartprodqty, 'price': price }; return cart; } /** * Click Events * 1. Add to Cart event (triggers on button click on Product page) * 2. Item Removal event (triggers when clicking on remove item on Cart page) * 3. Checkout event - Step = Start (triggers on Cart page) * 3.1 Checkout event - Step = Progress (triggers on Checkout page) * 4. Checkout event - Step = Place Order (triggers on Checkout page) * 5. Impression click event (triggers when clicking a product on a carousel or category page) * 6. Promotion click events (triggers when clicking on a link through a feature, hero or video banner) * 7. PDP enquire form send */ document.addEventListener('click', function (e) { // 1. Add to Cart event (triggers on button click on Product page) if (e && e.target && (isAddToCartButton(e.target) || isAddToCartButton(e.target.parentNode))) { let productdetails = []; productdetails.push(addProductInfo()); // Add to cart event dataLayer.push({ 'event': eventName_addToCart, 'ecommerce': { 'add': { 'actionField': { 'list': 'PDP page' }, 'products': productdetails } } }); } // 2. Item Removal event (triggers when clicking on remove item on Cart page) if (e && e.target && (isRemoveItemButton(e.target) || isRemoveItemButton(e.target.parentNode))) { let lineItemProduct = e.target.parentNode && e.target.parentNode.parentNode && e.target.parentNode.parentNode.parentNode; let data = []; data.push(addCartInfo(lineItemProduct)); dataLayer.push({ 'event': eventName_removeFromCart, 'ecommerce': { 'remove': { 'actionField': { 'list': 'Cart Page' }, 'products': data } } }); } // 3. Checkout event - Step = Start (triggers on Cart page) if (e && e.target && (isCheckoutButton(e.target) || isCheckoutButton(e.target.parentNode))) { let products = document.getElementsByClassName(cartLineItems); let data = []; if (products && products.length > 0) { for (let i = 0; i < products.length; i++) { data.push(addCartInfo(products[i])); } } let checkoutStep = ''; if ( currentNodeHasClass(e.target.parentNode, cartCheckoutButtonNotSignedIn) ) { checkoutStep = checkoutStepLabel_startNotSignIn; } else if ( currentNodeHasClass(e.target.parentNode, cartCheckoutButtonSignedIn) ) { checkoutStep = checkoutStepLabel_startSignedIn; } else if ( currentNodeHasClass(e.target.parentNode, cartCheckoutButtonGuest) ) { checkoutStep = checkoutStepLabel_startGuestCheckout; } if (checkoutStep !== '') { dataLayer.push({ 'event': eventName_checkout, 'ecommerce': { 'checkout': { 'actionField': { 'step': 1, 'option': checkoutStep }, 'products': data, } } }); } } // 3.1 Checkout event - Step = Progress (triggers on Checkout page) if (e && e.target) { let step = -1; let chktStpBtn = isCheckoutStepButton(e.target); if (chktStpBtn < 0) { chktStpBtn = isCheckoutStepButton(e.target.parentNode); } if (chktStpBtn && chktStpBtn > 0) { step = chktStpBtn; } if (step > 0) { let optionDetails = null; if (step == 2) { // get delivery or click & collect let shippingOptions = document.getElementsByClassName(checkoutDlvOpt); if (shippingOptions && shippingOptions[0]) { let selected = shippingOptions[0].getElementsByClassName(checkoutDlvOptSelected); if (selected && selected[0]) { let optionText = getElementInnerText(selected[0], checkoutDlvOptText); if (optionText) { optionDetails = `Shipping option - ${optionText}`; } } } } // push option details if has any if (optionDetails) { dataLayer.push({ 'event': eventName_checkoutOption, 'ecommerce': { 'checkout_option': { 'actionField': { 'step': step, 'option': optionDetails } } } }); } dataLayer.push({ 'event': eventName_checkout, 'ecommerce': { 'checkout': { 'actionField': { 'step': (step + 1) } } } }); } } // 3.2 Checkout apply gift card event if (e && e.target && (isApplyGiftCardButton(e.target) || isApplyGiftCardButton(e.target.parentNode))) { dataLayer.push({ 'event': eventName_checkoutOption, 'ecommerce': { 'checkout_option': { 'actionField': { 'step': 3, 'option': 'Apply gift card' } } } }); } // 4. Checkout event - Step = Place Order (triggers on Checkout page) if (e && e.target && (isPlaceOrderButton(e.target.parentNode) || isPlaceOrderButton(e.target) || (e.target.parentNode.parentNode && isPlaceOrderButton(e.target.parentNode.parentNode))) ) { let paymentOption = getInnerText(checkoutPaymentOption); if (paymentOption) { dataLayer.push({ 'event': eventName_checkoutOption, 'ecommerce': { 'checkout_option': { 'actionField': { 'step': 4, 'option': `Payment option - ${paymentOption}` } } } }); } dataLayer.push({ 'event': eventName_checkout, 'ecommerce': { 'checkout': { 'actionField': { 'step': 5, 'option': 'Place Order clicked' } } } }); } // 5. Impression click event (triggers when clicking a product on a carousel or category page) if (e && e.target && (isProductClickLink(e.target) || isProductClickLink(e.target.parentNode) || (e.target.parentNode.parentNode && isProductClickLink(e.target.parentNode.parentNode)) || (e.target.parentNode.parentNode.parentNode && isProductClickLink(e.target.parentNode.parentNode.parentNode))) ) { let containerNode = e.target; while (!isProductClickLink(containerNode) && containerNode.parentNode) { containerNode = containerNode.parentNode } // get list name let listName = 'not_found'; if (document.body.classList.contains(categoryPage)) { listName = categoryListName; } else if (document.body.classList.contains(searchPage)) { listName = searchListName; } else if (currentNodeHasClass(containerNode.parentNode, carouselItem)) { listName = carouselListName; } // get product details let productname = getElementInnerText(containerNode, productItemTitle); let productSku = getElementInnerText(containerNode, productItemSku); // let productprice = getElementInnerText(containerNode, productItemPrice); let productPosition = whichChild(containerNode.parentNode); let product = []; product.push({ 'id': productSku, 'name': productname, // 'price': productprice, 'position': productPosition }); dataLayer.push({ 'event': eventName_selectProduct, 'ecommerce': { 'click': { 'actionField': { 'list': listName }, 'products': product } } }); } // 6. Promotion click event // dataLayer.push({ // event: 'eec.promotionClick', // ecommerce: { // promoClick: { // promotions: [{ // id: 'fall_campaign', // name: 'Fall Campaign 2019', // creative: 'Front Page Carousel', // position: 'Slide 2' // }] // } // } // }); // 7. PDP Enquire form send if (e && e.target && (isEnquireFormButton(e.target) || isEnquireFormButton(e.target.parentNode))) { let productdetails = []; productdetails.push(addProductInfo()); let sku = productdetails[0].id; // Enquire Event event dataLayer.push({ 'event': eventName_enquire, 'ecommerce': { 'enquire': { 'actionField': { 'sku': sku }, 'products': productdetails } } }); } });