miva-import.xml

<CSSResource_Delete code="preconnect-google-analytics"/>
<CSSResource_Add>
	<Code>preconnect-google-analytics</Code>
	<Type>ExternalFile</Type>
	<Global>Yes</Global>
	<Active>Yes</Active>
	<Attributes>
		<Attribute>
			<Name>rel</Name>
			<Value>preconnect</Value>
		</Attribute>
		<Attribute>
			<Name>crossorigin</Name>
			<Value></Value>
		</Attribute>
	</Attributes>
	<File_Path>//www.google-analytics.com</File_Path>
</CSSResource_Add>
<CSSResourceXGroup_Assign code="preconnect-google-analytics" group_code="css_list"/>

<CSSResource_Delete code="preconnect-google-tag-manager"/>
<CSSResource_Add>
	<Code>preconnect-google-tag-manager</Code>
	<Type>ExternalFile</Type>
	<Global>Yes</Global>
	<Active>Yes</Active>
	<Attributes>
		<Attribute>
			<Name>rel</Name>
			<Value>preconnect</Value>
		</Attribute>
		<Attribute>
			<Name>crossorigin</Name>
			<Value></Value>
		</Attribute>
	</Attributes>
	<File_Path>https://www.googletagmanager.com</File_Path>
</CSSResource_Add>
<CSSResourceXGroup_Assign code="preconnect-google-tag-manager" group_code="css_list"/>

