Use Vue Analytics to track everything

Eclipse-Phase-Unofficial · Jun 10, 2019 · 8c51fbb · 8c51fbb
1 parent 1c35a28
commit 8c51fbb
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 93 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
   "dependencies": {
     "uikit": "^3.1.5",
     "vue": "^2.6.10",
+    "vue-analytics": "^5.17.0",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.1"
   }

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -7,16 +7,14 @@ require('jquery-ui/ui/widgets/tooltip');
 //UiKit
 require('uikit');
 
-//Google Analytics
-require('./googleAnalytics').init();
-
 //Background slide show
 require('./background').init();
 
 //Vue and associated pieces
 const Vue = require('vue');
 const Vuex = require('vuex');
 const VueRouter = require('vue-router').default;
+import VueAnalytics from 'vue-analytics';
 
 Vue.use(Vuex);
 Vue.use(VueRouter);
@@ -63,6 +61,15 @@ const router = new VueRouter({
     ],
 });
 
+Vue.use(VueAnalytics, {
+    //If the variable isn't set dynamically, try the compiled in version.  If that fails, then fall back to a safe default.
+    id: window.env.MIX_GOOGLE_ANALYTICS_ID || process.env.MIX_GOOGLE_ANALYTICS_ID || 'UA-463340-1',
+    // debug: {
+    //     enabled: true,
+    //     sendHitTask: false,
+    // },
+    router,
+});
 
 //Do an initial check on the creator during the first page load
 //This must be done here, so we can wait for the asynchronous call to complete before finishing routing

diff --git a/resources/js/components/MainMenu.vue b/resources/js/components/MainMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="mainMenu">
         <a href="/api/creator/save">
-            <button class="popupButton">
+            <button @click="$ga.event('character', 'save')" class="popupButton">
                 Save
             </button>
         </a>
@@ -20,8 +20,16 @@
             </button>
             <div class='dropdown-content'>
                 <ul>
-                    <li><a id="exportPdfButton" href="/export/pdf" target="_blank">PDF</a></li>
-                    <li><a id="exportTxtButton" href="/export/txt" target="_blank">TXT</a></li>
+                    <li>
+                        <a @click="$ga.event('character', 'export', 'pdf')" href="/export/pdf" target="_blank">
+                            PDF
+                        </a>
+                    </li>
+                    <li>
+                        <a @click="$ga.event('character', 'export', 'txt')" href="/export/txt" target="_blank">
+                            TXT
+                        </a>
+                    </li>
                 </ul>
             </div>
         </div>

diff --git a/resources/js/components/modals/About.vue b/resources/js/components/modals/About.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" class="uk-flex-top" v-on:toggle="shown" uk-modal>
+    <div :id="id" class="uk-flex-top" v-on:toggle="toggled" uk-modal>
         <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical game-style">
             <button class="uk-modal-close-default" type="button" uk-close></button>
             <a href="https://github.com/Eclipse-Phase-Unofficial/ep-character-creator/"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
