Life is Like a Boat

忘備録や経済、投資、プログラミングに関するメモやtipsなど

Nuxt.jsのGoogle Analyticsモジュールを使ってEventのトラッキングをする

ここ最近、Netlify + Nuxt.jsの組み合わせでサイトやフォームを作っています。

サイトを訪れたユーザのアクションを計測したいのですが、Nuxt.jsのGoogle Analyticsモジュールを使うとかなり簡単にできるます。以下その忘備録です。

nuxt.config.js

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/bulma',
    ['@nuxtjs/google-analytics',
      {id: 'UA-YOUR_GA_TRACKING_ID'}
    ]
  ],

任意のコンポーネントからは this.$ga でアクセスできます。

this.$ga.event('Videos', 'play', 'Fall Campaign', 1)

developers.google.com

例えばあるボタンを押したというユーザのアクションをGoogle Analytics側でイベントとして計測したい場合、@clickで呼ばれるfunction内にthis.$gaを記述してあげるといいはずです。

GA側ではこんな風に表示されます。 f:id:nerimplo:20190508104353p:plain

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門