5. 구글태그매니저 : Must - Have 맞춤 변수 6가지

 

5. 구글 태그 매니저 : Must - Have 맞춤 변수 6가지

 

 

저는 항상 “나는 구글 태그 매니저에 대해서 많은 걸 알고 있다" 고 생각하는 동시에, GTM의 새로운 기능들이 나타날 때에는 “아 여전히 나는 공부할 내용들이 많구나"라고 느끼곤 합니다. 제가 구글 태그 매니저 기술에서 한 단계 도약했을 시점은, 제가 바로 GTM 변수(Variables)에 대해서 깊게 공부했을 때였던 것 같습니다. 저는 다양한 데이터 레이어 변수들과 상수들을 그럭저럭 꽤 다루고 있었지만, 그럼에도 불구하고 많은 변수들이 저에게는 미스터리로 다가왔습니다.

오늘의 블로그 포스트에서는 제가 GTM 컨테이너에서 개인적으로 가장 많이 사용하는 7가지의 구글 태그매니저 맞춤 변수에 대해서 알아보겠습니다.

 

#1. Page Title 변수

 

솔직히 말해서, 저는 처음에 세팅되어 있던 기본 구글 태그매니저에서태그 매니저에서 왜 이 변수가 기본으로 세팅되어 있지 않은지 이해하지 못하고 있습니다. 비록 구글 애널리틱스가 Page Title을 자동으로 추적한다 할지라도, 변수로써의 page title 설정을 구글 태그 매니저에서 해주는 것은 정말로 유용하게 쓰일 수 있기 때문입니다.

다행히도, page title 변수를 만들기는 매우 쉽습니다.

구글 태그 매니저 컨테이너에서 변수 -> 자바스크립트 변수를 선택한 뒤, Document.title을 선택해주세요.

 

 

 

 

 

이제 GTM 미리보기 모드를 켠 뒤, 우리 웹페이지를 새 로고 침해 보세요. 프리뷰 모드가 되고 나서 태그 매니저 푸터바가 나타난다면, 왼쪽에 나타나는 GTM 이벤트를 클릭하고 변수 탭으로 이동해봅시다.

 

Page Title 이라는 이름으로 새롭게 만들어진 자바스크립트 변수를 보실 수 있습니다.

#2. ALT Text 변수

 

만약 여러분의 웹사이트가 클릭이 가능한 많은 이미지들을 가지고 있다면, 그 많은 이미지들 중에서 어떤 이미지들을 가장 많이 클릭하는지 보실 수 있을 것입니다. 그렇지만, 각각의 이미지가 고유한 ID값이나 Class 값을 가지고 있지 않다 보니, GTM에서 어떻게 그 이미지들을 각각 구별해줄 수 있을까요?

하나의 이미지 위에 마우스를 올려두고 검사 버튼을 눌러봅시다.

 

 

많은 코드들이 오른쪽에 나타날 것이고, 우리 이미지의 코드 스니펫이 강조되어 있을 것입니다. 여기서 이미지의 alt 속성을 한번 체크해봅시다. (하기 이미지 참조)

 

비록 몇몇의 이미지는 같은 alt 속성을 가지고 있을테지만, 여전히 어떤 이미지가 가장 많이 클릭되었는 지를 파악하는 매우 좋은 지침서가 될 수 있습니다. 참고로, alt 속성은 필수적으로 있는 값이 아니다 보니, 모든 이미지가 가지고 있는 속성은 아니긴 합니다.

 

어쨌든, 만약 여러분들 이미지가 다양한 alt 값을 가지고 있다면, 구글 태그 매니저 맞춤 변수를 쉽게 사용하실 수 있습니다.

구글 태그매니저 컨테이너에서 변수 -> 자동 이벤트 변수(Auto-event Variable) 항목으로 이동한 뒤, 하기에 세팅을 따라 해 주시면 됩니다.

 

 

Auto-event 변수는 웹사이트 방문자들이 상호작용을 하게 되는 어떤 웹사이트의 요소의 특정 값들을 잡아낼 수 있습니다. 이 경우에는, 방문자가 웹사이트에 어떤 부분을 클릭했을 때, 그 부분의 alt 값을 잡아내도록 하는 변수를 새롭게 생성한 것입니다.

 

