7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nuxt.jsでGoogleタグマネージャーにイベントを送る方法

Posted at

Googleのタグマネージャーでは、ページビューやクリックイベントを設定することができます。
しかし、コード上からイベントを送りたいこともあるかと思います。
その時の対処法になります。@nuxtjs/gtmを使用します。

gtm-moduleをインストール

Nuxt.jsでタグマネージャーの設定をするために、@nuxtjs/gtmをインストールします。

yarn add @nuxtjs/gtm 
or 
npm install @nuxtjs/gtm

nuxt.config.jsで設定する

nuxt.config.js
export default {
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX' // タグマネージャーのid
  }
}

インストール後nuxt.config.jsでタグマネージャーのidを設定します。

componentsでイベントを設定する

タグマネージャーにイベントを送りたい箇所に処理を追加します。

<template>
  <div>
    <button @click="clickEvent">click</button>
  </div>
</template>

<script>
export default {
  methods: {
    clickEvent() {
      this.$gtm.push({ event: "demo" })
    }
  }
};
</script>

上記の例では、クリックをしたらタグマネージャーにイベントを送ることができます。

他にもapiからのリクエストが成功したらなど、任意の条件でイベントをおくることが可能です。

Nuxt.jsから送られたイベントをタグマネージャーで取得する

続いては、タグマネージャー側での設定になります。

タグマネージャーのトリガーを選択します。
キャプチャ.PNG

キャプチャ2.PNG

トリガータイプはカスタムイベントにします。
トリガーのイベント名は、Nuxt.jsで指定したものと同じにする必要があります。
今回の例ならthis.$gtm.push({ event: "demo" })なので、demoとなります。

トリガーを設定したら今度はタグを設定します。
キャプチャ3.jpg

イベントを送りたいタグを選択します。今回はグーグルアナリティクスです。
トリガーには、上記で作成したトリガーを設定します。

これで、グーグルアナリティクスでNuxt.jsからのイベントを感知できるようになります。

7
3
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
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?