Merge branch 'flmnh-main' into spec-image-captions

specify · Jan 11, 2024 · 58672e7 · 58672e7
2 parents e1d8c84 + 7bccc79
commit 58672e7
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 3 deletions.
diff --git a/PortalApp/app/controller/AdvancedSearch.js b/PortalApp/app/controller/AdvancedSearch.js
@@ -34,8 +34,13 @@ Ext.define('SpWebPortal.controller.AdvancedSearch', {
 	solr: true
     },
 
+    gtmContainerId: null,
+
     init: function() {
 	//console.info("AdvancedSearch.init");
+      var settingsStore =  Ext.getStore('SettingsStore');
+      var settings = settingsStore.getAt(0);
+      this.gtmContainerId = settings.get('gtmContainerId');
 
 	this.control({
 	    'advSrch button[itemid="search-btn"]': {
@@ -153,6 +158,13 @@ Ext.define('SpWebPortal.controller.AdvancedSearch', {
 	if (filterStr.length == 0) {
 	    filterStr = "*";
 	}
+
+	if (this.gtmContainerId) {
+		window.dataLayer.push({
+			'event': 'search_query',
+			'searchQuery': filterStr
+		});
+	}
         this.searchFor('(' + filterStr + ')', images, maps, filterToMap);
     }
 });
diff --git a/PortalApp/app/controller/Detailer.js b/PortalApp/app/controller/Detailer.js
@@ -40,13 +40,15 @@ Ext.define('SpWebPortal.controller.Detailer', {
     ignoreDetailsPageChange: true,
     stdImgSize: 500,
     collectionName: '',
+		gtmContainerId: null,
 
     init: function() {
 	//console.info("Detailer.init");
 	var settingsStore =  Ext.getStore('SettingsStore');
 	var settings = settingsStore.getAt(0);
 	this.stdImgSize = settings.get('imageViewSize');
 	this.collectionName = settings.get('collectionName');
+	this.gtmContainerId = settings.get('gtmContainerId');
 
 	this.control({
 	    'actioncolumn[itemid="detail-popup-ctl"]': {
@@ -375,6 +377,14 @@ Ext.define('SpWebPortal.controller.Detailer', {
 	} else {
 	    this.popupImageSrcReady(imgRecord, [isActualSize, imgWinOwner]);
 	}
+
+	if (this.gtmContainerId) {
+		window.dataLayer.push({
+			'event': 'image_detail',
+			'attachmentId': imgRecord.data.AttachmentID,
+			'attachmentTitle': imgRecord.data.Title
+		});
+	}
     },
 
     popupDetails: function(records, showMap) {
@@ -517,6 +527,14 @@ Ext.define('SpWebPortal.controller.Detailer', {
 	} else {
 	    this.detailPopWinShown(record, showMap);
 	}  
+
+	if (this.gtmContainerId) {
+		window.dataLayer.push({
+			'event': 'record_detail',
+			'catalogNumber': record.data.catalogNumber
+		});
+	}
+
     },
 
     detailPopWinShown:  function(record, showMap) {

diff --git a/PortalApp/app/model/SettingsModel.js b/PortalApp/app/model/SettingsModel.js
@@ -62,10 +62,12 @@ Ext.define('SpWebPortal.model.SettingsModel', {
     {name: 'clusterMinimumClusterSize', type: 'int'},
     {name: 'clusterIgnoreHiddenMarkers', type: 'boolean', defaultValue: true},
     {name: 'clusterStyles', type: 'json'},
-    {name: 'displayImgCaption', type: 'boolean', defaultValue: false}
+    {name: 'displayImgCaption', type: 'boolean', defaultValue: false},
+    {name: 'gtmContainerId', type: 'string', default: null}
   ],
   validations: [
     {type: 'inclusion', field: 'defInitialView', list: ['grid', 'image', 'map']},
     {type: 'inclusion', field: 'defMapType', list: ['roadmap', 'satellite', 'hybrid', 'terrain']}
   ]
-})
+});
+
diff --git a/PortalApp/app/view/gtm.js b/PortalApp/app/view/gtm.js
@@ -0,0 +1,19 @@
+/**
+ * Google Tag Manager
+ * 
+ * Conditionally loads GTM script into page `<head>` if `gtmContainerId` has
+ * been set in `settings.json`.
+ */
+var settingsJson = await fetch('resources/config/settings.json')
+var settings = await settingsJson.json()
+var gtmContainerId = settings[0].gtmContainerId ?? null
+
+if (gtmContainerId && document.readyState !== 'loading') {
+  var script = document.createElement('script')
+  script.innerHTML = `(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','${gtmContainerId}')`
+  document.head.appendChild(script)
+}
diff --git a/PortalApp/doc/RoughGuideToWebPortalSetup.txt b/PortalApp/doc/RoughGuideToWebPortalSetup.txt
@@ -295,6 +295,7 @@ bottomMarginLeft: CSS setting for bottomBranding content.
 bottomMarginRight: CSS setting for bottomBranding content.
 bottomWidth: width in pixels of bottomBranding content.
 displayImgCaption: when set to true, the fields (as configured in imageInfoFlds, see above) will render underneath preview views and the image detail view.
+gtmContainerId: Google Tag Manager container ID.
 
 
 ###################################################################

diff --git a/PortalApp/index.html b/PortalApp/index.html
@@ -81,6 +81,9 @@
     <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyDYHJjsVAniNFUxSZnIO6pyVBxBqRt9gmw&sensor=false"></script>
     <!--script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script-->
 
+    <!-- Google Tag Manager -->
+    <script type="module" src="app/view/gtm.js"></script>
+
     <!-- Include the extjs translations -->
     <!--script type="text/javascript" src="//cdn.sencha.com/ext/gpl/4.1.1/locale/ext-lang-sv_SE.js"></script-->
 

diff --git a/PortalApp/resources/config/settings.json b/PortalApp/resources/config/settings.json
@@ -25,5 +25,6 @@
     "bottomMarginLeft": null,
     "bottomMarginRight": null,
     "bottomWidth": null,
-    "displayImgCaption": false
+    "displayImgCaption": false,
+    "gtmContainerId": null
 }]