GTM, Google Tag Manager 뜯어보기
    소프트스킬 / 튜토리얼

    GTM, Google Tag Manager 뜯어보기

    Google Tag Manager, 통칭 GTM은 지난 2012년에 출시된 인터넷 인터페이스 상에서의 웹 분석, 광고 성과 측정, 제휴 마케팅 추적 등 다양한 태그를 관리할 수 있는 구글의 이벤트 트래킹 솔루션 중 하나이다.

    필자는 이전 직장에서 Google Analytics나 Segment와 같은 이벤트 트래킹 솔루션을 사용하고 있었는데, 물론 이런 툴만으로도 원하는 유저 행동 데이터를 수집하기에 큰 어려움은 없었지만 이 툴들의 단점은 PO나 마케터나 원하는 행동 데이터를 추가로 추적하고 싶을 때마다 개발자에게 코드를 심어달라고 요청해야 한다는 것이다.

    그러나 GTM을 사용하게 되면 개발자가 코드 상에서 이벤트를 정의하고 발송하는 부분이 크게 줄어들고, GTM이 제공하는 관리 페이지에서 직접 PO나 마케터가 직접 이벤트를 정의하고 심지어 어떤 시점에 이벤트를 발송할 것인지도 정할 수 있다. 또한 어플리케이션의 코드 내에 비즈니스 로직과 전혀 관련없는 이벤트 로그 코드가 섞이지 않기 때문에 개발자에게도 이득인, 어찌보면 누이좋고 매부좋은 툴이라고 할 수 있다.

    good 솔직히 개발자 입장에서는 이벤트 로그 심는 것만 안 해도 개이득이다

    그러나 아무리 GTM을 사용하여 이벤트를 정의한다고 해도 이 작업들이 프로그래밍과 전혀 관련이 없는 것은 아니다. 물론 GTM 관리 페이지에서 제공하는 기본 기능만으로도 간단한 이벤트를 정의하고 발송하는 것은 크게 어렵지 않지만, 조금 더 복잡한 상황을 구분해야하는 이벤트를 만들고 싶다면 아무래도 변수나 트리거와 같은 프로그래밍 개념에 대한 이해가 필요하다. (Data Layer를 이해해야 진짜 GTM을 쓰는 것이라고 하는 포스팅도 있을 정도다)

    그래서 이 포스팅은 개발자만을 위한 포스팅이라기보다 PO나 마케터 같이 개발자와 협업하는 비개발 직군이 GTM을 사용할 때 알아야 하는 최소한의 개발 지식을 쉽게 이해하고 GTM을 사용하도록 만드는 것에 초점을 맞추고 있다. 만약 여러분이 비개발직군이 아니라 GTM을 조직에 도입하고자 하는 개발자라면, 이 포스팅에서 이야기하는 개념들을 어떻게 하면 비개발 직군이 더욱 잘 이해할 수 있도록 설명할 수 있을지에 대해 고민해보며 읽어보는 것도 나쁘지 않을 것 같다.

    GTM을 자유롭게 사용하기 위한 선행지식

    일단 기본적으로 웹 클라이언트 환경에서 HTML, CSS, 자바스크립트가 하는 역할에 대해서는 어느 정도 숙지하고 있어야 한다. 물론 이런 지식을 모른다고 해도 GTM을 사용하는 데 크게 무리는 없지만, 정확히 원하는 시점에 원하는 값을 담아 이벤트를 발송하는 것에 대해 약간의 제약이 생기게 된다.

    예를 들어 사용자가 특정 버튼을 클릭하는 상황을 생각해보자. 우선 여러분은 유저가 “특정 버튼”을 클릭했다는 것을 알 수 있어야 한다. 이 과정에서 GTM은 CSS 선택자라는 것을 사용하여 이 특정 버튼을 구분할 수 있는 기능을 제공하고 있는데, 만약 CSS 선택자에 대한 지식이 없다면 여러분은 “모든 버튼”에 클릭 이벤트를 걸 수 밖에 없을 것이다.

    또는 최근에는 자바스크립트로 페이지의 내용만을 갈아치우며 렌더링하는 SPA(Single Page Application) 방식을 많이 사용하는데, 브라우저의 History에 대한 이해없이 “페이지 뷰” 트리거만을 사용한다면 페이지가 변경되는 것을 제대로 감지하지 못할 수도 있다.

    그런 이유로, 만약 이 포스팅을 읽고 있는 여러분에게 이러한 지식이 전혀 없다면 필자가 설명하는 것들이 정확히 무엇을 말하는 지 이해하기가 어려울 수 있다. 만약 본인이 이 경우에 해당된다면 생활코딩의 Web 수업을 핥아보고 올 것을 추천한다.

    GTM의 작동 원리

    GTM은 태그를 사용하여 이벤트의 종류를, 트리거를 사용하여 이벤트를 발송할 시점을, 변수를 사용하여 이벤트에 담길 데이터를 정의할 수 있는 기능을 제공한다.

    물론 앞서 말한대로 개발자들이야 트리거나 변수와 같은 개념을 이미 알고 있으니 괜찮겠지만, 비개발 직군에게는 트리거나 변수와 같은 개념 자체가 직관적으로 와닿지 않을 수 있기 때문에 각 트리거나 변수 종류를 설명하면서, 동시에 이것들이 의미하는 것이 어떤 것인지에 대한 설명도 조금씩 진행하려고 한다.

    aside 이 3가지 키워드를 이해하는 것이 바로 GTM을 이해하는 것이다

    자, 본격적으로 태그, 트리거, 변수에 대한 설명에 들어가기에 앞서, GTM을 사용하지 않는 상황에 대한 이해가 필요할 것 같다.

    만약 GTM과 같은 툴을 사용하지 않는다면, PO나 DA, 마케터처럼 데이터를 원하는 사람들이 이벤트를 정의해주고 개발자는 이벤트 발송 로직을 어플리케이션의 소스 코드에 추가해야한다.

    function login (loginData: LoginData) {
  try {
    // 로그인 통신 및 데이터 파싱
    const response = await fetch('/login', {
      method: 'POST',
      body: JSON.stringify(loginData),
    });
    const user = await response.json();

    // 로그인 성공 Google Analytics 이벤트 발송
    gtag('event', 'login', { userId: user.id });

    return user;
  } catch (e) {
    // 로그인이 실패했을 때를 대비한 예외처리
  }
}

    만약 여러분이 코드를 읽지 못한다고 해도 상관없다. 이 코드에서 가장 중요한 부분은 gtag('event', 'login', { userId: user.id });라는 코드, 단 한 줄이기 때문이다. 필자는 이 코드를 사용하여 로그인 이벤트가 발생했고, 로그인한 유저의 ID가 무엇인지를 Google Analytics에게 알린 것이다.

    물론 이런 식으로 개발자가 코드를 작성하여 이벤트를 직접 발송하더라도 별다른 문제가 발생하지는 않지만, 개발자는 개발자대로 비즈니스 로직과 전혀 관련없는 이벤트 코드를 별도로 관리해야한다는 어려움(귀찮음)이 있고, PO나 마케터, 데이터 분석가 같이 실제로 데이터를 필요로 하는 직군들은 개발자가 코드를 심어줄 때까지 아무것도 하지 못하고 계속 기다려야한다는 단점이 있다.

    그래서 GTM은 태그, 트리거, 변수와 같은 개념을 사용하여 개발자가 아닌 사람도 GTM이 제공하는 관리 페이지를 사용하여 손쉽게 이벤트를 정의할 수 있는 기능을 제공하는 것이다.

    이렇게 코드를 사용하여 이벤트를 발송하면 태그, 변수, 트리거같은 개념을 명확하게 구분하지 않아도 프로그램의 흐름에 따라 모든 것이 결정되지만, GTM은 이벤트가 프로그램의 흐름과 별도로 관리되는 것을 전제로 하고 있기 때문에 이 개념들을 명확하게 구분하고 있다.

    태그

    태그는 Google과 같은 제 3자에게 정보를 전송하는 자바스크립트 코드…라고 설명되어있긴 하지만 이게 바로 일반적으로 우리가 이벤트라고 부르는 것과 비슷한 것이다.

    기본적으로 GTM은 이벤트 트래킹 솔루션이 아니라 이벤트 트래킹 “관리” 솔루션이기 때문에, GTM이 직접 이벤트를 받아서 서버에 저장하는 것이 아니다. GTM은 Google Analytics과 같이 GTM에 연동된 다른 솔루션의 이벤트를 빌려오고 중계해주는 일종의 브로커 역할을 할 뿐이다.

    tags 이것저것 외부 솔루션을 많이 지원해주지만 역시 추천은 구글 제품만...

    이때 다른 솔루션의 이벤트에 “어떤 것을 담을 지”를 정하는 개념이 바로 태그이다. 즉, GTM의 태그는 Google Analytics의 이벤트가 될 수도 있고, Criteo의 태그가 될 수도 Hotjar의 트래킹 이벤트가 될 수도 있다는 것이다.

    트리거

    트리거는 한국어로 직역하면 방아쇠라는 뜻이다. 즉, 트리거는 단어 그대로 태그라는 총알을 언제 발사할 것인지를 정하는 방아쇠 역할을 한다.

    방아쇠를 당기는 시점은 유저가 회원가입 버튼을 클릭 했을 때나 상품 판매 페이지가 오픈되었을 때일 수도 있고, 혹은 사용자가 스크롤을 쭉 내리다가 이번에 새로 추가된 배너를 보았을 때일 수도 있다.

    사실 이렇게 특정 이벤트를 발송하는 시점을 정하는 것은 필자같은 개발자보다 실제로 데이터를 만져야하는 전문가들이 더 잘 알 것이므로 깊은 설명은 하지 않도록 하겠다.

    GTM은 상당히 여러 종류의 트리거를 지원하고 있는데, 당연히 이 트리거들이 의미하는 것이 정확히 무엇인지 알면 알수록 더 다양하고 세밀한 시점에 이벤트를 발송하도록 만들 수 있으니 한번 짚고 넘어가도록 하자.

    페이지뷰

    페이지 뷰

    페이지 뷰는 웹 브라우저가 해당 페이지를 로드하기 시작하는 시점에 바로 발동되는 트리거이다. 개발자들을 위해 추가 설명하자면 아직 페이지의 리소스가 모두 로드되지 않은 시점이기 때문에 사용자는 페이지의 내용을 보지 못했지만 어찌되었든 해당 페이지의 서버와 연결은 되어 리소스를 로드하기는 시작한 상태이다.

    DOM 사용 가능

    브라우저가 페이지의 DOM 렌더링을 모두 완료되었을 때 발동되는 트리거이다. 그렇기 때문에 DOM과 상호작용을 해야하는 태그라면 해당 트리거를 사용하는 것이 좋다.

    창 로드

    페이지에 필요한 모든 리소스가 전부 로드되었을 때 발동되는 트리거이다. 사용자는 제대로된 페이지의 UI를 보고 있을 가능성이 높다.

    클릭

    링크만

    말 그대로 링크가 클릭될 때만 발동되는 트리거이다. 이 트리거는 태그 대기라는 옵션을 제공하고 있는데, 이 옵션을 사용하면 유저가 링크를 클릭하고 나면 태그를 발송하고 나서 사용자를 이동시킨다.

    그 이유는 태그를 발송하기 전에 페이지가 이동되어버린다면 태그 발송 액션 자체가 무효화될 위험이 있기 때문인데, 반대로 유저는 링크를 클릭해도 태그가 발송되는 동안 약간의 시간을 더 기다렸다가 페이지가 이동되는 경험을 가지게 되므로 UX에는 딱히 좋지 않을 수도 있다.

    모든 요소

    모든 요소가 클릭될 때 발동되는 트리거이며, 여기에는 당연히 링크도 포함된다.

    사용자 참여

    스크롤 깊이

    사용자가 전체 페이지의 일정 비율 이상 스크롤 했을 때 트리거가 발동된다. 세로 스크롤 깊이는 아래로 스크롤 했을 때를 기준으로, 가로 스크롤 깊이는 오른쪽으로 스크롤 했을 때를 기준으로 한다. 깊이는 비율 또는 픽셀로 입력할 수 있다.

    양식 제출

    페이지에 있는 Form 엘리먼트에서 Submit 이벤트가 발생하였을 때 트리거가 발동된다.

    단, 이 트리거를 사용할 때는 Form 엘리먼트를 사용하지 않는 경우도 있고, 혹여 Form 엘리먼트를 사용하고 있더라도 Form 엘리먼트의 Submit 이벤트가 브라우저를 강제로 새로고침하는 기능을 가지고 있기 때문에 개발자들이 Submit 이벤트를 강제로 취소시키는 경우가 있다는 점을 유의해야한다.

    그래서 이 트리거를 사용하고 싶다면, 해당 페이지에서 데이터를 어떤 방식으로 서버에 제출하고 있는지 개발자에게 미리 한번 쯤 물어보는 것을 추천한다.

    요소 공개 상태

    요소 공개 상태는 어떤 요소가 화면에 노출되었을 때 발동되는 트리거이다. 화면에 노출되었다는 기준은 스크롤 같은 행위를 통해 해당 요소가 화면 안으로 들어온 경우일 수도 있고, 토글 버튼과 같이 조건에 따라 노출되는 요소가 노출된 경우일 수도 있다.

    GTM은 각 요소의 노출 기준 외에도 트리거 실행 시점이라는 기능을 통해 요소가 노출될 때마다 트리거를 발동할 것인지, 처음 노출될 때 한번만 트리거를 발동할 것인지와 같은 옵션을 제공하고 있다.

    기타

    기록 변경

    기록 변경 이벤트에 기반한 트리거는 URL 해시가 변경되거나 사이트에서 HTML5 History API의 pushState 메소드를 사용할 때 태그를 실행한다. 예를 들어 이 트리거는 SPA 어플리케이션에서 가상 페이지뷰를 추적하는 태그를 실행하려고 할 때 유용하다.

    다시 말해 실제로 페이지를 이동하던 하지 않던 브라우저 히스토리를 건드리면 해당 트리거가 실행된다는 것이다.

    맞춤 이벤트

    아래에서 다시 후술하겠지만 GTM은 dataLayer라는 자바스크립트 전역 변수를 감시하고 있으며, 이 변수에 데이터가 들어오는 것을 감지하여 트리거를 발동하거나 변수에 값을 할당하고 있다.

    custom event

    위 그림처럼 GTM 관리 페이지에서 my-custom-event라는 이름의 맞춤 이벤트를 정의해놓으면, GTM은 dataLayer 배열에 event: my-custom-event라는 값이 들어오는지 감시하다가 저 값이 들어오면 트리거를 발동하게 된다.

    즉, GTM에서 기본으로 제공하지 않는 복잡한 상황이나 특수한 상황을 잡아내어 트리거를 발동하고 싶을 때 코드 상으로 자유롭게 트리거를 발동할 수 있다는 것이다.

    const dataLayer = [];

