前提・実現したいこと
Vue.js(Nuxt.js)で書かれているアプリでボタンがタップされた回数を計測したい。
画面が閲覧された時間なども取得したいが、順に対応するので今はボタンのみ
発生している問題・エラーメッセージ
検証用の環境に乗せる前に、localhostで取れるか確認したかったのだが、現状うまく計測ができていない模様。
該当のソースコード
- Test.vue
Vue
1<template> 2 <div class="main d-flex align-items-center"> 3 <div class="w-100"> 4 <div id="footerButtons"> 5 <b-button 6 id="edit" 7 v-if="innerRouteViewPage.editTo" 8 @click="edit" 9 class="prev" 10 > 11 <span class="nav-button-text">{{ modLabel }}</span> 12 </b-button> 13 </div> 14 </div> 15 </div> 16</template> 17 18<script> 19export default { 20 methods: { 21 edit () { 22 // GAにデータを送る 23 this.$ga.event('click', { 24 event_category: 'footer_edit', 25 event_label: '修正する' 26 }) 27 this.$store.dispatch('routing/innerRouter/edit') 28 } 29 } 30} 31</script> 32 33<style lang="scss" scoped> 34@import '~/assets/scss/footer/FooterButton.scss'; 35</style> 36
- Nuxt.config.js
JavaScript
1import i18n from './nuxt-i18n.config' 2require('dotenv').config({ path: `./env/.${process.env.ENV}.env` }) 3 4export default { 5 mode: 'spa', 6 router: { 7 base: process.env.SUB_DIRECTORY 8 }, 9 vue: { 10 config: { 11 devtools: (process.env.ENV !== 'prod') 12 } 13 }, 14 /* 15 ** Headers of the page 16 */ 17 head: { 18 title: process.env.npm_package_name || '', 19 htmlAttrs: { 20 lang: 'ja' 21 }, 22 base: { 23 href: 'router.base' 24 }, 25 meta: [ 26 { charset: 'utf-8' }, 27 { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' }, 28 { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }, 29 { name: 'robots', content: 'noindex' }, 30 // pwa iOS 31 { name: 'apple-mobile-web-app-capable', content: 'yes' }, 32 { name: 'apple-mobile-web-app-status-bar-style', content: 'black' } 33 ], 34 link: [ 35 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 36 ] 37 }, 38 /* 39 ** Customize the progress-bar color 40 */ 41 loading: { color: '#fff' }, 42 /* 43 ** Global CSS 44 */ 45 css: [ 46 '~/assets/default.scss', 47 '~/assets/custom_base.scss', 48 '~/assets/toasted.scss', 49 '~/assets/transition.scss' 50 ], 51 // custom_base.scssからbootstrapのCSSを読み込む 52 bootstrapVue: { 53 bootstrapCSS: false, // or `css` 54 bootstrapVueCSS: false // or `bvCSS` 55 }, 56 /* 57 ** Plugins to load before mounting the App 58 */ 59 plugins: [ 60 '~/plugins/const/const', 61 '~/plugins/const/pageConst', 62 '~/plugins/const/urlConst', 63 '~/plugins/toasted', 64 '~/plugins/vuelidate', 65 '~/plugins/modal', 66 '~/plugins/filter', 67 '~/plugins/conversion', 68 process.env.MOCK !== 'true' ? '~/plugins/empty' : '~/plugins/mock', 69 '~/plugins/VueQrcode', 70 '~/plugins/day', 71 '~/plugins/axios.interceptor.js', 72 '~/plugins/ga' 73 ], 74 /* 75 ** Nuxt.js dev-modules 76 */ 77 buildModules: [ 78 // Doc: https://github.com/nuxt-community/eslint-module 79 '@nuxtjs/eslint-module' 80 ], 81 /* 82 ** Nuxt.js modules 83 */ 84 modules: [ 85 // Doc: https://bootstrap-vue.js.org 86 'bootstrap-vue/nuxt', 87 // Doc: https://axios.nuxtjs.org/usage 88 '@nuxtjs/axios', 89 // Doc: https://github.com/nuxt-community/dotenv-module 90 ['@nuxtjs/dotenv', { 91 path: './env', 92 filename: `.${process.env.ENV}.env` 93 }], 94 '@nuxtjs/style-resources', 95 // multi language 96 ['nuxt-i18n', i18n] 97 ], 98 /* 99 ** Axios module configuration 100 ** See https://axios.nuxtjs.org/options 101 */ 102 axios: { 103 baseURL: process.env.BASE_URL 104 }, 105 /* 106 ** Build configuration 107 */ 108 build: { 109 /* 110 ** You can extend webpack config here 111 */ 112 extend (config, { isClient, isDev }) { 113 // 開発時にデバッグできるようにする 114 if (isDev && isClient) { 115 config.devtool = '#source-map' 116 } 117 118 config.resolve.extensions.push('.scss') 119 } 120 }, 121 watchers: { 122 webpack: { 123 poll: true 124 } 125 }, 126 /* 127 ** server host 128 */ 129 server: { 130 host: '0.0.0.0', // デフォルト: localhost 131 port: 3000 132 }, 133 134 styleResources: { 135 scss: [ 136 '~/assets/_variables.scss' 137 ] 138 }, 139 140 extensions: ['js', '.scss'] 141} 142
- plugins/ga.js
JavaScript
1import Vue from 'vue' 2import VueAnalytics from 'vue-analytics' 3 4Vue.use(VueAnalytics, { 5 id: process.env.VUE_APP_GA_ID 6}) 7
試したこと
https://qiita.com/hirohero/items/0f29a89cd08b421ccfe1
https://qiita.com/hisonl/items/2f7531b5b5f6a220c1f1
この辺を参考にしつつ、実施してみていました。
補足情報(FW/ツールのバージョンなど)
Nuxt.js:2.0.0
vue-analytics:5.22.1
あなたの回答
tips
プレビュー