vue에서 GTM(구글태그마스터) 설정하기

기획자가 GTM코드 설정좀 해달라길래 그냥 일반적으로 index.html의 헤더와 바디 안에 넣으면 되는 줄 알았다

^^응 근데 아님

vue는 vue만의 GTM코드 삽입 방식이 따로있었다... ..........

vue 플러그인을 사용하는 방법인데

보통 vue-gtm /vue-analytics / vue-gtag 이렇게 3가지가 있다

근데 vue-analytics 는 업데이트를 종료했다고 하고 vue-gtag는 GA쪽인것같았다 내가 원하는건 GTM코드

그렇기에 vue-gtm을 설치했다

npm install @gtm-support/vue-gtm

일단 vue-gtm을 설치해준다

그리고 vue-cli 사용 기준 main.js에 가서

import { createGtm } from "vue-gtm";

use(
    createGtm({
    id: "GTM-XXXXXX",
    vueRouter: router,
    })
)

추가해줍시당 아래 라이브러리 공식문저 링크로 가보면 뭔가 이것저것 설정하는게 더 있다

하지만 난 일단 그냥 연결해주는게 필요하므로 router 기능과 id값만 추가해줬다

id값은 구글태그매니저쪽에서 저 GTM- 블라블라 이쪽에 있다 저거 그대로 복사해서 넣어주면됨

저렇게 넣어부면 index의 헤드쪽에 태그매니저 넣을 필요가 없다... 만약 넣었다면 빼주자..

https://github.com/gtm-support/vue-gtm

GitHub - gtm-support/vue-gtm: Simple implementation of Google Tag Manager for Vue

 

그리고 이제 GTM쪽에서 태그생성이나 뭐 그런건 기획자가 알아서 했길래.. 트리거 설정을 해줬다

트리거 구성은 맞춤 이벤트로 해서 이벤트 이름을 설정해주는데 설정한 이벤트는 주고자 하는 이벤트쪽에

        Click(){
            this.$gtm.trackEvent({
                event: 'getEvent',
                category: "Count",
                action: "click",
                label: "클릭조회",
                value: 5000,
                noninteraction: false, 
            });
        }

methods를 통해서 이렇게 넣어준다

그리고 테스트해보면 이벤트발생시마다 카운트가 잘 적용된다