https://www.visitoestfold.com/includes/public/managed/v_a2e6ae52_3…/common/virtuals/js/shared_footer.js

1// This file will be run in the footer on every page.
2// It should be used for content that relates
3// to your site as a whole, it should not be used for
4// plugin-specific js
5
6require(["site_gtm", "plugins_common_custom_ui_watcher", "sv_load!plugins_dynamic_content", "sv_site", "domReady!"], function(gtm, UIWatcher, dynamic, site) {
7	gtm.update();
8
9	// SEM tracking
10	var uiEvents = new UIWatcher({}, null, document);
11	uiEvents.on("change-page", handlePageChange);
12	uiEvents.on("view-change", handleFilterChange);
13	uiEvents.on("sort-change", handleFilterChange);
14	uiEvents.on("value-change", handleFilterChange);
15	uiEvents.on("toggle-show-more", handleShowMoreToggle);
16	uiEvents.on("item-click", handleItemClick);
17	uiEvents.on("tripbuilder", handleTripbuilder);
18	uiEvents.on("qv-tripbuilder", handleTripbuilder);
19	uiEvents.on("quick-view", handleQuickview);
20
21	// tracking handlers
22	function handleTripbuilder(payload){
23		var event = payload.eventContext,
24			widget = payload.widgetContext;
25		let ga4Data = {
26			eventName: event?.value === "Add" ? "add_to_favorites" : undefined,
27			itemType: widget?.name === "Coupons" ? 'offers' : (widget?.name.toLowerCase() !== "quickview" && widget?.name.toLowerCase() !== "quick view") ? widget?.name.toLowerCase() : event?.itemType,
28			itemName: event?.refTitle,
29			linkObject: event?.linkObject,
30			itemCategory: event?.crmc,
31			interactionSource: event?.interactionSource,
32			interactionText: event?.interactionText,
33			interactionUrl: event?.interactionUrl,
34			itemCity: event?.itemCity,
35			itemRegion: event?.itemRegion,
36			itemId: event?.itemId,
37			acctId: event?.acctId,
38			itemVariant: event?.itemVariant,
39			price: event?.price,
40			viatorEvent: event?.viatorEvent,
41		}
42		if (event?.crmsc) 
43			ga4Data.itemSubcategory = event?.crmsc;
44		if (ga4Data.eventName && ga4Data.itemType && ga4Data.itemName && ga4Data.linkObject)
45			gtm.sendEvents({ tClient_ga4: ga4Data });
46	}
47	
48	function handleQuickview(payload){
49		var event = payload.eventContext;
50		let ga4Data = {
51			eventName: event?.eventName,
52			itemType: event?.itemType,
53			itemName: event?.itemName ?? event?.refTitle,
54			linkObject: event?.linkObject,
55			itemCategory: event?.crmc,
56			interactionSource: event?.interactionSource,
57			interactionText: event?.interactionText,
58			interactionUrl: event?.interactionUrl,
59			itemCity: event?.itemCity,
60			itemRegion: event?.itemRegion,
61			itemId: event?.itemId,
62			acctId: event?.acctId,
63			itemVariant: event?.itemVariant,
64			price: event?.price,
65			referralType: event?.referralType,
66			viatorEvent: event?.viatorEvent,
67		}
68		if (event?.crmsc) 
69			ga4Data.itemSubcategory = event?.crmsc;
70		if (event?.eventName === 'partner_referral')
71			ga4Data.value = 5;
72		if (ga4Data.eventName && ga4Data.itemType && ga4Data.itemName && ga4Data.linkObject)
73			gtm.sendEvents({ tClient_ga4: ga4Data });
74	}
75
76	function handleShowMoreToggle(payload){
77		var event = payload.eventContext;
78		let ga4Data = {
79			eventName: "filter",
80			filterType: `${event?.refTitle} | ${event?.displayText}`,
81			itemType: event?.itemType,
82			interactionSource: event?.interactionSource,
83			interactionText: event?.interactionText,
84		}
85		if (ga4Data.eventName && ga4Data.filterType && ga4Data.itemType)
86			gtm.sendEvents({ tClient_ga4: ga4Data });
87	}
88
89	function handlePageChange(payload){
90		var event = payload.eventContext;
91		let ga4Data = {
92			eventName: "filter",
93			filterType: `${event?.refTitle} | ${event?.displayText}`,
94			itemType: event?.itemType,
95			interactionSource: event?.interactionSource,
96			interactionText: event?.interactionText,
97		}
98		if (ga4Data.eventName && ga4Data.filterType && ga4Data.itemType)
99			gtm.sendEvents({ tClient_ga4: ga4Data });
100	}
101
102	function handleItemClick(payload){
103		var event = payload.eventContext;
104		if (event?.name === "Quickview" || event?.name === "Quick View") {
105			var ga4Data = {
106				eventName: "filter",
107				filterType: "Open Quickview",
108				itemType: event?.itemType,
109				itemName: event?.itemName ?? event?.refTitle,
110				interactionSource: event?.interactionSource,
111				interactionText: event?.interactionText,
112				itemCategory: event?.crmc,
113				itemCity: event?.itemCity,
114				itemRegion: event?.itemRegion,
115				itemId: event?.itemId,
116				acctId: event?.acctId,
117				itemVariant: event?.itemVariant,
118				price: event?.price,
119				viatorEvent: event?.viatorEvent,
120			}
121			if (event?.crmsc)
122				ga4Data.itemSubcategory = event?.crmsc;
123			if (event?.widgetName)
124				ga4Data.widgetName = event?.widgetName;
125			if (ga4Data.eventName && ga4Data.filterType && ga4Data.itemType)
126				gtm.sendEvents({tClient_ga4: ga4Data});
127		} else {
128			var ga4Data = {
129				eventName: event?.eventName,
130				widgetName: event?.widgetName,
131				itemType: event?.itemType,
132				itemName: event?.itemName ?? event?.refTitle,
133				linkObject: event?.linkObject,
134				itemCategory: event?.crmc,
135				interactionSource: event?.interactionSource,
136				interactionText: event?.interactionText,
137				interactionUrl: event?.interactionUrl,
138				itemCity: event?.itemCity,
139				itemRegion: event?.itemRegion,
140				itemId: event?.itemId,
141				acctId: event?.acctId,
142				itemVariant: event?.itemVariant,
143				price: event?.price,
144				referralType: event?.referralType,
145				viatorEvent: event?.viatorEvent,
146			}
147			if (event?.crmsc)
148				ga4Data.itemSubcategory = event?.crmsc;
149			if (event?.eventName === 'partner_referral')
150				ga4Data.value = 5;
151			if (ga4Data.eventName && ga4Data.itemType && ga4Data.itemName && ga4Data.linkObject)
152				gtm.sendEvents({tClient_ga4: ga4Data});
153		}
154	}
155
156	function handleFilterChange (payload) {
157		var event = payload.eventContext;
158		let ga4Data = {
159			eventName: "filter",
160			filterType: `${event?.refTitle} | ${event?.displayText}`,
161			itemType: event?.itemType,
162			interactionSource: event?.interactionSource,
163			interactionText: event?.interactionText,
164		}
165		if (ga4Data.eventName && ga4Data.filterType && ga4Data.itemType)
166			gtm.sendEvents({ tClient_ga4: ga4Data });
167	}
168	// end SEM tracking
169
170	// Init quickview textboxes
171	if (site.siteConfig.custom[site.site].quickview.active) {
172		const textBoxes = document.querySelectorAll('[data-qv-enabled-textbox]');
173	
174		if (textBoxes.length) {
175			require(['plugins_common_custom_quickview_textbox'], function (qv) {

176				qv.init();
177			});
178		}
179	}
180});
181
182// Lazy-load js for widgets that have the [data-js] attribute on their root node
183(function() {
184	function initDataJs(searchScope, selector = '[data-js]' ){
185		require(['plugins_common_custom_lazyload'], function(lazyload) {
186			var widgetsToLoad = [];
187			let scope = searchScope ? searchScope : document;
188			var els = scope.querySelectorAll(selector);
189
190			for (var i = 0; i < els.length; i++) {
191				widgetsToLoad.push(els[i]);
192			}
193			
194			lazyload.lazy(widgetsToLoad, function(entry, io) {
195				var target = entry.target;
196				var jsFile = target.dataset.js;
197				var guid = target.dataset.guid;
198
199				require([jsFile], function(widget) {
200					widget.init(guid);
201					io.unobserve(target);
202				});
203			});
204		});
205	};
206
207	initDataJs();
208
209	let eventToSelectorMap = {
210		// each event needs a slightly different selector
211		"dynamicContentLoaded": "[data-dynamic-chosen] [data-js]",
212		"abContentLoaded": "[data-ab-chosen] [data-js]"
213	}
214	
215	Object.entries(eventToSelectorMap).forEach( event => {
216		const [eventName, selector] = event;
217		window.addEventListener(eventName, e => {
218			const collections = document.querySelector(`[data-guid="${e}"]`);
219			initDataJs(collections, selector);
220		});
221	});
222})();
223
224// Wrap core_textbox iframes to prevent horizontal overflow
225(function() {
226	const textBoxes = document.querySelectorAll('[data-sv-core-textbox]');
227	if (textBoxes.length) {
228		require(['plugins_common_custom_utils'], function(utils) {
229			textBoxes.forEach(utils.wrapIframes);
230		});
231	}
232})();
233
234// Remove critical styles from head after all CSS files have loaded
235// This prevents a situation where the critical styles cause an override of the CSS in files
236const criticalStyles = document.querySelector('[data-critical-styles]');
237if (criticalStyles) {
238	window.addEventListener('load', e =>

238 criticalStyles.remove());
239}