// 트리거 발동
dataLayer.push({ event: 'my-custom-event' });

    물론 이렇게 dataLayer 배열을 사용하여 트리거를 발동하거나 변수에 값을 할당하는 것은 개발자가 직접 코드를 심어줘야하기는 하지만, 다른 이벤트 솔루션에 비하면 코드량이 상당히 적고 트리거를 발동하는 방법 또한 간단하기 때문에 관리가 용이한 편이다.(전역 변수를 사용해야한다는 것만 빼면…)

    변수

    변수란 말 그대로 변할 수 있는 수나 값을 이야기한다. 변수는 이름(Key)와 값(Value)로 구성되어 있으며, GTM은 항상 이 변수들을 감시하고 있다. 변수는 트리거가 발동되는 시점을 컨트롤할 때 사용될 수도 있고, GTM 내부에서 반복적으로 사용되어야 하는 값들을 저장해놓기도 한다.

    예를 들어 전자의 경우 지금 이 버튼을 클릭한 유저의 아이디가 1일 경우에 이벤트를 발송해라! 라는 조건같은 것을 이야기하는 것이고, 후자의 경우에는 Google Analytics나 Google Adwards에서 제공하는 ID 같은 값을 저장하는 경우를 의미한다.

    탐색

    HTTP 리퍼러

    HTTP 리퍼러를 반환한다. 리퍼러란 기본적으로 “이전 페이지 주소”를 의미한다고 생각하면 편하다. 리퍼러는 여러 광고 매체를 통해 유저를 유입시키고 있는 마케터에게 굉장히 중요한 값일 수 있는데, 유저가 어떤 광고 매체를 통해 우리의 서비스에 유입되었는지를 알 수 있는 가장 명확한 지표이기 때문이다. 참고로 이 값은 document.referrer에 있는 값을 사용하는 것이다.

    component

    또한 GTM에서 제공하고 있는 구성요소 유형 메뉴를 사용하여 전체 URL만 가져올 것인지, 경로만 가져올 것인지 등의 세부 옵션을 선택할 수 있다.

    비개발 직군들을 위해 간단히 설명하자면 URL은 아래 그림과 같이 여러 구성요소들로 이루어져있다. 이 구성요소들은 각자 담고 있는 정보의 의미가 다르고, 이 구성요소들을 모두 퉁쳐서 URL 또는 URI라고 부르는 것이다.

    uri structure

    혹여 굳이 전체 URL이 필요없고 URL 내에 들어있는 특정 정보만 필요한 경우에는 구성요소 유형 메뉴를 사용하여 데이터를 필터링하는 것을 추천한다.

    URL

    현재 페이지의 URL을 반환한다. 리퍼러와 마찬가지로 구성요소 유형 메뉴를 사용하여 원하는 값을 필터링해서 가져올 수 있다.

    페이지 변수

    당사 쿠키

    사용자가 머물고 있는 도메인의 쿠키 중에 이름이 일치하는 쿠키의 값을 반환한다. 쿠키는 브라우저에 저장되는 작은 단위의 텍스트 파일이다.

    console.log(document.cookie);
    ThVbdUg.; APISID=Twvmlsi3NXZBQQKv/AfV5gB9toKeSC3cui; SAPISID=qcBt_OBeNnbuq1sG/AuZto1M1fXt3YRBoD; __Secure-APISID=Twvmlsi3NXZBQQKv/AfV5gB9toKeSC3cui; __Secure-3PAPISID=qcBt_OBeNnbuq1sG/AuZto1M1fXt3YRBoD; PREF=al=ko&f6=400&f4=4000000; wide=1; SIDCC=AJi4QfFq_T4Wv10c3rnS-qZdLNrXY_FS-TQVBAdC6uD4uTmYU0xW3lCfJd4DcJqMecClwMXWbQ

    쿠키는 key=value;key2=value2; 포맷으로 이루어진 일종의 문자열인데, 브라우저 자체에서 텍스트 파일로 관리하고 있기 때문에 사용자가 브라우저를 종료하더라도 값이 삭제되지 않는다. 그렇기 때문에 쿠키는 “3일 동안 이 창 열지 않기”와 같이 브라우저의 종료 여부와 상관없이 유지되어야 하는 상태를 관리하기 위해 자주 사용되는 한다.

    또한 쿠키는 브라우저 자체에 저장되기 때문에 각자 다른 사이트들의 쿠키가 섞이지 않도록 각 사이트를 구분하는 도메인 값을 가지고 있는데, 만약 쿠키가 evan.com의 도메인을 가지고 있다면 dev.evan.com, www.evan.com 등의 사이트 또한 같은 사이트라고 인식되어 쿠키가 공유되지만, 만약 쿠키의 도메인이 dev.evan.com과 같이 서브 도메인까지 가지고 있는 쿠키라면 www.evan.com과 같은 사이트는 다른 사이트로 인식이 되어 사용할 수 없다는 점을 유의해야한다.

    데이터 영역 변수

    트리거의 맞춤 이벤트를 설명할 때 이야기했던 dataLayer를 사용하여 동적으로 값을 할당할 수 있는 변수이다. 이 변수는 GTM에서 특별히 취급하고 있는 변수이기 때문에 개발자가 직접 코드 상에서 전역 변수로 선언을 해주고 초기화를 해줘야한다.

    그리고 코드 상에서 이 배열에 push 메소드를 사용하여 데이터를 입력하고, 이때 입력된 키를 기준으로 값을 찾아서 데이터 영역 변수로 사용하게 된다. 말로만 설명하면 어려우니 예시를 한번 보도록 하자.

    먼저 GTM의 관리 페이지에서 데이터 영역 변수를 하나 생성하고 데이터 영역 변수 이름을 userId로 설정해두었다.

    dataLayer

    즉, 방금 GTM 관리 페이지에서 생성한 이 변수는 코드 상에 선언된 dataLayer라는 배열에 userId라는 키를 가진 데이터가 입력되면 그 변수를 사용하겠다는 의미인 것이다. 만약, 이 변수에 값을 할당하고 싶다면 코드 상에서 { userId: 1 }과 같이 해당 변수의 이름과 동일한 키를 가진 객체를 dataLayer 배열로 넣어주면 된다.

    const dataLayer = [];
