https://nkdagility.com/js/google-analytics.js

1document.addEventListener("DOMContentLoaded", function () {
2  // Enhanced dynamic GA event tracking using GTM dataLayer
3  document.querySelectorAll("[data-ga-event]").forEach(function (element) {
4    element.addEventListener("click", function (e) {
5      // Check if dataLayer exists (GTM)
6      if (typeof window.dataLayer !== "undefined") {
7        // Build event parameters dynamically from data attributes
8        const eventData = {
9          event: this.dataset.gaEvent,
10        };
11
12        // Standard parameters
13        if (this.dataset.gaCategory) eventData.event_category = this.dataset.gaCategory;
14        if (this.dataset.gaLabel) eventData.event_label = this.dataset.gaLabel;
15        if (this.dataset.gaValue) eventData.value = parseInt(this.dataset.gaValue);
16
17        // Allow any custom parameters with data-ga-param-* pattern
18        Object.keys(this.dataset).forEach((key) => {
19          if (key.startsWith("gaParam")) {
20            const paramName = key
21              .replace("gaParam", "")
22              .toLowerCase()
23              .replace(/([A-Z])/g, "_$1");
24            eventData[paramName] = this.dataset[key];
25          }
26        });
27
28        // Send the event via dataLayer
29        window.dataLayer.push(eventData);
30
31        // Log for debugging in development
32        if (window.location.hostname === "localhost") {
33          console.log("GTM Event pushed to dataLayer:", eventData);
34        }
35      }
36      // Fallback to gtag if available (for direct GA4 implementations)
37      else if (typeof gtag !== "undefined") {
38        const eventParams = {};

39        if (this.dataset.gaCategory) eventParams.event_category = this.dataset.gaCategory;
40        if (this.dataset.gaLabel) eventParams.event_label = this.dataset.gaLabel;
41        if (this.dataset.gaValue) eventParams.value = parseInt(this.dataset.gaValue);
42
43        Object.keys(this.dataset).forEach((key) => {
44          if (key.startsWith("gaParam")) {
45            const paramName = key
46              .replace("gaParam", "")
47              .toLowerCase()
48              .replace(/([A-Z])/g, "_$1");
49            eventParams[paramName] = this.dataset[key];
50          }
51        });
52
53        gtag("event", this.dataset.gaEvent, eventParams);
54
55        if (window.location.hostname === "localhost") {
56          console.log("GA Event:", this.dataset.gaEvent, eventParams);
57        }
58      }
59    });
60  });
61
62  // Also handle dynamically added elements
63  document.addEventListener("click", function (e) {
64    const element = e.target.closest("[data-ga-event]");
65    if (element) {
66      // Prevent duplicate events from the above listener
67      if (element.hasAttribute("data-ga-processed")) return;
68
69      if (typeof window.dataLayer !== "undefined") {
70        const eventData = {
71          event: element.dataset.gaEvent,
72        };
73
74        if (element.dataset.gaCategory) eventData.event_category = element.dataset.gaCategory;
75        if (element.dataset.gaLabel) eventData.event_label = element.dataset.gaLabel;
76        if (element.dataset.gaValue) eventData.value = parseInt(element.dataset.gaValue);
77
78        Object.keys(element.dataset).forEach((key) => {
79          if (key.startsWith("gaParam")) {
80            const paramName = key
81              .replace("gaParam", "")
82              .toLowerCase()
83              .replace(/([A-Z])/g, "_$1");
84            eventData[paramName] = element.dataset[key];
85          }
86        });
87
88        window.dataLayer.push(eventData);
89
90        if (window.location.hostname === "localhost") {
91          console.log("GTM Event pushed to dataLayer (dynamic):", eventData);
92        }
93      } else if (typeof gtag !== "undefined") {
94        const eventParams = {};

95        if (element.dataset.gaCategory) eventParams.event_category = element.dataset.gaCategory;
96        if (element.dataset.gaLabel) eventParams.event_label = element.dataset.gaLabel;
97        if (element.dataset.gaValue) eventParams.value = parseInt(element.dataset.gaValue);
98
99        Object.keys(element.dataset).forEach((key) => {
100          if (key.startsWith("gaParam")) {
101            const paramName = key
102              .replace("gaParam", "")
103              .toLowerCase()
104              .replace(/([A-Z])/g, "_$1");
105            eventParams[paramName] = element.dataset[key];
106          }
107        });
108
109        gtag("event", element.dataset.gaEvent, eventParams);
110      }
111    }
112  });
113});