LoginSignup
4
2

More than 3 years have passed since last update.

firebase・vue.jsで作ったWebアプリにGoogle Analyticsを設定してみた。

Last updated at Posted at 2019-07-11

やること

先日作ったwebアプリreftikaにGoogle Analyticsを設定する。

webアプリの詳細はこちらの記事を参照ください。
<初心者>レファレンス協同データベースの記事をランダムに表示するWEBサービスをvue.jsで作りました。

やったこと

vue-routerを使っている場合は、やることは2つだけでした。
1.[Google Analytics]のページでアカウント作成
2.vue-analyticsの導入・設定

参考:
Vue-SPAでもGoogle Analyticsしたい!
Vue.jsのプロジェクトでGoogleAnalyticsの設置

1.Google Analyticsのページでアカウント作成

[Google Analytics]

2.vue-analyticsのインストール・設定

vue-analyticsのgithub

インストール

npm install vue-analytics -save

設定

main.jsに追記

main.js
import VueAnalytics from 'vue-analytics'

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X'      google analyticsのID
})

ES5の書き方の場合はmain.jsは以下のようにする。

main.js
const VueAnalytics = require('vue-analytics').default

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X'      google analyticsのID
})

以上でGoogle Analyticsのページに反映されます。
キャプチャ.JPG

その他

上記でも使っているVue.use()ってそもそも何なのかという初歩的なことがあいまいだったのでメモ。
・Vur.use()はプラグインを使用するために使用する。
・プラグインとはVueにグローバル・メソッドやグローバル・アセット、コンポーネントアクションなどを追加するもの。

参考:
Vue.use( )を書く場合と書かない場合
公式ガイド-プラグイン

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2