dataLayer.push({
  userId: 1234,
});

    이제 이렇게 입력된 변수를 이벤트에 담을 수도 있고, 이 변수에 값이 할당된 시점을 감지하여 트리거를 걸 수도 있다.

    맞춤 자바스크립트

    변수의 값이 자바스크립트 함수의 결과로 설정된다. 여기에 사용되는 자바스크립트 함수는 값을 반환하는 익명 함수의 형태를 가져야 한다.

    이 변수는 말 그대로 함수를 실행시켜서 나온 결과물을 그대로 사용하는 것이기 때문에, 프로그래밍에서 사용하는 조건문이나 반복문 같은 기능을 그대로 사용할 수 있다는 것이 장점이다.

    예를 들어 유저가 어떤 요소를 클릭했을 때 클릭한 시간을 2020-04-11T07:56과 같은 ISO 포맷의 문자열로 보고 싶다면, 이런 맞춤 자바스크립트를 작성하면 되는 것이다.

    function () {
  const now = new Date();
  return now.toISOString();
}

    결국 이 자바스크립트 코드는 여러분의 어플리케이션에 삽입되어 실행하는 것이기 때문에, 만약 여러분의 어플리케이션에 전역 변수가 있다면 해당 변수에 접근할 수도 있다.

    자바스크립트 변수

    말 그대로 어플리케이션에 선언되어있는 자바스크립트 전역 변수를 그대로 가져와서 GTM 변수로 사용한다.

    만약 본인이 전역 변수의 개념을 잘 모른다고 해도 상관없다. 전역 변수를 간단하게 알아낼 수 있는 방법이 있으니 말이다. 우선 여러분의 어플리케이션에 접속한 뒤 브라우저 개발자 도구를 켜고 콘솔에 window를 입력하고 엔터를 쳐보면 다음과 같은 데이터들이 주르륵 나올 것이다.

    window 쨔잔. 적나라하게 드러난 Window 객체의 모습

    자바스크립트의 전역 변수는 반드시 글로벌 객체인 window에 담기도록 설계되어 있다. 즉, 콘솔에서 window 객체의 내용물을 찍어보았을 때 나오는 이 값들이 여러분이 GTM에 끌어다 사용할 수 있는 전역 변수들이라고 이해하면 된다.

    페이지 요소

    요소 공개 상태

    어떤 요소가 화면에 공개된 상태를 가져온다. 다시 말해 해당 요소가 화면에 표시되고 있는지 아닌지에 대한 값이다.

    ID나 CSS 선택자를 사용하여 요소를 선택할 수 있으나 만약 CSS 선택자를 사용한다면 동시에 여러 개의 요소가 선택될 수도 있으며, 이 경우 가장 첫 번째 요소만을 가져오니 주의하도록 하자.

    만약 본인이 개발자가 아니라고 해도 내가 원하는 요소가 어떤 DOM 엘리먼트인지 간편하게 알아낼 수 있으니 걱정하지말자. Google Chrome 기준으로 여러분이 알고 싶은 요소 위에 마우스 커서를 위치시키고 오른쪽 버튼을 클릭하면 도구 항목이 노출되는데, 여기서 검사 메뉴를 클릭하면 개발자 도구가 노출되며 여러분이 검사를 지정한 요소가 자동으로 선택된다.

    inspect result

    이때 요소 위에 툴팁으로 노출된 button.btn.gtm-text-input__variable-btn 이라는 것이 바로 CSS 선택자다. 그러나 앞서 이야기 했듯이, CSS 선택자는 고유한 ID 같은 것이 아니다. 같은 선택자로도 여러 개의 요소가 선택될 수 있기 때문에 되도록이면 ID를 사용하는 것이 좋으며, ID가 설정되어 있는 요소 같은 경우 #foo와 같이 #으로 시작하는 CSS 선택자가 붙어 있을 것이다.

    출력 유형에는 참/거짓 또는 비율이 있으며, 참/거짓을 선택했을 시 해당 요소가 화면에 얼마나 보일 때 “보인다”라고 정의할 것인지를 결정하는 최소 비율을 정해줄 수 있다.

    참고로 이 최소 비율 값은 투명도가 아니라 해당 요소가 얼마나 화면에 걸쳐 보이는 지를 의미한다. 즉, 반만 짤려보이면 50%인 셈이다.

    DOM 요소

    값이 DOM 엘리먼트의 텍스트 또는 지정된 DOM 요소 속성의 값으로 설정된다. 선택 사항인 속성 이름이 설정되면 속성에서 지정된 값이 변수의 값에서 반환된다. 그렇지 않으면 DOM 요소 내의 텍스트가 변수의 값이 된다.

    DOM 엘리먼트라는 것은 일반적으로 HTML을 사용하여 작성하는 그 구조를 생각하면 편하다. 간단한 예시로 요런 DOM이 있다고 생각해보자.

    <div>
  <span id="foo">하이!</span>
  <button id="button" data-type="submit">제출하기</button>
