Add analytics tracking to download buttons

Integrates Fathom analytics by adding unique goal IDs to each DownloadButton instance and triggering events on click. Updates DownloadButton to accept an 'id' prop and report downloads, and modifies download instruction components to pass the appropriate goal IDs.
Stefterv · Sep 15, 2025 · Sep 15, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025
commit 2cc24df3034f91dccc1df09d95e3e14a99bfba17
diff --git a/src/components/download/Download.js b/src/components/download/Download.js
@@ -3,12 +3,13 @@ import { useVersionOrLatest } from "./Version";
 import Button from "components/Button";
 import { usePlatform } from "./Platform";
 import { useAssets } from "./Releases";
+import { useGoal } from "gatsby-plugin-fathom";
 
-export default function DownloadButton({ arch, format = "zip", children }) {
+export default function DownloadButton({ arch, format = "zip", id, children }) {
     const version = useVersionOrLatest();
     const platform = usePlatform();
 
-    // TODO: Report the download to analytics
+    const submitEvent = useGoal(id)
 
     const assets = useAssets();
 
@@ -19,10 +20,12 @@ export default function DownloadButton({ arch, format = "zip", children }) {
 
 
     return (
-        <Button href={downloadUrl} variant="animate1" size="large" download>
-            {children || <>
-                Download {version} for {platform.title} ({arch})
-            </>}
-        </Button>
+        <div onClick={() => submitEvent()} >
+            <Button href={downloadUrl} variant="animate1" size="large" download>
+                {children || <>
+                    Download {version} for {platform.title} ({arch})
+                </>}
+            </Button>
+        </div>
     )
 }
diff --git a/src/components/download/Switcher.js b/src/components/download/Switcher.js
@@ -15,10 +15,12 @@ export default function Switcher() {
 
         <ul className={classNames(grid.col, styles.container)}>
             {platforms.map(node => (
-                <li key={node.name} className={node.name === current.name ? classNames(styles.active) : undefined}>
-                    <PlatformIcon platform={node} />
-                    <a href={`/download/${node.name}/${version}`}>{node.title}</a>
-                </li>
+                <a href={`/download/${node.name}/${version}`} key={node.name}>
+                    <li className={node.name === current.name ? classNames(styles.active) : undefined}>
+                        <PlatformIcon platform={node} />
+                        {node.title}
+                    </li>
+                </a>
             ))}
         </ul>
     )

diff --git a/src/components/download/instructions/LinuxSnap.js b/src/components/download/instructions/LinuxSnap.js
@@ -14,13 +14,13 @@ export default function LinuxSnap() {
             <li>Download Processing
                 {assets.length > 1 &&
                     <div className={classNames(styles.downloads)}>
-                        <DownloadButton arch="aarch64">ARM</DownloadButton>
-                        <DownloadButton arch="x64">x64</DownloadButton>
+                        <DownloadButton id="TXVODVYO" arch="aarch64">ARM</DownloadButton>
+                        <DownloadButton id="HHYWFK7G" arch="x64">x64</DownloadButton>
                     </div>
                 }
                 {assets.length == 1 &&
                     <div className={classNames(styles.downloads)}>
-                        <DownloadButton>x64</DownloadButton>
+                        <DownloadButton id="HHYWFK7G">x64</DownloadButton>
                     </div>
                 }
             </li>

diff --git a/src/components/download/instructions/LinuxZip.js b/src/components/download/instructions/LinuxZip.js
@@ -14,13 +14,13 @@ export default function LinuxZip() {
             <li>Download Processing
                 {assets.length > 1 &&
                     <div className={classNames(styles.downloads)}>
-                        <DownloadButton arch="aarch64">Apple Silicon</DownloadButton>
-                        <DownloadButton arch="x64">Intel</DownloadButton>
+                        <DownloadButton id="TXVODVYO" arch="aarch64">Apple Silicon</DownloadButton>
+                        <DownloadButton id="HHYWFK7G" arch="x64">Intel</DownloadButton>
                     </div>
                 }
                 {assets.length == 1 &&
                     <div className={classNames(styles.downloads)}>
-                        <DownloadButton>Intel Only</DownloadButton>
+                        <DownloadButton id="HHYWFK7G">Intel Only</DownloadButton>
                     </div>
                 }
             </li>

diff --git a/src/components/download/instructions/MacOSDMG.js b/src/components/download/instructions/MacOSDMG.js
@@ -11,8 +11,8 @@ export default function MacOSDMG() {
         <ol>
             <li>Download Processing
                 <div className={classNames(styles.downloads)}>
-                    <DownloadButton format="dmg" arch="aarch64">Apple Silicon</DownloadButton>
-                    <DownloadButton format="dmg" arch="x64">Intel</DownloadButton>
+                    <DownloadButton format="dmg" id="IWSPGL5F" arch="aarch64">Apple Silicon</DownloadButton>
+                    <DownloadButton format="dmg" id="VQUBVEQR" arch="x64">Intel</DownloadButton>
                 </div>
                 <a href="#faq-architecture" style={{ color: "var(--darkgray)" }}>Which version do I need?</a>
             </li>

diff --git a/src/components/download/instructions/MacOSZip.js b/src/components/download/instructions/MacOSZip.js
@@ -14,13 +14,13 @@ export default function MacOSZip() {
             <li>Download Processing
                 {assets.length > 1 &&
                     <div className={classNames(styles.downloads)}>
-                        <DownloadButton arch="aarch64">Apple Silicon</DownloadButton>
-                        <DownloadButton arch="x64">Intel</DownloadButton>
+                        <DownloadButton id="IWSPGL5F" arch="aarch64">Apple Silicon</DownloadButton>
+                        <DownloadButton id="VQUBVEQR" arch="x64">Intel</DownloadButton>
                     </div>
                 }
                 {assets.length == 1 &&
                     <div className={classNames(styles.downloads)}>
-                        <DownloadButton>Intel Only</DownloadButton>
+                        <DownloadButton id="VQUBVEQR">Intel Only</DownloadButton>
                     </div>
                 }
             </li>

diff --git a/src/components/download/instructions/WindowsMSI.js b/src/components/download/instructions/WindowsMSI.js
@@ -10,7 +10,7 @@ export default function WindowsMSI() {
         <ol>
             <li>Download Processing
                 <div className={classNames(downloads)}>
-                    <DownloadButton format="msi" arch="x64">Download</DownloadButton>
+                    <DownloadButton id="CIMDWXJV" format="msi" arch="x64">Download</DownloadButton>
                 </div>
             </li>
             <li>Open the .msi file</li>

diff --git a/src/components/download/instructions/WindowsZip.js b/src/components/download/instructions/WindowsZip.js
@@ -12,7 +12,7 @@ export default function WindowsZip() {
         <ol>
             <li>Download Processing (zip)
                 <div className={classNames(downloads)}>
-                    <DownloadButton>Download</DownloadButton>
+                    <DownloadButton id="CIMDWXJV">Download</DownloadButton>
                 </div>
             </li>
         </ol>