✨ Add: goatcounter (#75)

* Add goatcounter * add counter url to conf * fix * change how goatcouter script is loaded * remove test log * fix * Add environmental variables Co-authored-by: alavarello <alavarello@itba.edu.ar>
poap-xyz · Jul 27, 2021 · 52cad5e · 52cad5e
1 parent 3b1f5c4
commit 52cad5e
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 33 deletions.
diff --git a/frontend/.env.template b/frontend/.env.template
@@ -0,0 +1,2 @@
+VUE_APP_GOAT_COUNTER=__add_me__
+INFURA_ID=__add_me__
diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
@@ -86,6 +86,7 @@ module.exports = function (ctx) {
       env: {
         INFURA_ID: JSON.stringify(process.env.INFURA_ID),
         BUILD_ENV: JSON.stringify(process.env.NODE_ENV),
+        VUE_APP_GOAT_COUNTER:  JSON.stringify(process.env.VUE_APP_GOAT_COUNTER),
       },
     },
 

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -23,6 +23,12 @@ export default {
     const { userAddress } = window.localStorage;
     let tokens = [];
 
+    const script = document.createElement('script');
+    script.src = '//gc.zgo.at/count.js';
+    script.async = true;
+    script.setAttribute('data-goatcounter', process.env.VUE_APP_GOAT_COUNTER);
+    document.getElementsByTagName('head')[0].appendChild(script);
+
     // Get user's POAP tokens
     if (userAddress && JSON.parse(userAddress)) {
       const poapTokensUrl = `https://api.poap.xyz/actions/scan/${JSON.parse(userAddress)}`;

diff --git a/frontend/src/components/PollValidEventsCollapse/PollValidEventsCollapse.vue b/frontend/src/components/PollValidEventsCollapse/PollValidEventsCollapse.vue
@@ -1,4 +1,3 @@
-
 <template>
   <!-- Show valid events -->
   <div class="valid-events-container">

diff --git a/frontend/src/index.template.html b/frontend/src/index.template.html
@@ -1,31 +1,31 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title><%= htmlWebpackPlugin.options.productName %></title>
-
-    <meta property="og:title" content="POAP Vote" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://poap.vote" />
-    <meta property="og:image" content="https://www.poap.xyz/POAP.f74a7300.svg" />
-    <meta property="og:image:alt" content="The POAP logo" />
-    <meta property="og:description" content="A sybil-resistant voting engine for anyone to run polls using Ethereum and POAP" />
-
-    <meta charset="utf-8">
-    <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
-
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">
-    <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
-    <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
-  </head>
-  <body>
-    <!-- DO NOT touch the following DIV -->
-    <div id="q-app"></div>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= htmlWebpackPlugin.options.productName %></title>
+
+    <meta property="og:title" content="POAP Vote" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://poap.vote" />
+    <meta property="og:image" content="https://www.poap.xyz/POAP.f74a7300.svg" />
+    <meta property="og:image:alt" content="The POAP logo" />
+    <meta property="og:description" content="A sybil-resistant voting engine for anyone to run polls using Ethereum and POAP" />
+
+    <meta charset="utf-8">
+    <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
+    <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
+  </head>
+  <body>
+    <!-- DO NOT touch the following DIV -->
+    <div id="q-app"></div>
+  </body>
+</html>
diff --git a/frontend/src/pages/CreatePoll.vue b/frontend/src/pages/CreatePoll.vue
@@ -58,7 +58,6 @@ export default {
 };
 </script>
 
-
 <style lang="scss" scoped>
 .create-poll-wrapper {
   @media (min-width: 768px) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VUE_APP_GOAT_COUNTER=__add_me__
		INFURA_ID=__add_me__
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,6 +86,7 @@ module.exports = function (ctx) { @@
           env: {
             INFURA_ID: JSON.stringify(process.env.INFURA_ID),
             BUILD_ENV: JSON.stringify(process.env.NODE_ENV),
+            VUE_APP_GOAT_COUNTER:  JSON.stringify(process.env.VUE_APP_GOAT_COUNTER),
           },
         },
@@ Expand Down @@