</div>

    만약 필자가 GTM의 관리 페이지에서 DOM 요소 변수를 #foo 요소로 지정했다면 해당 변수의 값은 span 엘리먼트가 가지고 있는 텍스트인 하이!가 될 것이다. 그러나 만약 필자가 DOM 요소 변수를 #button으로 지정하고 속성 이름 항목에 data-type을 입력해놓았다면 해당 변수의 값은 submit이 된다.

    자동 이벤트 변수

    자동 이벤트 변수는 클릭, 요소 공개와 같이 HTML 요소와 관련있는 트리거를 통해 이벤트가 발생될 때 자동으로 요소와 관련된 정보를 수집한다.

    자, 사용자가 어떤 img 요소를 클릭했을 때 그 이미지가 정확히 무엇이었는지 알고 싶은 상황을 생각해보자.

    <img src="/static/test.png" alt="테스트 이미지">

    우리는 클릭 트리거를 사용하여 사용자가 저 이미지를 클릭했다는 사실은 알 수 있지만, 이미지 자체를 변수에 담지 않는 이상 사용자가 어떤 이미지를 클릭한 것인지는 알 방도가 없다. 이때 우리가 사용할 수 있는 속성이 바로 alt이다.

    alt 속성은 혹시 모를 상황에 이미지가 노출되지 않으면 대체(Alternate)로 노출되는 텍스트이다. 또한 시각 장애인과 같이 이미지를 보는 것 자체가 불가능한 경우에는 컴퓨터가 저 텍스트를 음성으로 변환하여 읽어줄 수도 있기 때문에, 웹 표준에서는 img 요소를 사용할 때 반드시 alt 속성을 함께 사용하도록 권고하고 있다.

    즉, alt 속성에는 “이 이미지가 어떤 이미지인지”를 잘 표현하는 텍스트가 들어가야 하기 때문에 우리는 저 속성이 가지고 있는 텍스트를 통해 사용자가 어떤 이미지를 보았고 클릭한 것인지 간접적으로 알 수 있는 것이다.

    자동 이벤트 변수는 HTML 요소와 관련있는 트리거가 발동되었을 때 해당 요소의 정보를 자동으로 수집하기 위한 목적으로 사용되기 때문에, 이런 상황에서 굉장히 유용하게 사용될 수 있다.

    alt 요소 속성인 `alt`가 가지고 있는 값을 자동으로 가져와줘!

    이 변수는 이런 상황 뿐 아니라 form 요소가 제출될 때 해당 폼의 ID를 가져오거나, 링크가 클릭되었을 때 해당 링크의 텍스트나 타겟 URL을 가져오는 등 다양한 경우에 응용될 수 있기 때문에 시멘틱 마크업과 같이 HTML이 작성되는 방법에 대한 어느 정도 지식이 있다면 활용도가 굉장히 높은 변수이다.

    유틸리티

    맞춤 이벤트

    맞춤 이벤트 변수는 트리거 섹션에서 설명했던 맞춤 이벤트 트리거와 관련이 있다. 앞서 설명한대로 맞춤 이벤트 트리거는 dataLayer 배열에 event라는 키를 가진 객체가 주입될 때 발동하게 되는데, 이때 맞춤 이벤트 변수는 해당 이벤트의 이름으로 자동 할당된다.

    // 트리거 발동