만약 요소가 어떠한 alt 속성을 가지고 있지 않다면, 변수값은 undefined 값으로 변환됩니다. 만약 alt 속성을 가지고 있다면, 그 속성의 값을 잡아낼 것입니다.

한번 테스트 해봅시다. 여러분이 직접 이 변수를 만든 후에, 미리 보기 모드를 세팅하고, 사이트를 새로고침 해주세요. 그리고 여러분들이 추적하고자 하는 이미지를 클릭해보세요. 만약 그 이미지가 다른 곳으로 이동하는 링크를 가지고 있다면, 컨트롤이나 커맨드 버튼을 누른 뒤에 클릭해보세요. 이 경우엔 다른 페이지로 이동하여, 데이터 레이어에 있는 변수들을 잃어버릴 염려를 하지 않으셔도 됩니다.

이제, gtm.click 이름의 이벤트를 선택하여, 변수 탭으로 이동하면, 아래와 같은 변수 값을 보실 수 있습니다.

 

#3. 다운로드 파일의 이름 변수

만약 여러분이 GTM을 통해 여러분들 웹사이트 내에서 다운로드하는 파일자료를 트래킹 할 때, 여러분은 아마도, Google Analytics에 Event Action 또는 Event Label 값으로 전체 URL을 보내고 계실 것입니다.

예를 들어, 어떤 사용자가 PDF 파일을 다운로드하게 되면 여러분은 GA에  https://www.example.com/files/guides/ultimate-guide.pdf  값을 Event Action 값으로 보내시게 될 겁니다.

비록 정상적으로 추적이 되는데에는 큰 문제가 없지만, 데이터를 직관적으로 읽기가 쉽지 않습니다.

만약 ultimate-guide.pdf 로 여러분의 파일 명이 GA 리포트에 직접적으로 나타난다면, 훨씬 더 리포트를 조회하기가 쉬워지실 것입니다. 다행히도, 생각보다 간단한 작업입니다. 그저, “맞춤 자바 스크립트"를 만들어주면 되거든요. 아래 코드를 참조해주세요.

function() {

var filepath = {{Click Element}}.pathname.split("/");

var filename = filepath.pop();

return filename.indexOf(".") > -1?filename:'n/a';

}

 

 

주의하실 점 : 여러분이 이 코드를 테스트하기 전에, Built-in Variables에 클릭 Element 변수를 사용 가능하게끔 반드시 체크하셔야 합니다.

 

 

 

변수를 저장하고, 새로고침을 해보겠습니다. PDF 또는 DOCS 변수를 찾으신 후, 클릭해보세요. gtm.linkClick 이벤트가 푸터바에서 나타나면, 이 이벤트를 클릭한 뒤, 변수 탭을 살펴보세요.

 

 

 

이 변수들은 해당 파일의 이름을 변수값으로 도출해냅니다. 만약 다운로드 링크가 파일 명을 포함하고 있지 않다면, 저 맞춤 자바스크립트 변수의 값은 n/a 문자열을 반환합니다.

 

#4. 모바일 유저

 

 

맞춤 변수로 여러분들은 모바일과 데스크탑, 태블릿 유저를 구분할 수 있습니다. 이 변수는 모바일 사용자들 (태블릿 유저 미포함)이 우리 웹사이트에 들어오면, true 값을 반환합니다. 여러분의 구글 태그 매니저 컨테이너에서 변수 -> 맞춤 자바스크립트로 이동하신 뒤, 하기 코드를 입력해주세요.

 

function() {

var a = navigator.userAgent||navigator.vendor||window.opera;

return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))

}

 

이 스크립트는 포괄적으로 쓰이는 정규식으로 구성되어 있고, 모바일 기기를 통해 우리 웹사이트에 들어오게 되는지 아닌지에 따라, true 또는 false 값을 반환 합니다.

이 코드를 통해, 모바일 유저에게만 할인 쿠폰을 보낸다던지와 같은 행동을 할 수 있습니다.

예를 들자면 2가지 활용방법이 있을 수 있습니다.

 

