From fe52b843b04cd6ebb9ae49617b2ca0c789ea4b91 Mon Sep 17 00:00:00 2001
From: Michael Bumann <hello@michaelbumann.com>
Date: Wed, 2 Mar 2022 18:55:11 +0100
Subject: [PATCH] Track download clicks

---
 app/components/InstallExtensionButton.jsx | 8 ++++++++
 app/root.jsx                              | 1 +
 2 files changed, 9 insertions(+)

diff --git a/app/components/InstallExtensionButton.jsx b/app/components/InstallExtensionButton.jsx
index 77fd0bb..3ab8a74 100644
--- a/app/components/InstallExtensionButton.jsx
+++ b/app/components/InstallExtensionButton.jsx
@@ -26,6 +26,11 @@ const BrowserIcons = {
 const DefaultLink = "https://github.com/getAlby/lightning-browser-extension";
 
 function Install({ style }) {
+
+  function trackDownload() {
+    plausible('Download');
+  }
+
   var parser = new UAParser();
   const browser = parser.getBrowser();
   function renderIcon() {
@@ -43,6 +48,7 @@ function Install({ style }) {
         <a
           href={link}
           className="border border-black rounded-full w-32 text-center py-2"
+          onClick={trackDownload}
         >
           Install Alby
         </a>
@@ -69,6 +75,7 @@ function Install({ style }) {
       return (
         <a
           href={link}
+          onClick={trackDownload}
           className="bg-white text-black border-[3px] border-solid border-[#333333] font-secondary inline-block text-lg lg:leading-[1.875rem] font-semibold py-2 px-5 rounded-full mt-6"
         >
           {renderIcon()}
@@ -80,6 +87,7 @@ function Install({ style }) {
         <a
           href={DefaultLink}
           onClick={() => {
+            trackDownload();
             alert(
               `We currently do not yet support ${browser.name}. But maybe you can install it from source.`
             );
diff --git a/app/root.jsx b/app/root.jsx
index 9173595..b70ad7c 100644
--- a/app/root.jsx
+++ b/app/root.jsx
@@ -29,6 +29,7 @@ export default function App() {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <script defer data-domain="getalby.com" src="https://squirrel.getalby.com/js/plausible.js"></script>
+        <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
         <Meta />
         <Links />
       </head>