dataLayer.push({ event: 'my-custom-event' });
    맞춤 이벤트 변수: my-custom-event

    상수

    변경될 수 있다는 의미를 지닌 변수와 달리 상수는 변하지 않는 값을 의미한다. Google Analytics나 Criteo와 같은 외부 솔루션을 사용할 때 계정마다 인증을 위한 키를 발급해주는데, 이런 키들을 GTM에 상수로 등록해놓고 편하게 관리하는 경우에도 사용된다.

    임의의 숫자

    말 그대로 0 ~ 2,147,483,647 사이의 랜덤한 숫자를 매번 변수에 할당해주는 기능을 가지고 있는 유틸리티 변수이다.

    참고표

    참고표는 지정한 입력 변수가 참고표에 입력해둔 조건에 맞아떨어진다면 특정한 출력을 내보내는 변수이다. 즉, 입력 변수가 참고표의 입력 란에 있는 문자열을 포함하고 있다면 출력 란에 있는 값을 반환하는 일종의 조건문을 담고 있는 테이블이라고 생각하면 된다.

    table

    필자가 입력 변수로 선택한 리퍼러라는 값은 사용자가 필자의 블로그에 들어오기 전에 어떤 페이지에 있었는가를 담고 있는 변수이다. 이때 필자는 참고표를 사용하여 리퍼러에 evan-moon.github.io라는 문자열이 포함되어 있다면 EVAN_BLOG라는 값을, 만약 아니라면 EXTERNAL_PAGE라는 값을 기본값으로 이 변수에 담기도록 세팅해놓은 것이다.

    이때 행을 하나 더 추가하여 입력에는 google.com을 출력에는 GOOGLE과 같은 값을 담을 수도 있겠다.

    정규식 표

    정규식 표는 참고표와 동일하게 입력 변수가 정규식 표의 입력 란에 있는 조건에 매칭되는 경우 특정한 출력 값을 반환하는 조건문을 담고 있는 테이블이다. 그러나 정규식 표에는 문자열을 가지고 놀기에 아주 좋은 도구인 정규식을 사용할 수 있기 때문에, 단순히 특정 문자열의 포함 여부만을 검사할 수 있는 참고표보다 더 강력한 기능을 제공한다.

    정규식 표의 사용 방법은 참고표와 완벽하게 동일하지만, 정규식 표의 입력 란에는 단순한 문자열이 아닌 정규식을 넣어줘야 한다.

    regex

    필자가 방금 생성한 이 변수는 입력 변수로 리퍼러를 받아온 후 ^(http(s)?:\/\/)(.+\.github\.io) 이라는 정규식에 리퍼러가 매치된다면 OOO에서 왔어염이라는 값을 반환하도록 설정되어있다.

    즉, 만약 리퍼러가 필자의 블로그인 https://evan-moon.github.io라면 evan-moon.github.io에서 왔어염이라는 값을 반환하도록 설정해놓은 것이다. 이처럼 단순히 문자열의 포함 여부만을 검사할 수 있던 참고표에 비해 정규식 표는 정규식을 사용하여 더 정교한 문자열 검사와 캡처링 기능까지 사용할 수 있기 때문에 응용할 수 있는 범위도 훨씬 넓다.

    만약 여러분이 생성한 정규식 표가 어떻게 작동하는 지 디버깅해보고 싶다면, 브라우저 콘솔 상에서 직접 정규식을 사용하여 문자열을 치환해보면 된다.

    const regex = /^(http(s)?:\/\/)(.+\.github\.io)/;