@@ -59,10 +59,12 @@
             }
         },
         methods: {
-            // This happens whenever the Modal is shown (via UiKit)
-            shown: function (event) {
-                ga('set', 'page', '/about');
-                ga('send', 'pageview');
+            // This happens whenever the Modal is shown/hidden (via UiKit)
+            toggled: function (event) {
+                //This is run before uk-open is applied, so the absence means shown
+                if(!this.$el.classList.contains('uk-open')) {
+                    this.$ga.page('/about');
+                }
                 //Only do this once per run
                 //TODO:  This could be done in VueX and used everywhere
                 if (!this.version) {

diff --git a/resources/js/components/modals/LoadDialog.vue b/resources/js/components/modals/LoadDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" class="uk-flex-top" v-on:toggle="shown" uk-modal>
+    <div :id="id" class="uk-flex-top" v-on:toggle="toggled" uk-modal>
         <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical game-style" style="min-width: 80ch">
             <button class="uk-modal-close-default" type="button" uk-close></button>
             <div class="uk-text-center">
@@ -48,7 +48,7 @@
     import urls from "../../urls";
 
     export default {
-        name: "SaveDialog",
+        name: "LoadDialog",
         props: {
             id: String
         },
@@ -62,10 +62,12 @@
             }
         },
         methods: {
-            // This happens whenever the Modal is shown (via UiKit)
-            shown: function (event) {
-                ga('set', 'page', '/load');
-                ga('send', 'pageview');
+            // This happens whenever the Modal is shown/hidden (via UiKit)
+            toggled: function (event) {
+                //This is run before uk-open is applied, so the absence means shown
+                if(!this.$el.classList.contains('uk-open')) {
+                    this.$ga.page('/load');
+                }
             },
             loadCharacter: function (event) {
                 // Max size of 8MB.  If we're hitting this limit there's a problem.
@@ -87,11 +89,13 @@
                         })
                             .then(response => {
                                 endLoading();
+                                this.$ga.event('character', 'load', 'success');
                                 //TODO:  Don't reload, just close everything and update as appropriate on load finishing
                                 location.reload();
                             })
                             .catch(error => {
                                 endLoading();
+                                this.$ga.event('character', 'load', 'failure');
                                 console.log('Error Loading Character');
                                 console.log(error);
                                 if (error.response){
@@ -100,6 +104,7 @@
                             });
                     }).catch(error => {
                         endLoading();
+                    this.$ga.event('character', 'load', 'badFile');
                         alert(error.message);
                 });
             }

diff --git a/resources/js/components/modals/NewCharacterModal.vue b/resources/js/components/modals/NewCharacterModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" class="uk-flex-top" v-on:toggle="shown" uk-modal>
+    <div :id="id" class="uk-flex-top" v-on:toggle="toggled" uk-modal>
         <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical game-style" style="min-width: 80ch">
             <button class="uk-modal-close-default" type="button" uk-close></button>
             <div class="uk-text-center">
@@ -38,10 +38,12 @@
             'creationPoints': 1000,
         }},
         methods: {
-            // This happens whenever the Modal is shown (via UiKit)
-            shown: function (event) {
-                ga('set', 'page', '/new');
-                ga('send', 'pageview');
+            // This happens whenever the Modal is shown/hidden (via UiKit)
+            toggled: function (event) {
+                //This is run before uk-open is applied, so the absence means shown
+                if(!this.$el.classList.contains('uk-open')) {
+                    this.$ga.page('/new');
+                }
             },
             newCharacter: function (event) {
                 startLoading();
@@ -50,11 +52,13 @@
                 })
                     .then(response => {
                         endLoading();
+                        this.$ga.event('character', 'new', 'success');
                         //TODO:  Don't reload, just close everything and update as appropriate on load finishing
                         location.reload();
                     })
                     .catch(error => {
                         endLoading();
+                        this.$ga.event('character', 'new', 'failure');
                         console.log('Error Creating Character');
                         console.log(error);
                         if (error.response){

diff --git a/resources/js/components/modals/ValidationCheck.vue b/resources/js/components/modals/ValidationCheck.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" class="uk-flex-top" v-on:toggle="shown" uk-modal>
+    <div :id="id" class="uk-flex-top" v-on:toggle="toggled" uk-modal>
         <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical game-style" style="min-width: 80ch">
             <button class="uk-modal-close-default" type="button" uk-close></button>
             <div class="uk-text-center">
@@ -45,19 +45,21 @@
             }
         }},
         methods: {
-            // This happens whenever the Modal is shown (via UiKit)
-            shown: function (event) {
-                ga('set', 'page', '/validate');
-                ga('send', 'pageview');
-                axios.get(urls.validate)
-                    .then(response => {
-                        this.isValid = response.data.isValid;
-                        this.validators = response.data.validators;
-                    })
-                    .catch(error => {
-                        console.log('Error Validating data');
-                        console.log(error)
-                    });
+            // This happens whenever the Modal is shown/hidden (via UiKit)
+            toggled: function (event) {
+                //This is run before uk-open is applied, so the absence means shown
+                if(!this.$el.classList.contains('uk-open')) {
+                    this.$ga.page('/validate');
+                    axios.get(urls.validate)
+                        .then(response => {
+                            this.isValid = response.data.isValid;
+                            this.validators = response.data.validators;
+                        })
+                        .catch(error => {
+                            console.log('Error Validating data');
+                            console.log(error)
+                        });
+                }
             }
         }
     }

diff --git a/resources/js/googleAnalytics.js b/resources/js/googleAnalytics.js
diff --git a/resources/views/main.blade.php b/resources/views/main.blade.php
@@ -50,9 +50,8 @@ function createDataURI(string $file, string $mimeType = null){
         {{--<script src="{{mix('js/app.js')}}" type="text/javascript"></script>--}}
         {{--<script src="{{mix('js/legacy.js')}}" type="text/javascript"></script>--}}
         <script>
-            var process = {};
-            process.env = {};
-            process.env.MIX_GOOGLE_ANALYTICS_ID = "{{config('epcc.googleAnalyticsId')}}";
+            window.env = {};
+            window.env.MIX_GOOGLE_ANALYTICS_ID = "{{config('epcc.googleAnalyticsId')}}";
             <?php
             //Load order is important here
             include public_path('js/manifest.js');

diff --git a/webpack.mix.js b/webpack.mix.js
@@ -19,6 +19,7 @@ mix.setPublicPath('public/')
         'vue',
         'vue-router',
         'vuex',
+        'vue-analytics',
         'uikit'
         // 'vegas', //Causes Errors if here!
     ])