Nuxt.js에서 Google 태그 관리자에게 이벤트를 보내는 방법

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에서 보낸 이벤트를 태그 관리자에서 가져옵니다.

이어서는 태그 매니저측에서의 설정이 됩니다.

태그 관리자 트리거를 선택합니다.




트리거 유형은 사용자 정의 이벤트입니다.
트리거의 이벤트 이름은 Nuxt.js에 지정한 이름과 같아야 합니다.
이번 예라면 this.$gtm.push({ event: "demo" }) 그래서 demo 입니다.

트리거가 설정되면 이번에는 태그를 설정합니다.


이벤트를 보낼 태그를 선택합니다. 이번에는 Google 애널리틱스입니다.
트리거는 위에서 만든 트리거를 설정합니다.

이제 Google 애널리틱스에서 Nuxt.js의 이벤트를 감지할 수 있습니다.