1. 공지사항이나 팝업을 보여줄 때, 맞춤 HTML 태그를 사용자 기기에 따라 다르게 나타나게 할 수 있습니다.

2. 모바일 유저들의 페이지뷰를 트리거로 삼아 실제로 구현할 수 있습니다. (하기 이미지 참조)

 

 

#5. 다중 도메인 웹사이트를 관리하는 Lookup Table 변수

전 lookup Table 변수를 정말 사랑합니다. 특히, 구글 애널리틱스 추적 코드를 여러 개 한 번에 관리할 때에 lookup table은 정말 강력한 기능을 담당하게 되거든요.

 

사용 사례 : 만약에 우리가 3개의 독립된 온라인 쇼핑몰을 가지고 있지만, 각각 도메인이 다른 상황이 있을 것입니다. (example.com , example.de , example.co.kr ) 이 3개의 도메인은 모두 같은 gtm 컨테이너가 설치되어 있지만, 우리는 ga 속성을 달리하여 데이터를 각각 다른 곳에 푸시하고자 합니다. 어떻게 해야 구글 태그 매니저 컨테이너 안에 있는 GA 트래킹 id를 관리할 수 있을까요?

 

가장 쉬운 방법은 lookup table 변수를 생성하여 활용하는 방법입니다.  이 lookup table 변수에 대해서는 나중에 아주 자세히 설명드릴까 합니다. 우선, lookup table 변수란 각기 다른 input 데이터로써의 다른 변수들의 값을 각각 가지는 것을 의미합니다.

 

 

여러분들의 이해를 돕기 위해, 매우 쉬운 예제를 가져와보았습니다. 저는 input 변수를 page Hostname으로 설정하였습니다.

1. 만약 page Hostname이 example.com과 같다면, GA 추적 ID가 UA-XXXXXX-11인 ga에 데이터를 보내라.

2. 만약 page Hostname이 example.de 와 같다면, GA 추적 ID가 UA-XXXXXXX-22인 ga에 데이터를 보내라.

 

저는 Tracking ID로써 GA 태그 안에서 lookup table을 사용하였습니다.

꿀팁 : Lookup Table 변수가 작동하는 모든 작업들은 equals to입니다. 만약 여러분의 웹사이트의 hostname이 www가 있는 것과 없는 것으로 나뉜다면, 이 호스트 네임 두 개를 모두 lookup table 변수로 통합시킬 수 있습니다.

• www.example.com –> UA-XXXXXXX-11

• example.com –> UA-XXXXXXX-11

 

#6. UTM 파라미터 변수

 

만약 여러분들이 적극적으로 UTM 파라미터를 사용하고 있다면, 아마도 여러분들은 utm_campaign, utm_source, utm_medium 특정 값에 따라 특정 태그를 fired 시키길 원하실 때에도 있을 것입니다.

저는 태그와 트리거, 변수를 유지하길 원하기 때문에, 보통 분리된 변수들을 생성하곤 합니다. 그리고 그들은 트리거에서 사용합니다. URL 변수들을 활용하면서도 gtm 변수에 utm 매개변수들을 쉽게 변환시킬 수 있습니다. 변수 -> URL 변수로 이동하셔서, 3개의 변수만 만들어주시면 됩니다.

 

또 다른 활용방법으로는, UTM 매개변수들을 제1사 쿠키들에 넣을 수 있습니다. URL 변수들은 그 내용이 상당히 방대하여, 제가 다른 가이드에서 자세히 정리해드릴 예정입니다.

 

GTM 맞춤 변수 : 마무리

 

제가 오늘 포스팅에서 공유한 팁들은 빙산의 일각에 불과합니다. 여러분이 구글 태그 매니저에 대해서 더 많이 배울수록, 더 많이 공부할 것들이 생길 것입니다. 이번 블로그 포스트에서는 제가 가장 좋아하는 GTM 맞춤 변수 6가지에 대하여 공부해보았습니다.

저는 이 6가지 변수들을 모든 프로젝트나 웹사이트에서 사용하고 있습니다. 이 6가지 변수들을 통해 개발지식이 없어도 복잡한 트리거와 태그들을 활용할 수 있기 때문이지요.

여러분들만의 맞춤 변수가 있다면 언제든 공유해주세요.