Feature ga events on feature boxes

assets/js/site.js

@@ -0,0 +1,160 @@
+(() => {
+	function canTrackAnalytics() {
+		return typeof window.gtag === "function";
+	}
+
+	function getClickUrl(element) {
+		return element.getAttribute("href") || element.getAttribute("data-target") || "";
+	}
+
+	function getAnalyticsLabel(element) {
+		const explicitLabel =
+			element.dataset.homepageLabel ||
+			element.dataset.gaLabel ||
+			element.getAttribute("aria-label") ||
+			element.getAttribute("title");
+
+		if (explicitLabel) {
+			return explicitLabel.trim();
+		}
+
+		const textLabel = element.textContent.replace(/\s+/g, " ").trim();
+
+		if (textLabel) {
+			return textLabel;
+		}
+
+		const image = element.querySelector("img[alt]");
+
+		if (image && image.getAttribute("alt")) {
+			return image.getAttribute("alt").trim();
+		}
+
+		return "";
+	}
+
+	function getAnalyticsPlace(element) {
+		const homepageSection = element.closest("[data-homepage-section]");
+
+		if (homepageSection) {
+			return `homepage:${homepageSection.dataset.homepageSection}`;
+		}
+
+		if (element.closest("#global-header")) {
+			return "header";
+		}
+
+		if (element.closest("#global-footer")) {
+			return "footer";
+		}
+
+		if (element.closest("#article-footer")) {
+			return "article-footer";
+		}
+
+		return "body";
+	}
+
+	function sendAnalyticsEvent(eventName, params = {}) {
+		if (!canTrackAnalytics()) {
+			return;
+		}
+
+		window.gtag("event", eventName, {
+			page: window.location.pathname,
+			...params,
+		});
+	}
+
+	// Delegate common CTA tracking in one place instead of scattering inline handlers.
+	document.addEventListener("click", (event) => {
+		const clickTarget = event.target.closest("a, button");
+
+		if (!clickTarget) {
+			return;
+		}
+
+		if (clickTarget.classList.contains("pagefind-ui__result-link")) {
+			sendAnalyticsEvent("search_click", {
+				page_viewed: clickTarget.href,
+				result_label: getAnalyticsLabel(clickTarget),
+			});
+			return;
+		}
+
+		if (clickTarget.classList.contains("lang-select")) {
+			sendAnalyticsEvent("click_language", {
+				language: clickTarget.dataset.lang || getAnalyticsLabel(clickTarget),
+				place: getAnalyticsPlace(clickTarget),
+			});
+			return;
+		}
+
+		// Track both direct subscribe links and subscribe CTAs that open the shared modal.
+		if (
+			clickTarget.classList.contains("subscribe-link") ||
+			clickTarget.dataset.subscribeClick ||
+			clickTarget.getAttribute("data-target") === "#subscribeModal"
+		) {
+			sendAnalyticsEvent("click_subscribe", {
+				place: clickTarget.dataset.subscribeClick || getAnalyticsPlace(clickTarget),
+				click_url: getClickUrl(clickTarget),
+			});
+			return;
+		}
+
+		if (clickTarget.getAttribute("data-target") === "#searchModal") {
+			sendAnalyticsEvent("click_search_open", {
+				place: getAnalyticsPlace(clickTarget),
+			});
+			return;
+		}
+
+		const homepageSection = clickTarget.closest("[data-homepage-section]");
+
+		if (homepageSection) {
+			const clickLabel = getAnalyticsLabel(clickTarget);
+
+			if (!clickLabel) {
+				return;
+			}
+
+			sendAnalyticsEvent("click_homepage_link", {
+				homepage_section: homepageSection.dataset.homepageSection,
+				homepage_label: clickLabel,
+				click_url: getClickUrl(clickTarget),
+			});
+			return;
+		}
+
+		if (clickTarget.classList.contains("link-track")) {
+			sendAnalyticsEvent("click_topic_link", {
+				click_url: getClickUrl(clickTarget),
+				click_label: getAnalyticsLabel(clickTarget),
+			});
+			return;
+		}
+
+		const navigationRoot = clickTarget.closest("#global-header, #global-footer");
+		const clickUrl = getClickUrl(clickTarget);
+
+		if (
+			navigationRoot &&
+			clickUrl &&
+			clickUrl !== "#" &&
+			!clickTarget.hasAttribute("data-toggle")
+		) {
+			const clickLabel = getAnalyticsLabel(clickTarget);
+
+			if (!clickLabel) {
+				return;
+			}
+
+			sendAnalyticsEvent("click_navigation", {
+				navigation_region: navigationRoot.id === "global-header" ? "header" : "footer",
+				navigation_label: clickLabel,
+				click_url: clickUrl,
+			});
+		}
+	});
+})();

themes/dohmh/layouts/404.html

@@ -1,104 +1,102 @@
 {{- define "main" -}}
 
 <article class="container-fluid overflow-hidden" id="primary-content" data-pagefind-ignore="all">
-
+  
   <div class="row">
     <div class="col-md-10 col-sm-12 mx-auto">
-
+      
       <!--start main column-->
