Adds download analytics (#650)

website/components/downloader/cards/index.jsx

@@ -1,6 +1,9 @@
 import Tabs from '@hashicorp/react-tabs'
-
-import { prettyOs, prettyArch } from 'components/downloader/utils/downloader'
+import {
+  prettyOs,
+  prettyArch,
+  trackDownload,
+} from 'components/downloader/utils/downloader'
 import styles from './style.module.css'
 
 export default function DownloadTabs({
@@ -58,6 +61,10 @@ function Cards({
   const hasPackageManager = Boolean(packageManagers)
   const hasMultiplePackageManagers = Array.isArray(packageManagers)
 
+  function handleArchClick(arch) {
+    return () => trackDownload('boundary', version, os, arch)
+  }
+
   return (
     <>
       <div
@@ -108,7 +115,12 @@ function Cards({
               <span className={styles.version}>{version}</span>
             </div>
             {Object.entries(arches).map(([arch, url]) => (
-              <a href={url} key={arch} className={styles.downloadLink}>
+              <a
+                href={url}
+                key={arch}
+                className={styles.downloadLink}
+                onClick={handleArchClick(arch)}
+              >
                 {prettyArch(arch)}
               </a>
             ))}

website/components/downloader/release-information/index.jsx

@@ -4,6 +4,7 @@ import Dropdown from 'components/downloader/dropdown'
 import {
   prettyArch,
   prettyOs,
+  trackDownload,
   sortPlatforms,
   getVersionLabel,
   sortAndFilterReleases,
@@ -85,7 +86,13 @@ export default function ReleaseInformation({
                   <div className={styles.os}>{prettyOs(os)}</div>
                   <div>
                     {Object.entries(release).map(([arch, file]) => (
-                      <a href={file} key={arch}>
+                      <a
+                        href={file}
+                        key={arch}
+                        onClick={() =>
+                          trackDownload('boundary', version, os, arch)
+                        }
+                      >
                         {prettyArch(arch)}
                       </a>
                     ))}

website/components/downloader/utils/downloader.js

@@ -121,3 +121,19 @@ export function sortPlatforms(releaseData) {
       }, {})
   )
 }
+
+export function trackDownload(product, version, _os, _arch) {
+  const os = prettyOs(_os)
+  const arch = prettyArch(_arch)
+
+  if (window.analytics) {
+    window.analytics.track('Download', {
+      category: 'Button',
+      label: `${product} | v${version} | ${os} | ${arch}`,
+      version,
+      os,
+      architecture: arch,
+      product,
+    })
+  }
+}