Nuxt3 - Google Tag Manager(GTM) 연동

Google Tag Manager 란?

- 웹사이트에 태그를 쉽게 관리하고 배포할 수 있는 라이브러리

- GA4, Facebook Pixel 등 다양한 마케팅 도구를 코드 수정 없이 관리

 

 

설치 방법

1. @zadigetvoltaire/nuxt-gtm 모듈 설치

npm install @zadigetvoltaire/nuxt-gtm

 

2. nuxt.config.js 설정

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    '@zadigetvoltaire/nuxt-gtm'
  ],
  
  gtm: {
    id: 'GTM-XXXXXXX', // GTM 컨테이너 ID
    enabled: true,
    debug: process.env.NODE_ENV === 'development',
    loadScript: true,
    enableRouterSync: true,
    devtools: true,
  }
})

 

주요 옵션

- id: GTM 컨테이너 ID (필수)
- enabled: GTM 활성화 여부
- debug: 개발 환경에서 디버그 모드 활성화
- enableRouterSync: 페이지 라우팅 시 자동으로 pageview 이벤트 전송
- devtools: Vue Devtools에서 GTM 이벤트 확인 가능

 

 

커스텀 이벤트 전송하기

1. Composable 활용

<script setup>
const { $gtm } = useNuxtApp()

const trackButtonClick = () => {
  $gtm.push({
    event: 'button_click',
    category: 'engagement',
    action: 'click',
    label: 'signup_button',
    value: 1
  })
}

const trackPurchase = (product) => {
  $gtm.push({
    event: 'purchase',
    ecommerce: {
      transaction_id: product.orderId,
      value: product.price,
      currency: 'KRW',
      items: [{
        item_id: product.id,
        item_name: product.name,
        price: product.price,
        quantity: 1
      }]
    }
  })
}
</script>

<template>
  <button @click="trackButtonClick">
    회원가입
  </button>
</template>

 

2. Plugin으로 전역 사용

// plugins/gtm.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  const gtm = nuxtApp.$gtm

  return {
    provide: {
      trackEvent: (eventName: string, params: any) => {
        gtm.push({
          event: eventName,
          ...params
        })
      }
    }
  }
})

<script setup>
const { $trackEvent } = useNuxtApp()

const onProductView = (product) => {
  $trackEvent('view_item', {
    item_id: product.id,
    item_name: product.name,
    price: product.price
  })
}
</script>

 

 

디버깅 방법

1. GTM Preview 모드 활용

- GTM 관리 페이지에서 Preview 버튼 클릭 -> 사이트 URL 입력

 

2. 브라우저 콘솔에서 확인

window.dataLayer

 

3. Vue Devtools 활용

- devtools: true 로 설정 시 Vue Devtools 에서 GTM 이벤트 활용 가능