-        <div class="chunk row my-4 mb-6" id="main404">
-            <div class="col-9 mx-auto mb-6">
-                <h1>Oops!</h1>
-                <p>This isn't a page on this site. </p>
-                <p>
-                    {{- with .Site.GetPage "_index.md" -}}
-                    You'll be redirected to the <a href="{{ .RelPermalink }}">
-                        Environment and Health Data Portal Home Page</a> in <span id="sec">a few</span> seconds.{{- end -}}</p>
+      <div class="chunk row my-4 mb-6" id="main404">
+        <div class="col-9 mx-auto mb-6">
+          <h1>Oops!</h1>
+          <p>This isn't a page on this site. </p>
+          <p>
+            {{- with .Site.GetPage "_index.md" -}}
+            You'll be redirected to the <a href="{{ .RelPermalink }}">
+              Environment and Health Data Portal Home Page</a> in <span id="sec">a few</span> seconds.{{- end -}}</p>
             </div>
-        </div>
-
-        <div class="chunk row my-4 hide mb-6" id="redirectBeta">
+          </div>
+          
+          <div class="chunk row my-4 hide mb-6" id="redirectBeta">
             <div class="col-9 mx-auto mb-6">
               <h1>Time to update your bookmarks!</h1>
               <p>We're no longer at <code class="text-secondary">/beta</code>. We'll send you to your correct URL.</p>
-
+              
             </div>
-
+
+          </div>
+
+
+
         </div>
-
-
-
-    </div>
-    <!--end main column-->
-  </div>
-
-<script>
-// ---------- Get URL, and hide page content options -------------------------------------- // 
-
- var url = window.location.href                              // use this when live
-
-// var url = 'http://localhost:1313/IndicatorPublic/beta'   // test URL
-
-var chunks = document.querySelectorAll('.chunk')
-
-chunks.forEach(x => x.classList.add('hide'))
-
-
-// ---------- does the URL include beta? ---------- // 
-
-url.includes("beta") ? removeBeta(url) : redirectHome()
-
-
-// ----------  remove /beta from URL and redirect to otherwise same URL -------------------- // 
-
-function removeBeta(x) {
-  // expose page content
-  document.getElementById('redirectBeta').classList.remove('hide')
-  //console.log('It is a beta URL')
-
-  // remove beta from URL
-  url = x.replace('/beta','')
-  // console.log('new url: ', url)
-
-  // send to new location
-  setTimeout(() => {
-    window.location.href = url
-  }, 2000)
-}
-
-// ----------  redirect to Home Page -------------------------------------------------------- // 
-
-function redirectHome() {
-  // expose content
-  document.getElementById('main404').classList.remove('hide')
-
-  // start countdown
-  countDown(5)
-}
-
-
-function countDown(x) {
-
-  if (x > 0) {
-    var print = document.getElementById('sec')
-    print.innerHTML = x
-    var oneLess = x - 1
-    setTimeout(() => {
-      countDown(oneLess)
-    }, 1000)
-
-  } else {
-    sendHome()
-  }
-}
-
-function sendHome() {
-  setTimeout(() => {
-    window.location.href = {{ relURL "" }}
-  }, 1000)
-}
-
-</script>
-
-</article>
-{{- end -}}
+        <!--end main column-->
+      </div>
+
+      <script>
+        // ---------- Get URL, and hide page content options -------------------------------------- // 
+
+        var url = window.location.href                              // use this when live
+
+        var chunks = document.querySelectorAll('.chunk')
+
+        chunks.forEach(x => x.classList.add('hide'))
+
+
+        // ---------- does the URL include beta? ---------- // 
+
+        url.includes("beta") ? removeBeta(url) : redirectHome()
+
+
+        // ----------  remove /beta from URL and redirect to otherwise same URL -------------------- // 
+
+        function removeBeta(x) {
+          // expose page content
+          document.getElementById('redirectBeta').classList.remove('hide')
+          //console.log('It is a beta URL')
+
+          // remove beta from URL
+          url = x.replace('/beta','')
+          // console.log('new url: ', url)
+
+          // send to new location
+          setTimeout(() => {
+            window.location.href = url
+          }, 2000)
+        }
+
+        // ----------  redirect to Home Page -------------------------------------------------------- // 
+
+        function redirectHome() {
+          // expose content
+          document.getElementById('main404').classList.remove('hide')
+
+          // start countdown
+          countDown(5)
+        }
+
+
+        function countDown(x) {
+
+          if (x > 0) {
+            var print = document.getElementById('sec')
+            print.innerHTML = x
+            var oneLess = x - 1
+            setTimeout(() => {
+              countDown(oneLess)
+            }, 1000)
+
+          } else {
+            sendHome()
+          }
+        }
+
+        function sendHome() {
+          setTimeout(() => {
+            window.location.href = {{ relURL "" }}
+          }, 1000)
+        }
+
+      </script>
+
+    </article>
+    {{- end -}}

themes/dohmh/layouts/data-stories/single.html

@@ -62,7 +62,7 @@ <h1 class="h2 data-stories mb-3"><i class="fas fa-passport" aria-hidden="true" s
                     <ul class="extensible-list text-muted mt-3">
                         <li>
                             <p class="text-muted" >
-                                <span class="fa fa-envelope"></span> Like this story? <a href={{ relURL "about/subscribe" }} class="subscribe-link"> Sign up to find out when we post something new.</a></p> 
+                                <span class="fa fa-envelope"></span> Like this story? <a href={{ relURL "about/subscribe" }} class="subscribe-link" data-subscribe-click="data-story"> Sign up to find out when we post something new.</a></p> 
                         </li>
                     </ul>
                 </div>