ImageMarkup · danlamanna · Jun 20, 2025 · Jun 17, 2025 · Jun 18, 2025 · Jun 18, 2025
diff --git a/error.html b/error.html
@@ -1,22 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
+<head>
+	<!-- Google Tag Manager -->
+	<script>(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-W2JQSNLL');</script>
+	<!-- End Google Tag Manager -->
+</head>
 <body>
+	<!-- Google Tag Manager (noscript) -->
+	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W2JQSNLL"
+	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+	<!-- End Google Tag Manager (noscript) -->
+
 <div class="error-page">
     <img src='sources/images/inner-pages/error-page.png'>
     <div class="not-found-404">404</div>
     <div class="page-not-found">Page not found</div>
     <div class="page-does-not-exist">Oops! The page you are looking for does not exist.</div>
 </div>
 
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-541WGVR6R5"></script>
-<script>
-	window.dataLayer = window.dataLayer || [];
-	function gtag(){dataLayer.push(arguments);}
-	gtag('js', new Date());
-
-	gtag('config', 'G-541WGVR6R5');
-</script>
-
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -2,6 +2,15 @@
 <html>
 <head>
 	<meta charset="utf-8">
+
+	<!-- Google Tag Manager -->
+	<script>(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-W2JQSNLL');</script>
+	<!-- End Google Tag Manager -->
+
 	<meta name="viewport" content="width=device-width">
 	<title>ISIC Archive</title>
 	<link rel="shortcut icon" href="sources/images/favicon.ico" type="image/x-icon" />
@@ -15,6 +24,11 @@
 
 </head>
 <body>
+	<!-- Google Tag Manager (noscript) -->
+	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W2JQSNLL"
+	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+	<!-- End Google Tag Manager (noscript) -->
+
 <svg class="svg" xmlns="http://www.w3.org/2000/svg">
 	<!-- icons -->
 	<symbol viewBox="0 0 26 26" id="close-icon">
@@ -103,15 +117,5 @@
 	</symbol>
 </svg>
 
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-541WGVR6R5"></script>
-<script>
-	window.dataLayer = window.dataLayer || [];
-	function gtag(){dataLayer.push(arguments);}
-	gtag('js', new Date());
-
-	gtag('config', 'G-541WGVR6R5');
-</script>
-
 </body>
 </html>
diff --git a/sources/views/subviews/gallery/gallery.js b/sources/views/subviews/gallery/gallery.js
@@ -44,6 +44,7 @@ export default class GalleryView extends JetView {
 		const clonePagerForNameFilter = {
 			view: "pager",
 			name: NAME_CLONED_PAGER_FOR_NAME_SEARCH,
+			css: "gtm-paginator",
 			size: 80,
 			hidden: true,
 			height: 36,

diff --git a/sources/views/subviews/gallery/galleryMobile.js b/sources/views/subviews/gallery/galleryMobile.js
@@ -264,15 +264,15 @@ export default class GalleryMobileView extends JetView {
 									<div class="thumbnails-name" style="font-size: 20px">${obj.isic_id}</div>
 									<div class="mobile-gallery-images-buttons" style="bottom: ${imageIconDimensions[2]}px;">
 								<div class="gallery-images-button-elem tooltip-container tooltip-gallery-images" style="width: ${imageIconDimensions[0].width}px; height: ${imageIconDimensions[0].height}px;">
-									<span class="gallery-images-button resize-icon tooltip-title">
+									<span class="gtm-image-enlargement gallery-images-button resize-icon tooltip-title">
 										<svg viewBox="0 0 26 26" class="gallery-icon-svg" style="width: ${imageIconDimensions[1].width}px; height: ${imageIconDimensions[1].height}px;">
 											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#resize-icon" class="gallery-icon-use"></use>
 										</svg>
 									</span>
 									<span class="tooltip-block tooltip-block-top" style="display: block">Enlarge</span>
 								</div>
 								<div class="gallery-images-button-elem tooltip-container tooltip-gallery-images" style="width: ${imageIconDimensions[0].width}px; height: ${imageIconDimensions[0].height}px;">
-									<span class="gallery-images-button info-icon tooltip-title">
+									<span class="gtm-image-metadata gallery-images-button info-icon tooltip-title">
 										<svg viewBox="0 0 26 26" class="gallery-icon-svg" style="width: ${imageIconDimensions[1].width}px; height: ${imageIconDimensions[1].height}px;">
 											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#info-icon" class="gallery-icon-use"></use>
 										</svg>
@@ -505,7 +505,7 @@ export default class GalleryMobileView extends JetView {
 			this.removeParam.bind(this)
 		));
 		this.metadataWindow = this.getMetadataLayout();
-		const contextMenuConfig = contextMenu.getConfig(ID_MOBILE_GALLERY_CONTEXT_MENU);
+		const contextMenuConfig = contextMenu.getConfig(ID_MOBILE_GALLERY_CONTEXT_MENU, "gtm-single-download");
 		this.contextMenu = this.ui(contextMenuConfig);
 		const enlargeContextMenuConfig = contextMenu.getConfig(ID_ENLARGE_CONTEXT_MENU);
 		this.enlargeContextMenu = this.ui(enlargeContextMenuConfig);

diff --git a/sources/views/subviews/gallery/parts/cartList.js b/sources/views/subviews/gallery/parts/cartList.js
@@ -42,6 +42,7 @@ function getConfig(config) {
 	const downloadZipButton = {
 		view: "button",
 		value: "Download ZIP",
+		css: "gtm-multi-download",
 		id: ID_DOWNLOAD_SELECTED_IMAGES_BUTTON,
 		name: NAME_DOWNLOAD_SELECTED_IMAGES_BUTTON
 	};

diff --git a/sources/views/subviews/gallery/parts/contextMenu.js b/sources/views/subviews/gallery/parts/contextMenu.js
@@ -5,16 +5,14 @@ const contextMenu = {
 	data: [constants.ID_GALLERY_CONTEXT_MENU_SAVE_IMAGE]
 };
 
-function getConfig(id) {
-	contextMenu.id = id || `contextmenu-${webix.uid()}`;
-	return contextMenu;
-}
-
-function getIdFromConfig() {
-	return contextMenu;
+function getConfig(id = `contextmenu-${webix.uid()}`, css) {
+	return {
+		...contextMenu,
+		id,
+		...(css && { css })
+	};
 }
 
 export default {
 	getConfig,
-	getIdFromConfig
 };
diff --git a/sources/views/subviews/gallery/parts/filterPanel.js b/sources/views/subviews/gallery/parts/filterPanel.js
@@ -20,7 +20,7 @@ function getConfig(config) {
 	const switchButton = {
 		view: "switch",
 		name: NAME_SWITCH_BUTTON,
-		css: "switch-search-gallery-button",
+		css: "gtm-selector switch-search-gallery-button",
 		label: "Search by filters",
 		labelRight: "Search by name",
 		width: 285,
@@ -31,6 +31,7 @@ function getConfig(config) {
 	const downloadFilteredImagesButton = {
 		view: "button",
 		value: "Download ZIP",
+		css: "gtm-filtered-download",
 		id: ID_DOWNLOAD_FILTERED_IMAGES_BUTTON,
 		name: NAME_DOWNLOAD_FILTERED_IMAGES_BUTTON,
 		hidden: true
@@ -39,7 +40,7 @@ function getConfig(config) {
 	const searchSuggestConfig = {
 		id: ID_SEARCH_SUGGESTION,
 		fitMaster: false,
-		css: "filters-suggest",
+		css: "gtm-search filters-suggest",
 	};
 	const searchSuggestView = searchSuggest.getConfig(searchSuggestConfig);
 	searchSuggestView.body.template = obj => (obj.name
@@ -99,6 +100,7 @@ function getConfig(config) {
 	const filtersForm = {
 		id: ID_FILTERS_FORM,
 		name: NAME_FILTERS_FORM,
+		css: "gtm-filter",
 		view: "form",
 		paddingX: 7,
 		margin: 0,

diff --git a/sources/views/subviews/gallery/parts/galleryDataview.js b/sources/views/subviews/gallery/parts/galleryDataview.js
@@ -129,7 +129,7 @@ const dataview = {
 			? ""
 			: " disabled-badge";
 		const lesionIcon = `<div class="${lesionIconElementClass} tooltip-container tooltip-gallery-images" style="height:${imageIconDimensions[0].height}px;width:${imageIconDimensions[0].width}px;">
-			<span class="gallery-images-button layer-group tooltip-title">
+			<span class="gtm-lesion-viewer gallery-images-button layer-group tooltip-title">
 				<svg viewBox="0 0 26 26" class="gallery-icon-svg" style="width: ${imageIconDimensions[1].width}px; height: ${imageIconDimensions[1].height}px">
 					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#layer-group" class="gallery-icon-use"></use>
 				</svg>
@@ -151,28 +151,28 @@ const dataview = {
 					<div class="check-layout ${checkedClass}" style="height: ${util.getImageHeight()}px; width: 100%; position: absolute; right:0px; top:${Math.floor((util.getDataviewItemHeight() - util.getImageHeight()) / 2)}px">
 						<div class='gallery-images-info' style="height: ${util.getImageHeight()}px; position: absolute; right:0px;">
 							<div class="gallery-images-header">
-								<div class="gallery-images-checkbox"> ${common.markCheckbox(obj, common)}</div>
-			        	        <div class="thumbnails-name" style="font-size: ${util.getNewThumnailsNameFontSize()}px">${obj.isic_id}</div>
+								<div class="gtm-image-selection gallery-images-checkbox"> ${common.markCheckbox(obj, common)}</div>
+								<div class="thumbnails-name" style="font-size: ${util.getNewThumnailsNameFontSize()}px">${obj.isic_id}</div>
 							</div>
 							<div class="gallery-images-buttons" style="bottom: ${imageIconDimensions[2]}px;">
 								<div class="gallery-images-button-elem tooltip-container tooltip-gallery-images" style="width: ${imageIconDimensions[0].width}px; height: ${imageIconDimensions[0].height}px;">
-									<span class="gallery-images-button resize-icon tooltip-title">
+									<span class="gtm-image-enlargement gallery-images-button resize-icon tooltip-title">
 										<svg viewBox="0 0 26 26" class="gallery-icon-svg" style="width: ${imageIconDimensions[1].width}px; height: ${imageIconDimensions[1].height}px;">
 											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#resize-icon" class="gallery-icon-use"></use>
 										</svg>
 									</span>
 									<span class="tooltip-block tooltip-block-top" style="display: block">Enlarge</span>
 								</div>
 								<div class="gallery-images-button-elem tooltip-container tooltip-gallery-images" style="width: ${imageIconDimensions[0].width}px; height: ${imageIconDimensions[0].height}px;">
-									<span class="gallery-images-button info-icon tooltip-title">
+									<span class="gtm-image-metadata gallery-images-button info-icon tooltip-title">
 										<svg viewBox="0 0 26 26" class="gallery-icon-svg" style="width: ${imageIconDimensions[1].width}px; height: ${imageIconDimensions[1].height}px;">
 											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#info-icon" class="gallery-icon-use"></use>
 										</svg>
 									</span>
 									<span class="tooltip-block tooltip-block-top">Metadata</span>
 								</div>
 								<div class="gallery-images-button-elem tooltip-container tooltip-gallery-images" style="width: ${imageIconDimensions[0].width}px; height: ${imageIconDimensions[0].height}px;">
-									<span class="gallery-images-button batch-icon tooltip-title">
+									<span class="gtm-single-download gallery-images-button batch-icon tooltip-title">
 										<svg viewBox="0 0 26 26" class="gallery-icon-svg" style="width: ${imageIconDimensions[1].width}px; height: ${imageIconDimensions[1].height}px;">
 											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#batch-icon" class="gallery-icon-use"></use>
 										</svg>

diff --git a/sources/views/subviews/gallery/parts/galleryPager.js b/sources/views/subviews/gallery/parts/galleryPager.js
@@ -5,12 +5,13 @@ import util from "../../../../utils/util";
 let dataviewId;
 
 function createPager({height, width, css, template}) {
+	const combinedCss = `gtm-paginator${css ? ` ${css}` : ""}`;
 	return {
 		view: "pager",
 		height,
 		width,
 		master: false,
-		css,
+		css: combinedCss,
 		template,
 		on: {
 			onItemClick(id) {

diff --git a/sources/views/subviews/gallery/parts/mobileFilterPanel.js b/sources/views/subviews/gallery/parts/mobileFilterPanel.js
@@ -121,6 +121,7 @@ function getConfig(config) {
 	const filtersForm = {
 		id: ID_FILTERS_FORM,
 		name: NAME_FILTERS_FORM,
+		css: "gtm-filter",
 		view: "form",
 		paddingX: 7,
 		margin: 0,
@@ -198,6 +199,7 @@ function getConfig(config) {
 	const landscapeFiltersForm = {
 		id: ID_LANDSCAPE_FILTERS_FORM,
 		name: NAME_LANDSCAPE_FILTERS_FORM,
+		css: "gtm-filter",
 		view: "form",
 		paddingX: 7,
 		margin: 0,

diff --git a/sources/views/subviews/gallery/windows/multiImageLesionWindow.js b/sources/views/subviews/gallery/windows/multiImageLesionWindow.js
@@ -377,7 +377,7 @@ function getTopSlider(topPanelID, sliderID, prevButtonID, nextButtonID) {
 							<span class="tooltip-block tooltip-block-top" style="z-index: 1000000">Multirater</span>
 						</div>` : "";
 					const lesionIcon = `<div class="${lesionIconElementClass} tooltip-container tooltip-gallery-images" style="style="width: ${imageIconDimensions.iconContainerDimensions.width}px; height: ${imageIconDimensions.iconContainerDimensions.height}px;">
-						<span class="gallery-images-button layer-group tooltip-title">
+						<span class="gtm-lesion-viewer gallery-images-button layer-group tooltip-title">
 							<svg viewBox="0 0 26 26" class="gallery-icon-svg" style="width: ${imageIconDimensions.iconContainerDimensions.width}px; height: ${imageIconDimensions.iconContainerDimensions.height}px">
 								<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#layer-group" class="gallery-icon-use"></use>
 							</svg>
@@ -402,23 +402,23 @@ function getTopSlider(topPanelID, sliderID, prevButtonID, nextButtonID) {
 								</div>
 								<div class="gallery-images-buttons" style="bottom: 0px;">
 									<div class="gallery-images-button-elem tooltip-container tooltip-gallery-images" style="width: ${imageIconDimensions.iconDimensions.width}px; height: ${imageIconDimensions.iconDimensions.height}px;">
-										<span class="gallery-images-button resize-icon tooltip-title" style="width: ${imageIconDimensions.iconContainerDimensions.width}px; height: ${imageIconDimensions.iconContainerDimensions.height}px;">
+										<span class="gtm-image-enlargement gallery-images-button resize-icon tooltip-title" style="width: ${imageIconDimensions.iconContainerDimensions.width}px; height: ${imageIconDimensions.iconContainerDimensions.height}px;">
 											<svg viewBox="0 0 14 14" class="gallery-icon-svg" style="width: ${imageIconDimensions.iconDimensions.width}px; height: ${imageIconDimensions.iconDimensions.height}px;">
 												<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#resize-icon" class="gallery-icon-use"></use>
 											</svg>
 										</span>
 										<span class="tooltip-block tooltip-block-top" style="display: block">Enlarge</span>
 									</div>
 									<div class="gallery-images-button-elem tooltip-container tooltip-gallery-images" style="width: ${imageIconDimensions.iconDimensions.width}px; height: ${imageIconDimensions.iconDimensions.height}px;">
-										<span class="gallery-images-button info-icon tooltip-title" style="width: ${imageIconDimensions.iconContainerDimensions.width}px; height: ${imageIconDimensions.iconContainerDimensions.height}px;">
+										<span class="gtm-image-metadata gallery-images-button info-icon tooltip-title" style="width: ${imageIconDimensions.iconContainerDimensions.width}px; height: ${imageIconDimensions.iconContainerDimensions.height}px;">
 											<svg viewBox="0 0 14 14" class="gallery-icon-svg" style="width: ${imageIconDimensions.iconDimensions.width}px; height: ${imageIconDimensions.iconDimensions.height}px;">
 												<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#info-icon" class="gallery-icon-use"></use>
 											</svg>
 										</span>
 										<span class="tooltip-block tooltip-block-top">Metadata</span>
 									</div>
 									<div class="gallery-images-button-elem tooltip-container tooltip-gallery-images" style="width: ${imageIconDimensions.iconDimensions.width}px; height: ${imageIconDimensions.iconDimensions.height}px;">
-										<span class="gallery-images-button batch-icon tooltip-title" style="width: ${imageIconDimensions.iconContainerDimensions.width}px; height: ${imageIconDimensions.iconContainerDimensions.height}px;">
+										<span class="gtm-single-download gallery-images-button batch-icon tooltip-title" style="width: ${imageIconDimensions.iconContainerDimensions.width}px; height: ${imageIconDimensions.iconContainerDimensions.height}px;">
 											<svg viewBox="0 0 14 14" class="gallery-icon-svg" style="width: ${imageIconDimensions.iconDimensions.width}px; height: ${imageIconDimensions.iconDimensions.height}px;">
 												<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#batch-icon" class="gallery-icon-use"></use>
 											</svg>