app_download event now genereate

Author: MarkJamesHoward

electron/src/main/main.ts

@@ -23,8 +23,7 @@ let workingDirWatcher: fs.FSWatcher | null = null;
 let debounceTimer: NodeJS.Timeout | null = null;
 
 const analyticsConfig = {
-  measurementId:
-    process.env.GA_MEASUREMENT_ID || __GA_MEASUREMENT_ID__ || "",
+  measurementId: process.env.GA_MEASUREMENT_ID || __GA_MEASUREMENT_ID__ || "",
   apiSecret: process.env.GA_API_SECRET || __GA_API_SECRET__ || "",
   debug:
     process.env.GA_DEBUG === "1" ||

web/src/EventHandlersForDownloadButton.ts

@@ -1,15 +1,21 @@
 declare global {
   interface Window {
     gtag?: (...args: any[]) => void;
+    dataLayer?: Array<Record<string, unknown>>;
   }
 }
 
-attachDownloadTracking();
+if (document.readyState === "loading") {
+  window.addEventListener("DOMContentLoaded", attachDownloadTracking, {
+    once: true,
+  });
+} else {
+  attachDownloadTracking();
+}
 
 function attachDownloadTracking() {
-  const downloadButtons = document.querySelectorAll<HTMLElement>(
-    "[data-download-os]"
-  );
+  const downloadButtons =
+    document.querySelectorAll<HTMLElement>("[data-download-os]");
 
   if (downloadButtons.length === 0) {
     console.log("No download buttons found for tracking");
@@ -24,6 +30,15 @@ function attachDownloadTracking() {
           os,
           page_path: window.location.pathname,
         });
+      } else if (
+        window.dataLayer &&
+        typeof window.dataLayer.push === "function"
+      ) {
+        window.dataLayer.push({
+          event: "app_download",
+          os,
+          page_path: window.location.pathname,
+        });
       } else {
         console.log("gtag not available for download tracking");
       }

web/src/pages/download.astro

@@ -202,7 +202,7 @@ import AppleLogo from "../images/apple_logo_download.png";
             </script>
           </div>
 
-          <script src="../EventHandlersForDownloadButton.ts"></script>
+          <script type="module" src="../EventHandlersForDownloadButton.ts"></script>
         </div>
       </div>
     </section>

web/src/pages/index.astro

@@ -284,7 +284,7 @@ import "../styles/mimic.css";
   }
 </style>
 
-<script src="../EventHandlersForDownloadButton.ts"></script>
+<script type="module" src="../EventHandlersForDownloadButton.ts"></script>
 
 <script is:inline>
   // Fade-in on scroll for Step 1, 2, 3 sections

web/src/pages/usinglivevisualisation.astro

@@ -292,4 +292,4 @@ import GraphWithBlobHidden from "../images/graphwithblobhidden.png";
   </section>
 </Layout>
 
-<script src="../EventHandlersForDownloadButton.ts"></script>
+<script type="module" src="../EventHandlersForDownloadButton.ts"></script>