GTM으로 SPA의 페이지뷰 이벤트 제대로 설정하기
react나 vue와 같은 Single Page Application 환경에서 GTM 기록 변경 트리거 활용 방법을 설명합니다.
이 글은 구글 태그 관리자(Google Tag Manager)의 Web 컨테이너를 이용해 카카오 픽셀 이벤트와 매개변수를 설정할 수 있는 태그 템플릿의 이용 가이드입니다.
카카오 픽셀의 공식 가이드 문서는 여기를 눌러 주세요.
사용에 대한 책임은 사용자 본인에게 있으니 충분히 테스트를 진행한 후에 사용하시기를 바랍니다.
주의: 이 템플릿은 GTM 웹(Web) 컨테이너의 태그 템플릿입니다.
템플릿 Github 저장소에 접속해 템플릿 파일인 template.tpl
파일을 내려받습니다.(파일에서 우클릭 ➡️ 다른 이름으로 링크 저장)
다운로드 후 템플릿 사용을 위해 구글 태그 매니저 웹 컨테이너에 템플릿을 추가해야 합니다.
GTM에서 템플릿 메뉴 ➡️ 태그 템플릿 ➡️ 새로 만들기를 누릅니다.
우측 상단의 케밥 메뉴를 눌러 가져오기를 눌러 template.tpl
파일을 불러옵니다.
아래와 같이 가져와졌으면 저장 버튼을 눌러 템플릿을 저장하고 해당 페이지를 빠져나옵니다.
저장한 템플릿 태그는 태그 메뉴에서 사용이 가능하며 다음과 같이 태그 유형에 Kakao Pixel Event Builder
가 추가된 것을 볼 수 있습니다.
카카오톡 픽셀 템플릿을 활용하기 위해서는 기본적으로 Track ID
, Event
항목 입력이 필요합니다.
Track ID에는 사용하려는 카카오 픽셀의 ID를 입력합니다. ID는 카카오 픽셀 페이지에서 확인이 가능합니다.
드롭박스를 눌러 설정하려고 하는 카카오 픽셀 이벤트를 선택합니다. 선택한 이벤트에 따라 추가로 설정할 수 있는 항목이 등장합니다.
태그 입력이 필요할 경우 Tag란에 태그를 입력합니다. 태그를 사용하지 않을 경우 입력하지 않고 비워둡니다.
예시) purchase 선택 시 매개변수 설정 항목 등장
1:1 상담으로 시작할 수 있습니다.