Use gtag instead of ga

.env.development

@@ -1,3 +1,2 @@
 NODE_ENV=development
-VUE_APP_API_URI=http://127.0.0.1:14000/v1
-VUE_APP_WS_URI=ws://127.0.0.1:14000/v1/ws
+VUE_APP_API_URI=https://api.better-call.dev/v1

Makefile

@@ -4,15 +4,6 @@
 dev:
 	yarn serve
 
-white:
-	yarn serve -- --mode white
-
-test:
-	yarn serve -- --mode test
-
-api:
-	yarn serve -- --mode api
-
 image:
 	docker build -t bakingbad/bcdhub-gui:latest .
 

package.json

@@ -30,9 +30,9 @@
     "redoc": "^2.0.0-rc.45",
     "v-clipboard": "^2.2.2",
     "vue": "^2.6.10",
-    "vue-analytics": "^5.22.1",
     "vue-codemirror": "^4.0.6",
     "vue-codemirror-lite": "^1.0.4",
+    "vue-gtag": "^1.16.1",
     "vue-json-pretty": "^1.7.1",
     "vue-router": "^3.1.6",
     "vue-virtual-scroll-list": "^1.4.6",

src/components/SearchBox.vue

@@ -332,6 +332,7 @@ export default {
               if (res && res.items) {
                 this.suggests.push(...res.items);
               }
+              this.$gtag.pageview(`/suggest?text=${text}`);
             }
           })
           .catch((err) => {
@@ -341,7 +342,7 @@ export default {
           .finally(() => {
             this.isSuggestionsLoading = false;
           });
-      }, 100);
+      }, 500);
     },
     onRemoveClick(text) {
       removeHistoryItem(text);

src/components/schema/Schema.vue

@@ -221,12 +221,20 @@ export default {
       this.showCmdline = val;
     },
     simulateActionCallback() {
+      this.$gtag.event("Simulate", {
+        "event_category": this.isParameter ? "interact" : "fork",
+        "event_label": this.$router.currentRoute.fullPath
+      });
       return this.isParameter ? () => this.simulateOperation() : null;
     },
     showSuccessMessage(text) {
       this.successText = text;
     },
     rawJsonActionCallback() {
+      this.$gtag.event("Raw JSON", {
+        "event_category": this.isParameter ? "interact" : "fork",
+        "event_label": this.$router.currentRoute.fullPath
+      });
       if (this.isParameter) {
         return () => this.generateParameters(true, true)
       } else if (this.isDeploy) {
@@ -235,11 +243,19 @@ export default {
       return () => this.prepareContractToFork(true);
     },
     tezosClientActionCallback() {
+      this.$gtag.event("Tezos Client", {
+        "event_category": this.isParameter ? "interact" : "fork",
+        "event_label": this.$router.currentRoute.fullPath
+      });
       return this.isParameter
           ? () => this.generateParameters(false, true)
           : null;
     },
     beaconClientActionCallback(isLast) {
+      this.$gtag.event("Beacon Wallet", {
+        "event_category": this.isParameter ? "interact" : "fork",
+        "event_label": this.$router.currentRoute.fullPath
+      });
       if (this.isParameter) {
         return async () => {
           await this.callContract(isLast);

src/main.js

@@ -6,7 +6,8 @@ import './styles';
 
 import store from '@/store'
 import router from '@/router'
-import VueAnalytics from 'vue-analytics'
+
+import VueGtag from "vue-gtag";
 
 import * as Sentry from "@sentry/browser";
 import { Vue as VueIntegration } from "@sentry/integrations";
@@ -105,6 +106,10 @@ api.getConfig().then(response => {
   if (process.env.NODE_ENV !== "development" && config.sentry_dsn !== "") {
     Sentry.init({
       dsn: config.sentry_dsn,
+      ignoreErrors: [
+        "Don't have an RPC endpoint"
+      ],
+      attachStacktrace: true,
       integrations: [new VueIntegration({
         Vue,
         attachProps: true,
@@ -136,23 +141,11 @@ api.getConfig().then(response => {
   ]);
 
   if (config.GA_ENABLED || config.ga_enabled) {
-    Vue.use(VueAnalytics, {
-      id: "UA-160856677-1",
-      router,
-      autoTracking: {
-        pageviewTemplate(route) {
-          return {
-            page: route.name,
-            title: document.title,
-            location: window.location.href
-          }
-        }
-      },
-      debug: {
-        enabled: false,
-        sendHitTask: true
+    Vue.use(VueGtag, {
+      config: { 
+        id: "UA-160856677-1"
       }
-    });
+    }, router);
   }
 
   const isDark = localStorage.getItem('dark') ? JSON.parse(localStorage.getItem('dark')) : true;

src/router/index.js

@@ -72,7 +72,7 @@ const router = new Router({
           components: {
             default: DAppList
           },
-          name: 'dapps-list',
+          name: 'dapps_list',
           props: { default: true },
         },
         {

src/views/extended_search/ExtendedSearch.vue

@@ -306,6 +306,7 @@ export default {
 
             if (text !== this.$route.query.text) {
               this.$router.replace({ query: { text: text } });
+              this.$gtag.pageview(`/search?text=${text}`);
             }
           })
           .catch((err) => {

yarn.lock

@@ -11073,11 +11073,6 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-vue-analytics@^5.22.1:
-  version "5.22.1"
-  resolved "https://registry.yarnpkg.com/vue-analytics/-/vue-analytics-5.22.1.tgz#9d6b32da56daee1b9dfb23a267b50349a03f710f"
-  integrity sha512-HPKQMN7gfcUqS5SxoO0VxqLRRSPkG1H1FqglsHccz6BatBatNtm/Vyy8brApktZxNCfnAkrSVDpxg3/FNDeOgQ==
-
 vue-cli-plugin-vuetify@^2.0.5:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.4.5.tgz#5dfae4d78c717c400530731f0b75c0350c3b6add"
@@ -11133,6 +11128,11 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
+vue-gtag@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/vue-gtag/-/vue-gtag-1.16.1.tgz#edb2f20ab4f6c4d4d372dfecf8c1fcc8ab890181"
+  integrity sha512-5vs0pSGxdqrfXqN1Qwt0ZFXG0iTYjRMu/saddc7QIC5yp+DKgjWQRpGYVa7Pq+KbThxwzzMfo0sGi7ISa6NowA==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"