<JavaScriptResource_Delete code="GTM-head-tag"/>
<JavaScriptResource_Add>
	<Code>GTM-head-tag</Code>
	<Type>InlineScript</Type>
	<Global>Yes</Global>
	<Active>Yes</Active>
	<Attributes>
	</Attributes>
	<Template><![CDATA[(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
]]></Template>
	<Notes>#Set_Current_Time#</Notes>
</JavaScriptResource_Add>
<JavaScriptResourceXGroup_Assign code="GTM-head-tag" group_code="head_tag"/>

<JavaScriptResource_Delete code="GTM-dataLayer"/>
<JavaScriptResource_Add>
	<Code>GTM-dataLayer</Code>
	<Type>InlineScript</Type>
	<Global>Yes</Global>
	<Active>Yes</Active>
	<Attributes>
	</Attributes>
	<Template><![CDATA[<mvt:comment>
Miva Data Layer for Google Analytics 4
Version: 1.1.0
</mvt:comment>

var dataLayer = dataLayer || [];

var clearEcommerceDataLayer = () => {
	dataLayer.push({ ecommerce: null });<mvt:comment>Clearing the ecommerce object will prevent multiple ecommerce events on a page from affecting each other.</mvt:comment>
};

<mvt:assign name="l.settings:currency" value="'USD'" />

<mvt:comment>
|
|	Determine Canonical URI & URL
|
</mvt:comment>
<mvt:assign name="l.flags:nosession" value="1" />
<mvt:if expr="g.Screen EQ 'PROD'">
	<mvt:do file="g.Module_Feature_URI_UT" name="l.settings:data_layer:canonical_url" value="Store_Product_URL( l.settings:product, l.flags )" />
<mvt:elseif expr="g.Screen EQ 'CTGY'">
	<mvt:do file="g.Module_Feature_URI_UT" name="l.settings:data_layer:canonical_url" value="Store_Category_URL( l.settings:category, l.flags )" />
<mvt:elseif expr="l.settings:page:code EQ 'SRCH'">
	<mvt:assign name="l.flags:sep" value="1" />
	<mvt:do file="g.Module_Feature_URI_UT" name="l.settings:data_layer:canonical_url" value="Store_Page_URL( l.settings:page, l.flags )" />
	<mvt:assign name="l.settings:data_layer:canonical_url" value="l.settings:data_layer:canonical_url $ 'Search=' $ encodeattribute( g.Search )" />
<mvt:elseif expr="l.settings:page:code EQ 'NTFD' OR l.settings:page:code EQ 'MNTN'">
	<mvt:do file="g.Module_Feature_URI_DB" name="l.null" value="URISettings_Load_Cached( l.urisettings )" />
	<mvt:do file="g.Module_Feature_URI_UT" name="l.settings:data_layer:canonical_url" value="URL_Build_URI( l.urisettings, l.flags, s.request_uri, '' )" />
<mvt:else>
	<mvt:do file="g.Module_Feature_URI_UT" name="l.settings:data_layer:canonical_url" value="Store_Page_URL( l.settings:page, l.flags )" />
</mvt:if>
<mvt:do file="g.Module_Feature_URI_UT" name="l.settings:data_layer:canonical_uri" value="URL_To_URI( l.settings:data_layer:canonical_url )" />

<mvt:comment>
|
|	Core Data Layer Elements
|
</mvt:comment>
dataLayer.push({
	canonicalUri: '&mvtj:data_layer:canonical_uri;',
	canonicalUrl: '&mvtj:data_layer:canonical_url;',
	category: {
		code: '&mvtj:category:code;',
		name: '&mvtj:category:name;'
	},
	global: {
		action: '&mvtj:global:Action;',
		basket: {
			<mvt:if expr="g.Basket:cust_id GT 0">
				custId: '&mvtj:global:Basket:cust_id;',
			</mvt:if>
			basketId: '&mvtj:global:Basket:basket_id;'
		},
		categoryCode: '&mvtj:global:Category_Code;',
		function: '&mvtj:global:Function;',
		moduleFunction: '&mvtj:global:Module_Function;',
		productCode: '&mvtj:global:Product_Code;',
		screen: '&mvtj:global:Screen;',
		uiException: '&mvtj:global:UI_Exception;'
	},
	page: {
		code: '&mvtj:page:code;',
		name: '&mvtj:page:name;'
	},
	product: {
		code: '&mvtj:product:code;',
		name: '&mvtj:product:name;',
		sku: '&mvtj:product:sku;'
	}
});

<mvt:comment>
|
|	Identify Forms
|
</mvt:comment>
window.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('form').forEach(form => {
		if (form.getAttribute('name')?.length) {
			return;
		}

		const identifier = form.elements?.Action?.value ?? form.dataset?.hook ?? form.querySelector('legend')?.innerText;
		if (identifier?.length) {
			form.name = identifier;
		}
	});
});

<mvt:comment>
|
|	Generate Lead
|	https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#generate_lead
|
</mvt:comment>
<mvt:if expr="l.settings:page:code EQ 'CTUS' AND g.status EQ 'submitted'">
	dataLayer.push({
		event: 'generate_lead'
	});
</mvt:if>

<mvt:comment>
|
|	Track Search
|   https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#search
|
</mvt:comment>
window.addEventListener('DOMContentLoaded', () => {
	let timeoutId;

	const debouncedSearch = (e) => {
		clearTimeout(timeoutId);

		timeoutId = setTimeout(() => {
			const search_term = e?.target?.value;

			if (!search_term?.length) {
				return;
			}

			dataLayer.push({
				event: 'search',
				search_term
			});
		}, 500);
	};

	const searchInputs = document.querySelectorAll('input[name="Search"]');
	searchInputs.forEach(input => {
		input.addEventListener('input', debouncedSearch)
	});
});

<mvt:comment>
|
|	Track View Search Results
|   https://support.google.com/analytics/answer/9216061?sjid=11223540072804449153-NA
|
</mvt:comment>
<mvt:if expr="s.request_method NE 'GET' AND l.settings:page:code EQ 'SRCH' AND NOT ISNULL g.Search">
	dataLayer.push({
		event: 'view_search_results',
		search_term: '&mvtj:global:Search;'
	});
</mvt:if>

<mvt:comment>
|
|	Track Promotions
|	https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_promotion
|	https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#select_promotion
|
</mvt:comment>
class MMXPromotionTracker {
	constructor() {
		window.addEventListener('DOMContentLoaded', () => {
			this.init();
		});
	}

	init() {
		this.promotions = document.querySelectorAll('[data-flex-item]');

		if (!this.promotions.length) {
			return;
		}

		this.promotionObserver = new IntersectionObserver((entries) => {
			this.observedCallback(entries);
		}, {threshold: [0.75]});

		this.promotions.forEach((promotion, i) => {
			this.promotionObserver.observe(promotion);

			promotion.addEventListener('click', (e) => {
				this.promotionClicked(promotion, e);
			});
		});
	}

	promotionClicked(promotion, e){
		let clickedLink = false;
		let products = [];
		let clickedHero;

		e.composedPath().forEach(item => {
			if (item.nodeName === 'A' || (item.nodeName === 'MMX-HERO' && item.dataset?.href?.length)) {
				clickedLink = true;
			}

			if (item.nodeName === 'MMX-HERO') {
				clickedHero = item;
			} else if (item.nodeName === 'MMX-PRODUCT-CAROUSEL') {
				const clickedProductIndex = [...item.shadowRoot.querySelectorAll('mmx-hero[slot="hero_slide"]')].findIndex(heroSlide => heroSlide === clickedHero);
				products = [item?.products[clickedProductIndex]];
			} else if (item.nodeName === 'MMX-FEATURED-PRODUCT') {
				products = [item?.product];
			}
		});

		if (clickedLink) {
			this.trackPromotion('select_promotion', promotion, products);
		}
	};

	trackPromotion(event, item, products = []) {
		clearEcommerceDataLayer();
		dataLayer.push({
			event,
			ecommerce: {
				creative_name: item.getAttribute('data-flex-item'),
				creative_slot: [...this.promotions].findIndex(promotion => promotion === item) + 1,
				items: this.productsToEcommerceItems(products),
				promotion_id: item.getAttribute('data-flex-component')
			}
		});

		if (item?.nodeName === 'MMX-PRODUCT-CAROUSEL') {
			this.trackProductList(event, item, products);
		}
	};

	trackProductList(event, item, products = []) {
		if (!products?.length) {
			return;
		}

		clearEcommerceDataLayer();
		dataLayer.push({
			event: event === 'select_promotion' ? 'select_item' : 'view_item_list',
			ecommerce: {
				item_list_id: item.getAttribute('id'),
				item_list_name: item?.data?.heading?.heading_text?.value ?? item.getAttribute('id'),
				items: this.productsToEcommerceItems(products)
			}
		});
	}

	observedCallback(entries) {
		entries.forEach((entry, entryIndex) => {
			if (!entry.isIntersecting) {
				return;
			}

			this.trackPromotion('view_promotion', entry.target, entry.target?.products);
		});
	};

	productsToEcommerceItems(products = []) {
		if (!products?.length) {
			return [];
		}

		return products.map((item, i) => {
			return {
				item_id: item.code,
				item_name: item.name,
				item_sku: item?.sku,
				index: i,
				price: item.price,
				discount: item.base_price - item.price,
				quantity: 1
			}
		});
	}
}

new MMXPromotionTracker();


<mvt:comment>
|
|	View Item List
|	https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_item_list
|
</mvt:comment>
<mvt:assign name="l.data_layer_item" value="''" />

<mvt:if expr="NOT ISNULL l.settings:search_results:products">
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_id" value="'search_results'" />
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_name" value="'Search Results'" />
	<mvt:assign name="l.settings:item_list_products" value="l.settings:search_results:products" />
<mvt:elseif expr="NOT ISNULL l.settings:category_listing:products">
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_id" value="'category_listing'" />
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_name" value="'Category Listing'" />
	<mvt:assign name="l.settings:item_list_products" value="l.settings:category_listing:products" />
<mvt:elseif expr="NOT ISNULL l.settings:all_products:products">
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_id" value="'all_products'" />
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_name" value="'All Products'" />
	<mvt:assign name="l.settings:item_list_products" value="l.settings:all_products:products" />
<mvt:elseif expr="NOT ISNULL l.settings:related_products:products">
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_id" value="'related_products'" />
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_name" value="'Related Products'" />
	<mvt:assign name="l.settings:item_list_products" value="l.settings:related_products:products" />
<mvt:elseif expr="NOT ISNULL l.settings:wishlistitems:items">
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_id" value="'wish_list_items'" />
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_name" value="'Wish List Items'" />
	<mvt:foreach iterator="item" array="wishlistitems:items">
		<mvt:assign name="l.settings:item:product:quantity" value="l.settings:item:quantity" />
		<mvt:assign name="l.null" value="miva_array_insert_var( l.settings:item_list_products, l.settings:item:product, -1 )" />
	</mvt:foreach>
<mvt:elseif expr="l.settings:page:code EQ 'ORDS' AND NOT ISNULL l.settings:order:groups">
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_id" value="'order_status'" />
	<mvt:assign name="l.data_layer_item:ecommerce:item_list_name" value="'Order Status'" />
	<mvt:assign name="l.settings:item_list_products" value="l.settings:order:groups" />
</mvt:if>

<mvt:if expr="miva_array_elements(l.settings:item_list_products)">
	<mvt:assign name="l.data_layer_item:event" value="'view_item_list'" />

	<mvt:foreach iterator="item_list_product" array="item_list_products">
		<mvt:comment>Determine ecommerce:item details</mvt:comment>
		<mvt:assign name="l.ecommerce_item" value="''" />
		<mvt:assign name="l.ecommerce_item:index" value="l.pos1 - 1" />
		<mvt:assign name="l.ecommerce_item:item_id" value="l.settings:item_list_product:code" />
		<mvt:assign name="l.ecommerce_item:item_name" value="l.settings:item_list_product:name" />
		<mvt:assign name="l.ecommerce_item:item_sku" value="l.settings:item_list_product:sku" />
		<mvt:assign name="l.ecommerce_item:quantity" value="ternary(l.data_layer_item:ecommerce:item_list_id IN 'order_status,wish_list_items', l.settings:item_list_product:quantity, 1)" />
		<mvt:assign name="l.ecommerce_item:discount" value="miva_ieee754_normalize( 2, l.settings:item_list_product:base_price - l.settings:item_list_product:price )" />
		<mvt:assign name="l.ecommerce_item:price" value="l.settings:item_list_product:price" />

		<mvt:comment>Calculate unit base_price & unit_discount</mvt:comment>
		<mvt:if expr="l.data_layer_item:ecommerce:item_list_id EQ 'order_status'">
			<mvt:assign name="l.settings:item_list_product:unit_base_price_comprehensive" value="l.settings:item_list_product:subtotal_base_price_comprehensive / l.settings:item_list_product:quantity" />
			<mvt:assign name="l.settings:item_list_product:unit_price_comprehensive" value="l.settings:item_list_product:subtotal_comprehensive / l.settings:item_list_product:quantity" />
			<mvt:assign name="l.settings:item_list_product:unit_discount_comprehensive" value="miva_ieee754_normalize( 3, l.settings:item_list_product:unit_base_price_comprehensive - l.settings:item_list_product:unit_price_comprehensive )" />
			<mvt:assign name="l.ecommerce_item:discount" value="l.settings:item_list_product:unit_discount_comprehensive" />
			<mvt:assign name="l.ecommerce_item:price" value="l.settings:item_list_product:unit_price_comprehensive" />
		</mvt:if>

		<mvt:comment>Determine item_category</mvt:comment>
		<mvt:if expr="l.settings:item_list_product:product:cancat_id">
			<mvt:do file="g.Module_Library_DB" name="l.null" value="Runtime_Category_Load_ID_Cached( l.settings:item_list_product:product:cancat_id, l.settings:item_list_product:cancat )" />
			<mvt:assign name="l.ecommerce_item:item_category" value="l.settings:item_list_product:cancat:name" />
		</mvt:if>

		<mvt:comment>Determine item_variant</mvt:comment>
		<mvt:if expr="l.settings:item_list_product:option_count">
			<mvt:foreach iterator="option" array="item_list_product:options">
				<mvt:if expr="l.settings:option:option_id">
					<mvt:assign name="l.null" value="miva_array_insert( l.ecommerce_item:item_variant, l.settings:option:attr_code $ ': ' $ l.settings:option:opt_code, -1 )" />
				<mvt:elseif expr="NOT ISNULL l.settings:option:data">
					<mvt:assign name="l.null" value="miva_array_insert( l.ecommerce_item:item_variant, l.settings:option:attr_code $ ': ' $ l.settings:option:data, -1 )" />
				<mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
					<mvt:assign name="l.null" value="miva_array_insert( l.ecommerce_item:item_variant, l.settings:option:attr_code $ ': ' $ l.settings:option:data_long, -1 )" />
				<mvt:else>
					<mvt:assign name="l.null" value="miva_array_insert_var( l.ecommerce_item:item_variant, l.settings:option:attr_code, -1 )" />
				</mvt:if>
			</mvt:foreach>
		</mvt:if>
		<mvt:if expr="NOT ISNULL l.settings:item_list_product:productsubscriptionterm:descrip">
			<mvt:assign name="l.null" value="miva_array_insert_var( l.ecommerce_item:item_variant, l.settings:item_list_product:productsubscriptionterm:descrip, -1 )" />
		</mvt:if>
		<mvt:assign name="l.ecommerce_item:item_variant" value="miva_joinstring( l.ecommerce_item:item_variant, ', ', 'noempty' )" />

		<mvt:comment>Determine item_brand</mvt:comment>
		<mvt:if expr="NOT ISNULL l.settings:item_list_product:customfield_values:customfields:brand">
			<mvt:assign name="l.ecommerce_item:item_brand" value="l.settings:item_list_product:customfield_values:customfields:brand" />
		</mvt:if>

		<mvt:comment>Push ecommerce_item to ecommerce:items</mvt:comment>
		<mvt:assign name="l.null" value="miva_array_insert_var( l.data_layer_item:ecommerce:items, l.ecommerce_item, -1 )" />

	</mvt:foreach>

	clearEcommerceDataLayer();
	dataLayer.push(<mvt:eval expr="miva_json_encode( l.data_layer_item, 'pretty' )" />);

	class SelectItemTracker {
		listSelectors = {
			related_products: [
				'.x-product-list--related .x-product-list__link',
				'.t-related-product-list .x-product-list__link',
				'#js-related-products-carousel [data-mm-linktype="product-list-link"]',
				'#js-PROD [data-mm-linktype="product-list-link"]',
				'.cmp-product-list .cmp-product-list__item:not(.cmp-product-list__header)',
				'[data-hook="related-products"] .mm-card-grid-item__wrapper'
			],
			wish_list_items: [
				'#js-WISH .t-basket__product-details a:not([href*="Edit_Wish"], [href*="Action=RMWL"])',
				'#js-WISH .basket-product-row a:not([href*="Edit_Wish"], [href*="Action=RMWL"])',
				'#js-WISH .basket-display__product-row a:not([href*="Edit_Wish"], [href*="Action=RMWL"])'
			],
			order_status: [
				'.t-page-ords .t-basket__product-name',
				'.t-account-landing__order-list a',
				'#js-ORDS .basket-product-row a',
				'.order-summary-display a'
			]
		};

		productLists = [
			'search_results',
			'category_listing',
			'all_products'
		]

		productListLinkSelectors = [
			'.x-product-list .x-product-list__link',
			'.cmp-product-list .cmp-product-list__item',
			'#js-product-list .category-product',
			'#js-product-list [data-mm-linktype="product-list-link"]',
			'.product-grid [data-mm-linktype="product-list-link"]'
		];

		constructor() {
			window.addEventListener('DOMContentLoaded', () => {
				this.init();
			});
		}

		init() {
			this.buildProductListLinkSelectors();

			Object.keys(this.listSelectors).forEach(listId => {
				this.bindListEvents(listId);
			});
		}

		buildProductListLinkSelectors() {
			this.productLists.forEach(productList => {
				this.listSelectors[productList] = this.productListLinkSelectors;
			});
		}

		bindListEvents(listId) {
			const viewItemListEvent = this.getViewItemListEvent(listId);

			if (!viewItemListEvent) {
				return;
			}

			const listSelectors = this.listSelectors[listId];
			const firstMatchingSelector = listSelectors.find(selector => {
				return document.querySelector(selector) !== null;
			});
			const listItemLinks = document.querySelectorAll(firstMatchingSelector);

			listItemLinks.forEach((listItemLink, index) => {
				listItemLink.addEventListener('click', () => {
					this.trackSelectItem(viewItemListEvent, index);
				});
			});
		}

		getViewItemListEvent(list_id) {
			return window?.dataLayer?.find(item => {
				return item?.event === 'view_item_list' && item?.ecommerce?.item_list_id === list_id;
			});
		}

		trackSelectItem(viewItemListEvent, itemIndex) {
			const selectedItem = structuredClone(viewItemListEvent?.ecommerce?.items?.[itemIndex]);

			if (typeof selectedItem !== 'object') {
				return;
			}

			clearEcommerceDataLayer();
			dataLayer.push({
				event: 'select_item',
				ecommerce: {
					currency: '&mvtj:currency;',
					value: selectedItem?.price,
					item_list_id: viewItemListEvent?.ecommerce.item_list_id,
					item_list_name: viewItemListEvent?.ecommerce.item_list_name,
					items: [
						selectedItem
					]
				}
			});
		}
	}

	new SelectItemTracker();
</mvt:if>

<mvt:if expr="g.Screen EQ 'PROD'">
	<mvt:comment>
	|
	|	View Item, Add to Cart & Add to Wishlist
	|	https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_item
	|	https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#add_to_cart
	|	https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#add_to_wishlist
	|
	</mvt:comment>

	class ProductTracker {

		options = {
			adprButtonSelector: '[data-hook="add-to-cart"], #js-add-to-cart',
			adprFormSelector: 'form[name="add"], #js-purchase-product',
			atwlButtonSelector: '[value="Add To Wish List" i], .t-product-layout-purchase__add-to-wish, #add-to-wishlist-wrap, [data-hook="add-to-wish-list"], .product-details__wish-list'
		};

		constructor(options = {}) {

			this.options = {
				...this.options,
				...options
			};

			window.addEventListener('load', () => {
				this.init();
			});
		}

		init() {
			this.adprForm = this.options?.adprForm ?? document.querySelector(this.options.adprFormSelector);
			this.adprButton = this.options?.adprButton ?? document.querySelector(this.options.adprButtonSelector);
			this.atwlButton = this.options?.atwlButton ?? document.querySelector(this.options.atwlButtonSelector);

			if (this.adprForm?.nodeName !== 'FORM') {
				return;
			}

			this.listenForViewItem();
			this.listenForAddToCart();
			this.listenForAddToWishlist()
		}

		listenForViewItem() {
			if ('AttributeMachine' in window && this.getProductAttributeCount() > 0) {
				this.listenForPriceChanged();
				return;
			}

			this.trackViewItem();
		}

		getProductAttributeCount() {
			<mvt:assign name="l.settings:attribute_count" value="miva_array_elements(l.settings:attributes)" />
			return Number(this.adprForm.elements?.Product_Attribute_Count?.value ?? &mvtj:attribute_count;);
		}

		listenForPriceChanged() {
			window?.MivaEvents?.SubscribeToEvent?.('price_changed', (productData) => {
				this.onPriceChanged(productData);
			});
		}

		onPriceChanged(productData) {
			this.productData = productData;

			if (!this?.viewedItem) {
				this.trackViewItem();
			}
		}

		trackViewItem() {
			this.viewedItem = this.track('view_item');
		}

		listenForAddToCart() {
			this.adprForm?.addEventListener('click', (e) => {
				if (e.target !== this.adprButton) {
					return;
				}

				this.track('add_to_cart');
			}, { capture: true });
		}

		listenForAddToWishlist() {
			this.atwlButton?.addEventListener('click', () => {
				this.track('add_to_wishlist');
			});
		}

		track(event) {
			if (!this.shouldTrack(event)) {
				return;
			}

			const dataLayerItem = this.getBaseDataLayerItem();

			let price = Number(dataLayerItem.ecommerce.value);
			let additionalPrice = Number(dataLayerItem.ecommerce.items[0].price) + Number(dataLayerItem.ecommerce.items[0].discount);

			if (typeof this?.productData === 'object') {
				price = this.productData.price;
				additionalPrice = this.productData.additional_price ?? this.productData.price;
			}

			clearEcommerceDataLayer();
			dataLayerItem.event = event;
			dataLayerItem.ecommerce.value = price;
			dataLayerItem.ecommerce.items[0].price = price;
			dataLayerItem.ecommerce.items[0].discount = Number((additionalPrice - price).toFixed(2));
			dataLayerItem.ecommerce.items[0].quantity = this.adprForm.elements.Quantity.value;
			dataLayerItem.ecommerce.items[0].item_variant = this.getItemVariant();
			dataLayer.push(dataLayerItem);

			if (event === 'add_to_cart') {
				window?.basketMonitor?.reportAddToCart(dataLayerItem);
			}

			return dataLayerItem;
		}

		shouldTrack(event) {
			if(['add_to_cart', 'add_to_wishlist'].includes(event)) {
				return this.adprForm.checkValidity();
			}

			return true;
		}

		getBaseDataLayerItem() {
			return {
				event: null,
				ecommerce: {
					currency: '&mvtj:currency;',
					value: '&mvtj:product:price;',
					items: [
						{
							item_id: '&mvtj:product:code;',
							item_sku: '&mvtj:product:sku;',
							item_name: '&mvtj:product:name;',
							price: '&mvtj:product:price;',
							<mvt:assign name="l.settings:product:discount" value="miva_ieee754_normalize(2, l.settings:product:base_price - l.settings:product:price)" />
							discount: '&mvtj:product:discount;',
							index: 0,
							item_brand: '&mvtj:product:customfield_values:customfields:brand;',
							<mvt:if expr="l.settings:product:cancat_id">
								<mvt:do file="g.Module_Library_DB" name="l.null" value="Runtime_Category_Load_ID_Cached( l.settings:product:cancat_id, l.settings:product:cancat )" />
								item_category: '&mvtj:product:cancat:name;'
							</mvt:if>
						}
					]
				}
			}
		}

		getItemVariant() {
			const attributeValueInputs = [...this.adprForm.querySelectorAll('[name*="Product_Attributes"][name*=":value"]:is(:checked, select, [type="text"], textarea)')];
			const itemVariant = attributeValueInputs.reduce((values, input) => {
				const attributeCode = this.adprForm.querySelector(`[name="${input.name.replace(':value', ':code')}"]`)?.value;
				if (input?.type === 'checkbox') {
					values.push(attributeCode);
				}
				else if (input.value.length > 0) {
					values.push(`${attributeCode}: ${input.value}`);
				}

				return values;
			}, []);

			const subscriptionValue = this.getSubscriptionValue();

			if (typeof subscriptionValue === 'string') {
				itemVariant.push(subscriptionValue);
			}

			return itemVariant.join(', ');
		}

		getSubscriptionValue() {
			const checkedSubscriptionOrderOnceRadio = this.adprForm.querySelector('input[type="radio"][name="Product_Subscription_Term_ID"][value="0"]:checked');
			const subscriptionTermSelect = this.adprForm.querySelector('select[name="Product_Subscription_Term_ID"]:not(:disabled)');
			const isSubscribing = checkedSubscriptionOrderOnceRadio === null && Number(subscriptionTermSelect?.value) > 0;

			if (isSubscribing) {
				return subscriptionTermSelect.selectedOptions?.[0]?.innerText;
			}
		}
	}

	new ProductTracker();
</mvt:if>

<mvt:comment>
|
|	Event Context
|
</mvt:comment>
<mvt:if expr="g.Order">
	<mvt:assign name="l.settings:event_context" value="'Checkout'" />
<mvt:elseif expr="g.Redeem">
	<mvt:assign name="l.settings:event_context" value="'Redeem Gift Certificate'" />
<mvt:elseif expr="g.WishList">
	<mvt:assign name="l.settings:event_context" value="'Wishlist'" />
<mvt:else>
	<mvt:assign name="l.settings:event_context" value="'Default'" />
</mvt:if>

<mvt:comment>
|
|	Sign Up Event
|   https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#sign_up
|
</mvt:comment>

<mvt:assign name="l.data_layer_item" value="''" />

<mvt:comment>Determine sign_up method from g.Action</mvt:comment>
<mvt:if expr="('ICST' IN g.Action AND NOT g.UI_Exception) OR g.registration EQ 1">
	dataLayer.push({
		event: 'sign_up',
		method: 'Create Customer from &mvtj:event_context;'
	});
<mvt:elseif expr="'ICSQ' IN g.Action AND NOT g.UI_Exception">
	dataLayer.push({
		event: 'sign_up',
		method: 'Quick Create Customer from &mvtj:event_context;'
	});
</mvt:if>

<mvt:comment>
|
|	Login Event
|   https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#login
|
</mvt:comment>

<mvt:if expr="('LOGN' IN g.Action AND NOT g.UI_Exception) OR g.logon EQ 1">
	dataLayer.push({
		event: 'login',
		method: 'Login through &mvtj:event_context;'
	});
</mvt:if>

<mvt:comment>
|
|	Basket & Checkout Ecommerce
|
</mvt:comment>
<mvt:assign name="l.data_layer_item" value="''" />

<mvt:comment>Normalize basket/order structure</mvt:comment>
<mvt:if expr="l.settings:page:code EQ 'INVC'">
	<mvt:assign name="l.settings:basket_or_order" value="l.settings:order" />
<mvt:elseif expr="NOT ISNULL l.settings:basket">
	<mvt:assign name="l.settings:basket_or_order" value="l.settings:basket" />
<mvt:elseif expr="NOT ISNULL l.settings:global_minibasket">
	<mvt:assign name="l.settings:basket_or_order" value="l.settings:global_minibasket" />
</mvt:if>

<mvt:comment>Output core ecommerce data</mvt:comment>
<mvt:assign name="l.data_layer_item:ecommerce:currency" value="l.settings:currency" />
<mvt:assign name="l.data_layer_item:ecommerce:value" value="l.settings:basket_or_order:total" />

<mvt:comment>Determine the ecommerce:event</mvt:comment>
<mvt:if expr="l.settings:page:code EQ 'BASK'">
	<mvt:assign name="l.data_layer_item:event" value="'view_cart'" />
<mvt:elseif expr="'OCST' IN l.settings:page:code">
	<mvt:assign name="l.data_layer_item:event" value="'begin_checkout'" />
<mvt:elseif expr="'OSEL' IN l.settings:page:code">
	<mvt:assign name="l.data_layer_item:event" value="'add_shipping_info'" />
<mvt:elseif expr="'OPAY' IN l.settings:page:code">
	<mvt:assign name="l.data_layer_item:event" value="'add_payment_info'" />
	<mvt:assign name="l.data_layer_item:ecommerce:payment_type" value="l.settings:payment:desc" />
<mvt:elseif expr="l.settings:page:code EQ 'INVC'">
	<mvt:assign name="l.data_layer_item:event" value="'purchase'" />
	<mvt:assign name="l.data_layer_item:ecommerce:transaction_id" value="l.settings:order:id" />
<mvt:elseif expr="NOT ISNULL l.settings:global_minibasket">
	<mvt:assign name="l.data_layer_item:event" value="'mm_global_minibasket'" />
</mvt:if>

<mvt:comment>Calculate & prepare ecommerce:items</mvt:comment>
<mvt:foreach iterator="group" array="basket_or_order:groups">
	<mvt:comment>Calculate unit base_price & unit_discount</mvt:comment>
	<mvt:assign name="l.settings:group:unit_base_price_comprehensive" value="l.settings:group:subtotal_base_price_comprehensive / l.settings:group:quantity" />
	<mvt:assign name="l.settings:group:unit_price_comprehensive" value="l.settings:group:subtotal_comprehensive / l.settings:group:quantity" />
	<mvt:assign name="l.settings:group:unit_discount_comprehensive" value="miva_ieee754_normalize( 3, l.settings:group:unit_base_price_comprehensive - l.settings:group:unit_price_comprehensive )" />

	<mvt:comment>Determine ecommerce:item details</mvt:comment>
	<mvt:assign name="l.ecommerce_item" value="''" />
	<mvt:assign name="l.ecommerce_item:discount" value="l.settings:group:unit_discount_comprehensive" />
	<mvt:assign name="l.ecommerce_item:index" value="l.pos1 - 1" />
	<mvt:assign name="l.ecommerce_item:item_id" value="l.settings:group:code" />
	<mvt:assign name="l.ecommerce_item:item_name" value="l.settings:group:name" />
	<mvt:assign name="l.ecommerce_item:item_sku" value="l.settings:group:sku" />
	<mvt:assign name="l.ecommerce_item:price" value="l.settings:group:unit_price_comprehensive" />
	<mvt:assign name="l.ecommerce_item:quantity" value="l.settings:group:quantity" />

	<mvt:comment>Determine item_category</mvt:comment>
	<mvt:if expr="l.settings:group:product:cancat_id">
		<mvt:do file="g.Module_Library_DB" name="l.null" value="Runtime_Category_Load_ID_Cached( l.settings:group:product:cancat_id, l.settings:group:cancat )" />
		<mvt:assign name="l.ecommerce_item:item_category" value="l.settings:group:cancat:name" />
	</mvt:if>

	<mvt:comment>Determine item_variant</mvt:comment>
	<mvt:if expr="l.settings:group:option_count">
		<mvt:foreach iterator="option" array="group:options">
			<mvt:if expr="l.settings:option:option_id">
				<mvt:assign name="l.null" value="miva_array_insert( l.ecommerce_item:item_variant, l.settings:option:attr_code $ ': ' $ l.settings:option:opt_code, -1 )" />
			<mvt:elseif expr="NOT ISNULL l.settings:option:data">
				<mvt:assign name="l.null" value="miva_array_insert( l.ecommerce_item:item_variant, l.settings:option:attr_code $ ': ' $ l.settings:option:data, -1 )" />
			<mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
				<mvt:assign name="l.null" value="miva_array_insert( l.ecommerce_item:item_variant, l.settings:option:attr_code $ ': ' $ l.settings:option:data_long, -1 )" />
			<mvt:else>
				<mvt:assign name="l.null" value="miva_array_insert_var( l.ecommerce_item:item_variant, l.settings:option:attr_code, -1 )" />
			</mvt:if>
		</mvt:foreach>
	</mvt:if>
	<mvt:if expr="NOT ISNULL l.settings:group:productsubscriptionterm:descrip">
		<mvt:assign name="l.null" value="miva_array_insert_var( l.ecommerce_item:item_variant, l.settings:group:productsubscriptionterm:descrip, -1 )" />
	</mvt:if>
	<mvt:if expr="l.settings:group:upsold EQ 1">
		<mvt:assign name="l.null" value="miva_array_insert( l.ecommerce_item:item_variant, 'Upsold', -1 )" />
	</mvt:if>
	<mvt:if expr="l.settings:group:wish_id GT 0">
		<mvt:assign name="l.null" value="miva_array_insert( l.ecommerce_item:item_variant, 'Wishlist #' $ l.settings:group:wish_id, -1 )" />
	</mvt:if>
	<mvt:assign name="l.ecommerce_item:item_variant" value="miva_joinstring( l.ecommerce_item:item_variant, ', ', 'noempty' )" />

	<mvt:comment>Determine item_brand</mvt:comment>
	<mvt:if expr="NOT ISNULL l.settings:group:customfield_values:customfields:brand">
		<mvt:assign name="l.ecommerce_item:item_brand" value="l.settings:group:customfield_values:customfields:brand" />
	</mvt:if>

	<mvt:comment>Determine item coupon</mvt:comment>
	<mvt:foreach iterator="discount" array="group:discounts">
		<mvt:assign name="l.null" value="miva_array_insert_var( l.ecommerce_item:coupon, l.settings:discount:descrip, -1 )" />
	</mvt:foreach>
	<mvt:assign name="l.ecommerce_item:coupon" value="miva_joinstring( l.ecommerce_item:coupon, ', ', 'noempty' )" />

	<mvt:comment>Push ecommerce_item to ecommerce:items</mvt:comment>
	<mvt:assign name="l.null" value="miva_array_insert_var( l.data_layer_item:ecommerce:items, l.ecommerce_item, -1 )" />
</mvt:foreach>

<mvt:comment>Determine basket/order coupons</mvt:comment>
<mvt:foreach iterator="coupon" array="basket_or_order:coupons">
	<mvt:assign name="l.null" value="miva_array_insert_var( l.coupons, l.settings:coupon:code, -1 )" />
</mvt:foreach>
<mvt:assign name="l.data_layer_item:ecommerce:coupon" value="miva_joinstring( l.coupons, ', ', 'noempty' )" />

<mvt:comment>Determine ecommerce tax & shipping info</mvt:comment>
<mvt:foreach iterator="charge" array="basket_or_order:charges">
	<mvt:if expr="l.settings:charge:type EQ 'SHIPPING'">
		<mvt:assign name="l.data_layer_item:ecommerce:shipping" value="l.data_layer_item:ecommerce:shipping + l.settings:charge:amount" />
		<mvt:assign name="l.null" value="miva_array_insert_var( l.shipping_tiers, l.settings:charge:descrip, -1 )" />
	<mvt:elseif expr="l.settings:charge:type EQ 'TAX'">
		<mvt:assign name="l.data_layer_item:ecommerce:tax" value="l.data_layer_item:ecommerce:tax + l.settings:charge:amount" />
	</mvt:if>
</mvt:foreach>
<mvt:assign name="l.data_layer_item:ecommerce:shipping_tier" value="miva_joinstring( l.shipping_tiers, ', ', 'noempty' )" />

<mvt:comment>Output data layer item</mvt:comment>
<mvt:if expr="NOT ISNULL l.data_layer_item:event">
	clearEcommerceDataLayer();
	dataLayer.push(<mvt:eval expr="miva_json_encode( l.data_layer_item, 'pretty' )" />);
</mvt:if>

<mvt:comment>
|
| Basket Monitor
|
</mvt:comment>
<mvt:if expr="NOT ISNULL l.data_layer_item:event">
	class BasketMonitor {
		constructor() {
			this.storageKey = 'mm-&mvtj:global:Store_Code;-basket-monitor';

			window.addEventListener('DOMContentLoaded', () => {
				this.init();
			});
		}

		canLocalStorage() {
			const storeTestKey = this.storageKey + '--test';

			if (this.saveCurrentItems(storeTestKey)) {
				localStorage?.removeItem(storeTestKey);
				return true;
			}

			return false;
		}

		init() {
			this.setCurrentItemsFromDataLayer();

			if (!this.canLocalStorage()) {
				return;
			}

			this.handleBasketChanges();
			this.pastItems = this.getItemsFromLocalStorage();
			this.comparePastWithCurrent();
			this.saveCurrentItems();
			this.trackResults();
		}

		handleBasketChanges() {
			const orderProcessed = '&mvtj:global:Basket:order_proc;';

			if (orderProcessed === '1') {
				this.clearCurrentItems();
			}
		}

		setCurrentItemsFromDataLayer() {
			const eventsWithBasketItems = ['mm_global_minibasket', 'view_cart', 'begin_checkout', 'add_shipping_info', 'add_payment_info'];
			const basketEvent = dataLayer.find(item => eventsWithBasketItems.includes(item?.event));
			this.currentItems = this.createMapFromItems(basketEvent?.ecommerce?.items);
		}

		getItemsFromLocalStorage() {
			try {
				return new Map(JSON.parse(localStorage.getItem(this.storageKey)));
			} catch {
				return new Map();
			}
		}

		createMapFromItems(items = []) {
			if (!(items instanceof Array)) {
				return new Map();
			}

			return items.reduce((map, item) => {
				return map.set(this.createItemKey(item), item);
			}, new Map());
		}

		createItemKey(item = {}) {
			return JSON.stringify({
				id: item?.item_id,
				variant: item?.item_variant
			});
		}

		comparePastWithCurrent() {
			this.results = {
				added: [],
				removed: [],
				unchanged: [],
				updated: []
			};

			const allItems = new Map([...this.pastItems, ...this.currentItems]);
			allItems.forEach((value, key) => {
				const pastItem = this.pastItems.get(key);
				const currentItem = this.currentItems.get(key);

				if (typeof pastItem === 'undefined') {
					this.results.added.push(currentItem);
				} else if (typeof currentItem === 'undefined') {
					this.results.removed.push(pastItem);
				} else if (JSON.stringify(currentItem) == JSON.stringify(pastItem)) {
					this.results.unchanged.push(currentItem);
				} else {
					this.results.updated.push(currentItem);
					const quantityChange = currentItem.quantity - pastItem.quantity;

					if (quantityChange > 0) {
						this.results.added.push({
							...currentItem,
							quantity: quantityChange
						});
					} else if (quantityChange < 0) {
						this.results.removed.push({
							...currentItem,
							quantity: Math.abs(quantityChange)
						})
					}
				}
			});
		}

		trackResults() {
			this.trackEvent('add_to_cart', this?.results?.added);
			this.trackEvent('remove_from_cart', this?.results?.removed);
		}

		trackEvent(event, items = []) {
			if (typeof event !== 'string' || !(items instanceof Array) || !items.length) {
				return;
			}

			clearEcommerceDataLayer();
			dataLayer.push({
				event,
				ecommerce: {
					currency: 'USD',
					value: this.determineItemsValue(items),
					items
				}
			});
		}

		determineItemsValue(items = []) {
			if (!(items instanceof Array)) {
				return 0;
			}

			return items.reduce((value, item) => {
				return value += item.quantity * item.price;
			}, 0);
		}

		clearCurrentItems() {
			return localStorage.removeItem(this.storageKey);
		}

		saveCurrentItems(storageKey = this.storageKey) {
			try {
				localStorage.setItem(storageKey, JSON.stringify([...this.currentItems]));
				return true;
			} catch (e) {
				return false;
			}
		}

		reportAddToCart(event) {
			this.pastItems = this.getItemsFromLocalStorage();
			this.currentItems = structuredClone(this.pastItems);
			this.addItemsFromEvent(this.currentItems, event);
			this.comparePastWithCurrent();
			this.saveCurrentItems();
		}

		addItemsFromEvent(items, event = {}) {
			event?.ecommerce?.items?.forEach(addedItem => {
				const itemKey = this.createItemKey(addedItem);
				const existingItem = this.currentItems.get(itemKey);

				if (typeof existingItem === 'undefined') {
					items.set(itemKey, addedItem);
				} else {
					items.set(itemKey, {
						...existingItem,
						quantity: Number(existingItem.quantity) + Number(addedItem.quantity)
					});
				}
			});
		}
	}

	var basketMonitor = new BasketMonitor();
</mvt:if>
]]></Template>
	<Notes>#Set_Current_Time#</Notes>
</JavaScriptResource_Add>
<JavaScriptResourceXGroup_Assign code="GTM-dataLayer" group_code="head_tag"/>