function deleteCookie(name) { if (getCookie(name)) { document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; } else { console.log('Cookie not found:', name); } } function getCookie(name) { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); if (cookie.startsWith(name + '=')) { return cookie.substring(name.length + 1); } } return null; } document.addEventListener("DOMContentLoaded", function () { const isUserAuthenticated = window.___initialData___.requestContext.user?.isAuthenticated; let eventName = 'begin_checkout_guest'; if (isUserAuthenticated) { eventName = 'begin_checkout'; } window.dataLayer.push({ event: eventName }); }); function check_and_add_payment_info() { const iframeElems = document.getElementsByClassName('checkout-payment-instrument__iframe'); console.log('Iframe Elements', iframeElems); if (iframeElems && iframeElems.length) { const isUserAuthenticated = window.___initialData___.requestContext.user?.isAuthenticated; let eventName = 'add_payment_info'; if (!isUserAuthenticated) { eventName = 'add_payment_info_guest'; } iframeElems[0].addEventListener('load', () => { for (let k = 0; k < window.dataLayer.length; k++) { if (window.dataLayer[k]['event'] == 'add_payment_info' || window.dataLayer[k]['event'] == 'add_payment_info_guest') { return; } } window.dataLayer.push({ event: eventName }); }); } } function add_google_pay_event() { const iframes = document.getElementsByClassName('ms-checkout-payment-instrument-googlepay'); if (iframes && iframes.length) { const googlePayIfr = iframes[0].getElementsByTagName('iframe')[0]; if (googlePayIfr && googlePayIfr.contentDocument) { const ifr = googlePayIfr.contentDocument; console.log('GPay Doc', ifr); const btn = ifr.getElementById('gpay-button-online-api-id'); console.log('GPay Btn', btn); if (btn) { btn.addEventListener('click', function() { console.log('Google Pay Event Before Data Layer'); const isUserAuthenticated = window.___initialData___.requestContext.user.isAuthenticated; let userEmail = ''; for(let k = 0; k < dataLayer.length; k++) { if(dataLayer[k]['event'] == 'google_pay_clicked') { return; } } if (isUserAuthenticated) { userEmail = window.___initialData___.requestContext.user.emailAddress; } window.dataLayer.push({ event: "google_pay_clicked", "userEmail": userEmail }); console.log('Google Pay Event Clicked'); }); } } } } function add_pay_pal_event() { const iframes = document.getElementsByClassName('ms-checkout-payment-instrument-paypal'); if (iframes && iframes.length) { const paypalIfr = iframes[0].getElementsByTagName('iframe')[0]; // if (paypalIfr && paypalIfr.contentDocument) { // const ifr = paypalIfr.contentDocument; // if (ifr) { // ifr.addEventListener('click', () => { // window.parent.postMessage({ type: 'iframeClick' }, '*'); // }); // } // // const papypalIdContainer = ifr.getElementById('payment-container'); // // if (papypalIdContainer) { // // console.log('PayPal Inside Iframe ID Div ', papypalIdContainer); // // const paymentInsideIframe = papypalIdContainer.getElementsByTagName('iframe')[0]; // // console.log('Payment Inside Iframe Outside', paymentInsideIframe); // // if (paymentInsideIframe) { // // console.log('Payment Inside Iframe', paymentInsideIframe); // // const insideDoc = paymentInsideIframe.contentDocument; // // if (insideDoc) { // // const paypalRows = insideDoc.getElementsByTagName('button'); // // paymentInsideIframe.addEventListener('click', function() { // // for(let k = 0; k < dataLayer.length; k++) { // // if(dataLayer[k]['event'] == 'paypal_clicked') { // // return; // // } // // } // // window.dataLayer.push({ event: 'paypal_clicked'}) // // }); // // } // // } // // } // } window.addEventListener('blur', () => { if (document.activeElement === paypalIfr) { for(let k = 0; k < dataLayer.length; k++) { if(dataLayer[k]['event'] == 'paypal_clicked') { return; } } window.dataLayer.push({ event: 'paypal_clicked'}) } }); } } MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var observer = new MutationObserver(function(mutations, observer) { // fired when a mutation occurs const signoutBtn = document.getElementsByClassName("ms-header__signout-button msc-btn")[0]; signoutBtn && signoutBtn.addEventListener("click", () => { deleteCookie('store_location_popup'); deleteCookie('notification_popup'); }); // GA4 Checkout funnel... const confirmAndSaveBtn = document.getElementsByClassName("hd-details-save")[0]; const allBtns = document.getElementsByTagName('button'); let cncSaveBtn; for (let i = 0; i < allBtns.length; i++) { if (allBtns[i].classList.contains('w-100')) { cncSaveBtn = allBtns[i]; } } if (cncSaveBtn) { cncSaveBtn.addEventListener("click", () => { const isUserAuthenticated = window.___initialData___.requestContext.user?.isAuthenticated; let eventName = 'add_click_and_collect_email'; if (!isUserAuthenticated) { eventName = 'add_click_and_collect_email_guest'; } for(let k = 0; k < dataLayer.length; k++) { if(dataLayer[k]['event'] == eventName) { return; } } dataLayer.push({ 'event': eventName, 'ecommerce': { }, 'eventCallback': { url: window.location.href } }); }); } const applePayBtn = document.getElementById('apple-pay'); if (applePayBtn) { applePayBtn.addEventListener('click', function() { const isUserAuthenticated = window.___initialData___.requestContext.user.isAuthenticated; let userEmail = ''; if (isUserAuthenticated) { userEmail = window.___initialData___.requestContext.user.emailAddress; } window.dataLayer.push({ event: "apple_pay_clicked", "userEmail": userEmail }); console.log('Apple Pay Event Clicked'); }); } const confirmAndPlaceOrderBtns = document.getElementsByClassName('ms-checkout__btn-place-order'); if (confirmAndPlaceOrderBtns && confirmAndPlaceOrderBtns.length) { const placeOrderBtn = confirmAndPlaceOrderBtns[0]; placeOrderBtn.addEventListener("click", () => { const isUserAuthenticated = window.___initialData___.requestContext.user?.isAuthenticated; let eventName = 'place_order'; if (!isUserAuthenticated) { eventName = 'place_order'; } for(let k = 0; k < dataLayer.length; k++) { if(dataLayer[k]['event'] == eventName) { return; } } dataLayer.push({ 'event': eventName, 'ecommerce': { }, 'eventCallback': { url: window.location.href } }); }); } confirmAndSaveBtn && confirmAndSaveBtn.addEventListener("click", () => { for(let k = 0; k < dataLayer.length; k++) { if(dataLayer[k]['event'] == 'shipping_address_added') { return; } } const isUserAuthenticated = window.___initialData___.requestContext.user?.isAuthenticated; let eventName = 'add_shipping_info'; if (!isUserAuthenticated) { eventName = 'add_shipping_info_guest'; } for(let k = 0; k < dataLayer.length; k++) { if(dataLayer[k]['event'] == eventName) { return; } } dataLayer.push({ 'event': eventName, 'ecommerce': { }, 'eventCallback': { url: window.location.href } }); }); check_and_add_payment_info(); add_google_pay_event(); add_pay_pal_event(); //////////////////////////////////////// }); // define what element should be observed by the observer // and what types of mutations trigger the callback observer.observe(document, { subtree: true, attributes: true //... });