From c001f7b625f29d9cf6f0204c9f2a7062cc9e8215 Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <hi@enriqueortiz.dev>
Date: Thu, 27 Aug 2020 09:48:17 -0400
Subject: [PATCH] Add analytics

---
 public/index.html                       | 28 +++++++++++++++++++++----
 src/components/Account/AccountModule.js | 14 ++++++++++++-
 src/lib/trackEvent.js                   | 14 +++++++++++++
 3 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/trackEvent.js
diff --git a/public/index.html b/public/index.html
index 2659c59..4001ca8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Aragon Conviction Funding Pilot"
-    />
+    <meta name="description" content="Aragon Conviction Funding Pilot" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -29,6 +26,29 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="text/javascript">
+      var Countly = Countly || {}
+      Countly.q = Countly.q || []
+      //provide countly initialization parameters
+      Countly.app_key = '5f46fd48e09eccfadce0399b90b62356f4bc7ecc'
+      Countly.url = 'https://analytics.aragon.org/'
+      Countly.inactivity_time = 10
+      Countly.q.push(['track_sessions'])
+      Countly.q.push(['track_pageview'])
+      Countly.q.push(['track_clicks'])
+      Countly.q.push(['track_errors'])
+      ;(function() {
+        var cly = document.createElement('script')
+        cly.type = 'text/javascript'
+        cly.async = true
+        cly.src = 'https://analytics.aragon.org/sdk/web/countly.min.js'
+        cly.onload = function() {
+          Countly.init()
+        }
+        var s = document.getElementsByTagName('script')[0]
+        s.parentNode.insertBefore(cly, s)
+      })()
+    </script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/Account/AccountModule.js b/src/components/Account/AccountModule.js
index db531e4..b7663c8 100644
--- a/src/components/Account/AccountModule.js
+++ b/src/components/Account/AccountModule.js
@@ -9,6 +9,7 @@ import ScreenProviders from './ScreenProviders'
 import ScreenConnected from './ScreenConnected'
 import ScreenConnecting from './ScreenConnecting'
 import HeaderPopover from '../Header/HeaderPopover'
+import { trackEvent } from '../../lib/trackEvent'
 
 import { getUseWalletProviders } from '../../lib/web3-utils'
 
@@ -56,7 +57,18 @@ function AccountModule({ compact }) {
 
   const activate = useCallback(
     async providerId => {
-      await wallet.connect(providerId)
+      // This will just return a promises that resolves.
+      // We should update use-wallet to return a boolean on
+      // whether this was successful so we don't have to wait
+      // until a next render to figure out the status.
+      const ok = await wallet.connect(providerId)
+      if (ok) {
+        trackEvent('web3_connect', {
+          segmentation: {
+            provider: providerId,
+          },
+        })
+      }
     },
     [wallet]
   )
diff --git a/src/lib/trackEvent.js b/src/lib/trackEvent.js
new file mode 100644
index 0000000..6abf553
--- /dev/null
+++ b/src/lib/trackEvent.js
@@ -0,0 +1,14 @@
+export function trackEvent(event, options) {
+  const countly = window.Countly
+  if (countly?.q) {
+    // See https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#custom-events
+    countly.q.push([
+      'add_event',
+      {
+        key: event,
+        count: 1,
+        ...options,
+      },
+    ])
+  }
+}
