안녕하세요. 그로스해킹 파트너, 허들러스의 유성민 대표입니다. 오늘은 구글 태그 매니저의 심화 과정으로서, 구글 태그 매니저에 있는 자바스크립트 변수 타입에 대해서 자세히 살펴보겠습니다.
우선 기본적으로 구글 태그매니저는 여러분들이 웹사이트 내에서 고객의 로그 데이터를 추적하기 쉽게 만들어줄 수 있는 다양한 변수들을 가지고 있습니다. 웹 문서 객체(DOM)에 있는 CSS 선택자를 통해 특정 요소를 정의할 수도 있고, 유튜브 영상 조회, 스크롤 트래킹 등 이전에 이미 존재하던 데이터 레이어의 값을 여러분이 추적하시는 데 사용할 수 있습니다.
‘변수’라는 개념을 일종의 레고 블록처럼 상상해봅시다. 이 레고 블록을 가지고 우리는 웹 문서에 있는 모든 값들을 가져올 수 있습니다. 전역 자바스크립트라 불리는 수많은 사용자 정의 GTM 변수들이 이미 존재합니다.
하지만 이러한 변수들을 어떻게 사용할지 몰라 그냥 건너뛰거나, 이해하기가 어려워서 사용하지 않기도 합니다. 구글 태그매니저의 원리를 정확하게 알지 모르다 보니, 사용하던 것만 계속 사용하게 됩니다.
우선, 구글 태그 매니저 > 변수 > 사용자 정의 변수의 [구성] 버튼을 클릭하여, 변수의 타입을 [자바스크립트 변수]로 선택해봅시다.
자바스크립트 변수를 선택하니 정말 쉬워 보이는 인터페이스로 구성되어 있습니다. 넣어줄 칸이 하나밖에 없네요. 바로 전역 변수 이름만 적어주면 됩니다.
이 전역 변수들을 가지고 무엇을 할 수 있을까요? 이번 글에서는 구글 태그매니저의 강력한 기능 중 하나인 자바스크립트 변수에 대해서 설명해보겠습니다.
1. 자바스크립트 전역 변수란 무엇인가 ?
전역 자바스크립트 변수는 특정 페이지의 위치를 나타내는 길고 짧은 문자열이 되기도 합니다. HTML안에 있는 DOM(웹 문서 객체)을 탐색하는 것이지요. 웹 디자인에서 CSS 셀렉터와 유사한 성질을 가지고 있습니다.
2. 어디서 전역 변수의 이름을 찾을 수 있을까 ?
우리는 웹 페이지를 탐색하여, 특정 요소의 덩어리를 찾을 것입니다. 타겟팅하려는 페이지 선택 항목을 강조 표시하거나 마우스를 가져가면 유용합니다. 크롬 브라우저에서 특정 요소에 마우스를 갖다 대고, 마우스의 오른쪽 버튼을 클릭합니다. 그러면 웹 문서의 HTML을 볼 수 있는 디버거가 나타납니다.
디버거 내에서 “콘솔” 부분으로 이동합니다.
콘솔의 제일 아래로 스크롤을 한 뒤, ‘Window’를 치고 엔터를 클릭해봅시다. 그럼 ‘Window’라고 검색한 결과 왼쪽에 화살표 버튼이 있습니다.
이 화살표 버튼을 누르면, 우리가 가져올 수 있는 모든 값들이 나타나게 됩니다. 이 값들을 우리는 모두 자바스크립트 변수로서 사용할 수 있습니다.
3. 어떻게 값을 가져올 수 있을까?
화살표를 눌러, document 라는 부분의 URL을 주목해주세요.
자바스크립트 전역 변수에 이름을 가져오려면 가져오려는 값에 마우스 오른쪽 버튼을 클릭한 뒤, ‘Copy Property Path’를 할 수 있습니다. 이 값을 복사한 뒤, 구글 태그매니저로 돌아가 ‘전역 변수 이름’란에 넣어주세요.
이 경우에, 우리의 “전역 변수 이름 값”이 복사되고, 우리는 이 값을 “document.URL”이라고 부를 수 있습니다. GTM에서는 위와 같이 삽입하여 사용할 수 있습니다.
4. 이 값들을 어떻게 사용할 수 있을까?
아주 간단하게 자바스크립트 전역 변수를 사용하는 방법에 대해서 살펴보았습니다. 이번 글에서 다룬 URL 뿐만이 아니라, 우리는 아주 많은 값들을 구글 태그매니저를 통해 쉽게 가져올 수 있습니다. 자바스크립트 변수를 배웠다면 활용을 해보아야겠지요. 자바스크립트 변수를 이용해 추적을 진행하는 방법에 대한 블로그 글을 정리 중에 있어 곧 공개할 예정입니다.
다음 글을 기대해주세요 ! 긴 글 읽어주셔서 감사합니다.
해당 글은 그로스 마케팅 파트너 허들러스와 모비인사이드의 파트너쉽으로 제공되는 기사입니다.