'https://evan-moon.github.io'.replace(regex, '$3에서 왔어염');
    'evan-moon.github.io에서 왔어염'

    물론 정규식이라는 언어 자체가 워낙 읽기도 어렵고 기능도 다양하기 때문에 학습 난이도는 다른 프로그래밍 언어에 비해 높은 편이라 비개발 직군에 종사하시는 분들에게는 큰 장벽처럼 느껴질 수도 있지만, 정규식 표는 참고표에 비해 자유도가 훨씬 높고 다양한 응용도 가능하기 때문에 이런 문자열 가지고 놀기에 욕심이 있으신 분들은 한번쯤 정규식을 공부해보는 것을 추천한다. (사실 규식이형은 개발자들에게도 악명이 높다)

    마치며

    GTM은 개발자가 비즈니스 코드 상에서 이벤트 로그를 관리하지 않고, 이벤트 로그에 대한 직접적인 니즈가 있는 비개발 직군이라도 직접 이벤트를 정의하고 발송 타이밍을 정의할 수 있도록 도와주는 솔루션이다.

    그러나 아이러니하게도 GTM을 100% 활용하기위해서는 프로그래밍에 대한 지식이 어느 정도 필요하기에, 필자는 이 포스팅을 통해 비개발 직군들이 GTM을 활용하기 위한 최소한의 지식을 얻어가기를 바라는 마음으로 이 포스팅을 작성했다.

    물론 GTM을 활용할 때 필요한 프로그래밍 지식들을 짧은 설명만으로 언급하고 넘어간 것이 아쉽기는 하지만, 자바스크립트의 전역 변수, CSS 셀렉터, HTML History 같은 것들을 이 포스팅에서 하나씩 자세히 설명해버리면, 더 이상 포스팅이 아니라 그냥 책이 되어버리므로 양해를 바란다.

    혹 이 글을 읽고 있는 여러분이 GTM을 팀에 도입하자고 먼저 제안한 개발자라면 여러분은 다른 비개발 직군인 팀원들이 GTM에 적응할 수 있도록 도와줘야 할 최소한의 책임이 있으니, 각 변수와 트리거의 특징과 용도를 어떻게 비개발 직군인 팀원들이 잘 이해할 수 있도록 설명할 수 있을 지 고민해보는 것도 좋을 것 같다.

    이상으로 GTM, Google Tag Manager 뜯어보기 포스팅을 마친다.

    관련 포스팅 보러가기

    중니어 개발자의 2020년 회고
    2020-12-29

    중니어 개발자의 2020년 회고

    에세이
    데이터 기반 의사결정, 과연 완벽한 걸까?
    2019-07-04

    데이터 기반 의사결정, 과연 완벽한 걸까?

    소프트스킬/에세이
    Evan Moon

    🐢 거북이처럼 살자

    개발을 잘하기 위해서가 아닌 개발을 즐기기 위해 노력하는 개발자입니다. 사소한 생각 정리부터 튜토리얼, 삽질기 정도를 주로 끄적이고 있습니다.