feat: track game wins and moves

storipress · May 18, 2021 · ef7d36e · ef7d36e
1 parent f8d7613
commit ef7d36e
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 32 deletions.
diff --git a/docs/.vitepress/components/GroupExample.vue b/docs/.vitepress/components/GroupExample.vue
@@ -11,8 +11,21 @@
       <code>group: '{{ list.group }}'</code>
       <br />
       <code>accept: {{ list.accept }}</code>
-      <SortableList axis="y" :group="list.group" :accept="list.accept" :block="list.block" v-model:list="list.items">
-        <SortableItem v-for="(item, index) in list.items" :key="item.id" :index="index" :item="item" />
+      <SortableList
+        axis="y"
+        :group="list.group"
+        :accept="list.accept"
+        :block="list.block"
+        v-model:list="list.items"
+        @sort-end="track('event', 'sort_end', { list_name: 'group_example' })"
+        @sort-remove="track('event', 'sort_end', { list_name: 'group_example' })"
+      >
+        <SortableItem
+          v-for="(item, index) in list.items"
+          :key="item.id"
+          :index="index"
+          :item="item"
+        />
       </SortableList>
     </div>
   </div>
@@ -25,8 +38,8 @@
 </template>
 
 <script>
-import { reactive, ref, watch } from 'vue';
-import { random, range } from './utils';
+import { ref, watch } from 'vue';
+import { random, range, track } from './utils';
 
 import SortableItem from './SortableItem.vue';
 import SortableList from './SortableList.vue';
@@ -35,8 +48,6 @@ let id = 100;
 
 const colors = ['#eb5757', '#9b51e1', '#58cbf2'];
 
-const randomColor = () => colors[random(0, colors.length - 1)];
-
 const makeList = () => {
   return [
     {
@@ -101,6 +112,7 @@ export default {
     const resetList = () => {
       lists.value = makeList();
       showWinScreen.value = false;
+      track('event', 'game_reset');
     };
 
     watch(
@@ -118,6 +130,7 @@ export default {
         if (JSON.stringify(mapped) === JSON.stringify(winning)) {
           showWinScreen.value = true;
           confetti.start();
+          track('event', 'game_win');
 
           setTimeout(() => {
             confetti.stop();
@@ -126,13 +139,14 @@ export default {
       },
       {
         deep: true,
-      }
+      },
     );
 
     return {
       lists,
       showWinScreen,
       resetList,
+      track,
     };
   },
 };

diff --git a/docs/.vitepress/components/utils.js b/docs/.vitepress/components/utils.js
@@ -21,3 +21,9 @@ export const stringsToItems = (arr) => {
     };
   });
 };
+
+export const track = (...args) => {
+  if (typeof gtag !== 'undefined') {
+    gtag(...args);
+  }
+};
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -1,18 +1,37 @@
+const GOOGLE_APP_ID = 'G-6JF11BVDSJ';
+
 module.exports = {
   title: 'Vue Slicksort',
   head: [
     ['link', { rel: 'icon', sizes: '32x32', href: '/favicon-32x32.png' }],
     ['link', { rel: 'icon', sizes: '16x16', href: '/favicon-16x16.png' }],
     ['script', { src: '/confetti.min.js' }],
-    ['script', { src: 'https://www.googletagmanager.com/gtag/js?id=G-6JF11BVDSJ' }],
+    ['script', { src: `https://www.googletagmanager.com/gtag/js?id=${GOOGLE_APP_ID}` }],
+    process.env.NODE_ENV !== 'production'
+      ? [
+          'script',
+          {},
+          `
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${GOOGLE_APP_ID}');
+            gtag('create', '${GOOGLE_APP_ID}', 'auto');
+            gtag('set', 'anonymizeIp', true);
+          `,
+        ]
+      : [],
     ['meta', { property: 'og:title', content: 'Vue Slicksort' }],
     ['meta', { property: 'og:image', content: '/logo.png' }],
     ['meta', { property: 'og:image:width', content: '375' }],
     ['meta', { property: 'og:image:height', content: '375' }],
     ['meta', { property: 'og:image', content: '/logomark.png' }],
     ['meta', { property: 'og:image:width', content: '1219' }],
     ['meta', { property: 'og:image:height', content: '301' }],
-    ['meta', { property: 'og:description', content: 'Beautiful, touch-friendly sorting for Vue 3' }],
+    [
+      'meta',
+      { property: 'og:description', content: 'Beautiful, touch-friendly sorting for Vue 3' },
+    ],
     ['meta', { property: 'og:url', content: 'https://vue-slicksort.netlify.app' }],
     ['meta', { property: 'og:locale', content: 'en_US' }],
     ['meta', { property: 'twitter:image', content: '/logo.png' }],

diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -7,35 +7,17 @@ import PageListExample from '../components/PageListExample.vue';
 import ShorthandExample from '../components/ShorthandExample.vue';
 import SimpleGroupExample from '../components/SimpleGroupExample.vue';
 import KanbanExample from '../components/KanbanExample.vue';
+import { track } from '../components/utils';
 import { plugin } from '../../../src';
 import '../style.styl';
 
-const GOOGLE_APP_ID = 'G-6JF11BVDSJ';
-
-function installGoogleAnalytics(router) {
-  window.dataLayer = window.dataLayer || [];
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', GOOGLE_APP_ID);
-
-  gtag('create', GOOGLE_APP_ID, 'auto');
-  gtag('set', 'anonymizeIp', true);
-
-  watchEffect(() => {
-    gtag('set', 'page', router.route.path);
-    gtag('send', 'pageview');
-  });
-}
-
 export default {
   ...DefaultTheme,
   enhanceApp({ app, router }) {
-    if (GOOGLE_APP_ID && process.env.NODE_ENV === 'production' && typeof window !== 'undefined') {
-      installGoogleAnalytics(router);
-    }
+    watchEffect(() => {
+      track('set', 'page', router.route.path);
+      track('send', 'pageview');
+    });
 
     app.use(plugin);
     app.component('GroupExample', GroupExample);