[Google Analytics + Google Tag Manager] 개발자 가이드

Google Tag Manager Manual

참고

• Developer Guide:
  • https://developers.google.com/tag-manager/devguide
• Ecommerce (App + Web) Developer Guide:
  • https://developers.google.com/tag-manager/enhanced-ecommerce
• Events: Retail/Ecommerce:
  • https://support.google.com/analytics/answer/9268036?hl=en

개념

• 정의
  • 웹사이트 방문자 분석 및 광고 성과 측정을 위한 여러 마케팅 툴들을 통합적으로 관리해주고, 마케팅 태그를 손쉽게 삽입할 수 있게 도와주는 서비스
• 장점 (GA와 비교)
  • 마케팅 태그의 운영 및 유지보수가 쉽고 운영 동선이 짧다.
  • 코드에 비해 표현력이 높은 콘솔을 제공함으로써 관리가 용이(코드 배포 필요없이 GTM 콘솔에서 코드를 수정하면됨)
  • 여러 마케팅 태그의 효율적인 관리 프로세스를 확립 가능
  • GTM에서 작성된 기능을 사용하므로 러닝커브가 낮음
• GTM HIERARCHY
  • ACCOUNT(계정): 조직 레벨에서 관리 그 하위로 CONTAINER 들이 있으며 CONTAINER는 실질적으로 태그 생성하고 관리하는 공간이다.
• GTM TAG ELEMENTS
  • 1. Tag: 데이터를 전송하는 기준이 되는 단위
    2. Trigger: 태그의 발동 시점 정의
    3. Variable: 태그와 트리거에서 이용할 수 있는 정보를 담아두는 저장소
• GTM PROCESS – GTM LIBRARY WORKLOAD
  • Google Tag Manager > GTM Javascript Library > User's Web > Google Analytics
• GTM PROCESS – TAG WORKLOAD
  • Action > GTM Action[Trigger, Tag] > Google Analytics
• GTM TAGS
  • Pageview
    • 모든 페이지마다 방문 시 수집
  • Event
    • 사용자의 행동에 따라 수집 (배너 클릭, 스크롤 동작, 링크클릭 등)
  • Custom
    • JS 트리거가 동작될 때 수집
• 수집 확인 (GA)
  • GA에서 실시간 > 이벤트로 확인
  • 쌓인 데이터는 행동 > 이벤트로 확인

1. GTM 실습

• 계정 및 컨테이너 생성
  • 태그 관리자에서 계정 > 계정만들기 클릭 > 필요 데이터 입력 후 생성
    • 계정이름: bkjeon
    • 컨테이너이름: dev.bkjeon.com (개발서버)
    • 타겟 플랫폼: 웹
  • 태그 관리자 설치(웹)
    • 상기 설정 시 관련 스크립트를 표시
    • 스크립트 나중 적용시 태그 관리자 메인 > 관리자 > Google 태그 관리자 설치
• GTM 적용
  • SCROLL EVENT (메인 path:/ 기준)
    • 트리거 설정
      • 트리거 유형: 스크롤 깊이
      • 세로 스크롤 깊이 체크 > 비율 선택 후 측정 단계 지정(Ex: 0,25,50,75,100)
      • 일부 페이지
        • Page Path, 같음, /
    • 태그 설정
      • 태그 유형: Google 애널리틱스: 유니버설 애널리틱스
      • 추적 유형: 이벤트
      • 카테고리: 스크롤 깊이 (텍스트 입력 -> GA에 표시될 이름)
      • 작업: {{Scroll Depth Threshold}} 입력 또는 Scroll Depth Threshold 클릭 선택
      • 비 상호작용 조회: 거짓 (스크롤을 할때마다 이벤트로 인식하므로 페이지 로드 후 스크롤만 내려도 이탈이 아닌 것으로 간주한다. 따라서 이탈률이 낮아지므로 정확한 실적을 평가하는데 문제가 된다.)
      • Google 애널리틱스 설정: GA코드 입력(Ex: UA-XXXXXX...)
    • 변수 설정
      • 구성 > Scroll Depth Threshold 추가
    • 확인 방법
      • GTM 테스트: 미리보기 > 도메인 입력 > 각 항목 클릭하여 정상여부 확인
      • GA 반영확인: 좌측 메뉴 > 실시간 > 이벤트
      • 이전 쌓인 데이터 확인: 좌측 메뉴 > 이벤트 > 개요 > 이벤트 카테고리(SCROLL_MAIN) > 보조측정기준(이벤트 액션 탭)
  • CLICK EVENT (공통 버튼 기준)
    • 트리거 설정
      • 개요 > 새 태그 > 트리거 > 우측 +버튼 클릭 > 트리거 구성 > 클릭
      • 클릭 선택 (해당 내용에선 모든 요소를 선택)
        • 링크만: 링크를 통해 페이지를 이동하는 경우
        • 모든 요소: 클릭할 수 있는 모든 요소
      • 트리거 구성 > 일부 클릭 Radio Button 체크 > 하단 Select Box 에서 기본 제공 변수 선택... 클릭
      • 기본 제공 변수 선택 (해당 내용에선 Click Element 선택)
        • Click Element: 트리구조로 되어있는 클릭되는 요소, 일종의 주솟값
        • Page URL: Full URL (Ex: www.bkjeon.com/main)
        • Page Path: 메인 도메인을 제외한 URL (Ex: /main)
      • 상단 트리거명 입력
      • 트리거 구성 > Click Element, CSS 선택 도구와 일치 => 일종의 주솟값 탐색기 역할
      • 프론트 화면에서 버튼 우측 클릭 후 검사 클릭 (태그 정보를 알아내기 위함) 후 개발자 도구에서 지정된 버튼태그의 마우스 우측 클릭하여 Copy Selector 상기 트리거 구성의 세번째 칸에 입력 > Click Element, CSS 선택 도구와 일치, {방금 복사한 Tag 정보}
      • + 버튼 클릭 > Select Box 에서 Page Path 선택 > / 입력 (전체 페이지마다 공통으로 표시되는 함수이므로 / 로 경로 지정) => 즉, Page Path, 포함, / 이다.
      • 저장
    • 태그 설정
      • 태그 구성 영역 클릭 > 태그명 입력
      • 태그설정
        • 태그 유형: Google 애널리틱스: 유니버설 애널리틱스
        • 추적 유형: 이벤트
        • 카테고리: 공통
        • 작업: 장바구니
        • 라벨: 상품담기
        • Google 애널리틱스 설정: GA코드 입력(Ex: UA-XXXXXX...)
  • Data Attribute
    • 특정 영역에 대한 클릭 이벤트를 자동으로 수집하기 위해 HTML 요소내 data-attr 라는 속성을 추가하며 이를 태깅 이라고 합니다.
    • {{값}}은 변수 형태로써 사용자가 선택한 값이 들어가야 됨
    • 요소 노출시 data-imp="Y" 라는 속성을 추가로 기재
    • 예시
      • 항목
        • 채널유형: 디바이스 유형
        • 이벤트 카테고리: {{CODE: 채널유형}}_메인
        • 이벤트 액션: 페이지_메인_Banner
        • 이벤트 라벨: {{Click Text}}
      • 코드

        // 1. Function, 롤링배너
        function pushExample() {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            'event': 'click-event',
            'data-attr': '메인^페이지_메인_Hero_Banner^{{Click Text}}'
          })
        }
        
        // 2. A태그
        <a href=... data-attr="메인^페이지_메인_Hero_Banner^{{Click Text}}" />
        
        // 3. 사용자에게 노출될 경우 발생하는 영역 또는 배너 (고정배너& 고정이미지)
        // Ex) 상품 리스트의 전체 영역
        <div class=... data-attr="메인^페이지_메인_Hero_Banner^{{Click Text}}" data-imp="Y" .. />
        

  • Data Layer 사용
    • dataLayer.push({'event': 'test'}) => 데이터를({'event': 'test'}) dataLayer에 넣는다.
    • 트리거의 GTM 내부 플로우
      • 명령어(dataLayer.push({'event': 'test'})) => 트리거(유형: 맞춤이벤트, 이벤트이름: test) => 태그
    • 적용
      • 트리거 설정
        • 트리거명: DataLayerEvent-트리거
        • 트리거 유형: 맞춤 이벤트
        • 이벤트 이름: DataLayerEvent
        • 이 트리거는 다음에서 실행됩니다: 모든 맞춤 이벤트
      • 태그 생성 (콘솔로그 실행)
        • 태그명: DataLayerEvent-태그 (콘솔)
        • 태그 유형: 맞춤 HTML(맞춤 HTML 태그)

          <script>
            console.log('"태그-dataLayer 활용" 태그가 실행')
          </script>
          

        • 트리거: 상기 설정한 DataLayerEvent-트리거로 지정
      • 태그 생성 (GA 전송)
        • 태그명: DataLayerEvent-태그 (GA)
        • 태그 유형: Google 애널리틱스: 유니버설 애널리틱스
        • 추적 유형: 이벤트
        • 카테고리: {{CODE: 채널유형}}_메인
        • 작업: GNB
        • 라벨: 메뉴명
        • Google 애널리틱스 설정: GA코드 입력(Ex: UA-XXXXXX...)
        • 트리거: 상기 설정한 DataLayerEvent-트리거로 지정
      • 적용 테스트
        • 해당 사이트 콘솔로그에서 하기 명령을 실행

          // 트리거 이벤트 명의 대소문자 일치하지 않으므로 실행 안됨
          > dataLayer.push({'event': 'datalayerevent'});
          < true
          
          // 트리거 이벤트명이 일치하므로 실행
          > dataLayer.push({'event': 'DataLayerEvent'});
            ""태그-dataLayer 활용" 태그가 실행"
          < false
          

  • HTML Data 속성으로 클릭 이벤트 추적
    • 태그매니저로 특정 요소의 클릭 이벤트를 추적
    • class 또는 id로 추적하고 싶지 않다. (UI변경시 해당 속성이 변경되면 위험)
    • data-attr="bkjeon-btn" 방식의 속성으로 클릭 이벤트를 추적
    • 데이터는 GA에 이벤트 형태로 쌓음
    • 적용
      • 예시 태그

        ...
        <button data-attr="bkjeon-btn">완료</button>
        ...
        

      • 변수 생성
        • 변수명: 공통_자바스크립트_데이터_변수
        • 변수유형: 맞춤 자바스크립트

          // {{Click Element}} 는 태그매니저에 기본으로 정의된 변수이다. 이 변수를 활용한 새로운 변수를 생성
          // e.closest('[data-attr]'); 는 data-attr 라는 속성을 찾는다. closest 함수를 사용하는 이유는 Click Event 변수가 작동할 때 정확히 어떤 Element를 Target으로 하는지 예측하기 힘들기 때문
          // closestEle.dataset.attr; 는 data-attr 속성의 값을 리턴해주는 역할 즉, 트리거를 통해 발동이 되면 태그에 값을 전달할 수 있다.
          function(){
            var e = {{Click Element}};
            var closestEle = e.closest('[data-attr]');
            return closestEle.dataset.attr;
          }
          

      • 트리거 생성
        • 트리거명: 자바스크립트_트리거
        • 트리거 유형: 클릭 - 모든 요소
        • 이 트리거는 다음에서 실행됩니다: 일부 클릭
        • 이벤트가 발생하고 모든 조건을 충족하는 경우 이 트리거 실행
          • 상기 지정한 공통_자바스크립트_데이터_변수, 같음, bkjeon-btn
          • 즉, 사용자가 무언가를 클릭 시 자기 자신 혹은 가까운 부모에 data-attr 라는 속성이 존재하고 그 값이 bkjeon-btn와 동일하면 트리거 발생
      • 태그 생성
      • 태그 유형: Google 애널리틱스: 유니버설 애널리틱스
      • 추적 유형: 이벤트
      • 카테고리: {{CODE: 채널유형}}_메인
      • 작업: GNB
      • 라벨: 메뉴명
      • Google 애널리틱스 설정: GA코드 입력(Ex: UA-XXXXXX...)
      • 트리거: 상기 설정한 자바스크립트_트리거로 지정

2. GTM 권장 적용 방법

• Click Event(링크속성 Ex: A태그) 기존 하나 하나 적용하는 방식이 아닌 그룹화 적용
  • 변수 생성
    • 공통_데이터속성_클릭_체크_변수
      • 설명: 클릭한 태그의 데이터속성에 우리가 지정한 데이터속성이 들어있는지 체크
      • 변수유형: 맞춤 자바스크립트

        function(){
          if ({{Click Element}}.getAttribute("data-attr")){
            return "true";
          }
        }            
        

    • 공통_카테고리_클릭_변수 (JS)
      • 설명: 클릭한 태그의 우리가 지정한 데이터속성값의 구분자로 배열을 생성하여 원하는 인덱스값 리턴(해당 변수는 첫 번째 인덱스값 리턴)
      • 변수유형: 맞춤 자바스크립트

        function(){
          return {{Click Element}}.getAttribute("data-attr").split("^")[0];
        }            
        

    • 공통_액션_클릭_변수 (JS)
      • 설명: 클릭한 태그의 우리가 지정한 데이터속성값의 구분자로 배열을 생성하여 원하는 인덱스값 리턴(해당 변수는 두 번째 인덱스값 리턴)
      • 변수유형: 맞춤 자바스크립트

        function(){
          return {{Click Element}}.getAttribute("data-attr").split("^")[1];
        }            
        

    • 공통_라벨_클릭_변수 (JS)
      • 설명: 클릭한 태그의 우리가 지정한 데이터속성값의 구분자로 배열을 생성하여 원하는 인덱스값 리턴(해당 변수는 세 번째 인덱스값 리턴하며 만약 네 번째 인덱스값이 존재하면 _ 구분자로 문자열을 합침)
      • 변수유형: 맞춤 자바스크립트

        function(){
          var labelNameArr = {{Click Element}}.getAttribute("data-attr").split("^");
          var returnLabel = labelNameArr[2];
        
          if (labelNameArr[3]) {
            returnLabel += '_' + labelNameArr[3];
          }
        
          return returnLabel;
        }
        

  • 트리거 생성
    • 공통_링크속성이벤트_트리거
      • 트리거 유형: 링크만
      • 이 트리거는 다음에서 실행됩니다.
        • 일부 링크 클릭
      • 이벤트가 발생하고 모든 조건을 충족하는 경우 이 트리거를 실행
        • 공통_데이터속성_클릭_체크_변수, 포함, true
        • 공통_카테고리_클릭_변수 (JS), 정규 표현식과 일치하지 않음(대소문자), null|undefined
    • 공통_클릭속성이벤트_트리거
      • 트리거 유형: 클릭 - 모든 요소
      • 이 트리거는 다음에서 실행됩니다.
        • 일부 클릭
      • 이벤트가 발생하고 모든 조건을 충족하는 경우 이 트리거를 실행
        • Page Path, 정규 표현식과 일치하지 않음(대소문자), true
        • Click Element, CSS 선택 도구와 일치하지 않음, a
        • 공통_데이터속성_클릭_체크_변수, 포함, true
  • 태그 생성
    • 태그명: 공통_클릭_이벤트_태그
    • 태그유형: Google 애널리틱스: 유니버설 애널리틱스
    • 추적유형: 이벤트
    • 카테고리: {{공통_카테고리_클릭_변수 (JS)}}
    • 작업: {{공통_액션_클릭_변수 (JS)}}
    • 라벨: {{공통_라벨_클릭_변수 (JS)}}
    • 트리거
      • 공통_링크속성이벤트_트리거
      • 공통_클릭속성이벤트_트리거
  • 테스트
    • HTML 코드

      ...
      // data-attr="en_pc_메인^header^cart" 적용
      <a class="btn btn-cart" role="alert" data-attr="en_pc_메인^header^cart"><span class="sr-only">cart<!-- cart --></span><span class="badge red">0</span></a>
      ...
      

    • GA 확인
      • 이벤트 카테고리: en_pc_메인
      • 이벤트 액션: header
      • 이벤트 라벨: cart
• Push Event 기존 하나 하나 적용하는 방식이 아닌 그룹화 적용
  • 변수 생성
    • 공통_dataLayer_dataAttr
      • 설명: 클릭한 Element의 data-attr 속성값을 가져온다.
      • 변수유형: 데이터 영역 변수
      • 데이터 영역 변수 이름: data-attr
      • 데이터 영역 버전: 버전 2
    • 공통_카테고리_클릭_변수 (DL)
      • 설명: 클릭한 태그의 우리가 지정한 변수의 설정된 데이터 속성인 data-attr의 값을 구분자로 배열을 생성하여 원하는 인덱스값 리턴(해당 변수는 첫 번째 인덱스값 리턴)
      • 변수유형: 맞춤 자바스크립트

        function(){
          return {{공통_dataLayer_dataAttr}}.split("^")[0];
        }        
        

    • 공통_액션_클릭_변수 (DL)
      • 설명: 클릭한 태그의 우리가 지정한 변수의 설정된 데이터 속성인 data-attr의 값을 구분자로 배열을 생성하여 원하는 인덱스값 리턴(해당 변수는 두 번째 인덱스값 리턴)
      • 변수유형: 맞춤 자바스크립트

        function(){
          return {{공통_dataLayer_dataAttr}}.split("^")[1];
        }        
        

    • 공통_라벨_클릭_변수 (DL)
      • 설명: 클릭한 태그의 우리가 지정한 변수의 설정된 데이터 속성인 data-attr의 값을 구분자로 배열을 생성하여 원하는 인덱스값 리턴(해당 변수는 세 번째 인덱스값 리턴)
      • 변수유형: 맞춤 자바스크립트

        function(){
          return {{공통_dataLayer_dataAttr}}.split("^")[2];
        }        
        

  • 트리거 생성
    • 공통_푸시이벤트_트리거
      • 트리거 유형: 맞춤 이벤트
      • 이벤트 이름: click-event
      • 이 트리거는 다음에서 실행됩니다: 모든 맞춤 이벤트
  • 태그 생성
    • 태그명: 공통_푸시_이벤트_태그
    • 태그유형: Google 애널리틱스: 유니버설 애널리틱스
    • 추적유형: 이벤트
    • 카테고리: {{공통_카테고리_클릭_변수 (DL)}}
    • 작업: {{공통_액션_클릭_변수 (DL)}}
    • 라벨: {{공통_라벨_클릭_변수 (DL)}}
    • 트리거
      • 공통_푸시이벤트_트리거
  • Event Push 코드 작성

    // Function 실행
    ...
    dataLayer.push({
      'event': 'click-event',
      'data-attr': common.lang + '_' + common.dvceVal + '_' + '메인^테스트^클릭테스트라벨'
    });    
    ...
    

• 폼 이탈 Push Event
  • 변수 생성
    • 공통_dataLayer_dataAttr
      • 설명: 클릭한 Element의 data-attr 속성값을 가져온다.
      • 변수유형: 데이터 영역 변수
      • 데이터 영역 변수 이름: data-attr
      • 데이터 영역 버전: 버전 2
    • 공통_카테고리_클릭_변수 (DL)
      • 설명: 클릭한 태그의 우리가 지정한 변수의 설정된 데이터 속성인 data-attr의 값을 구분자로 배열을 생성하여 원하는 인덱스값 리턴(해당 변수는 첫 번째 인덱스값 리턴)
      • 변수유형: 맞춤 자바스크립트

        function(){
          return {{공통_dataLayer_dataAttr}}.split("^")[0];
        }        
        

    • 공통_액션_클릭_변수 (DL)
      • 설명: 클릭한 태그의 우리가 지정한 변수의 설정된 데이터 속성인 data-attr의 값을 구분자로 배열을 생성하여 원하는 인덱스값 리턴(해당 변수는 두 번째 인덱스값 리턴)
      • 변수유형: 맞춤 자바스크립트

        function(){
          return {{공통_dataLayer_dataAttr}}.split("^")[1];
        }        
        

    • 공통_폼이탈_라벨_변수 (DL)
      • 설명: data-attr 값을 ^ 구분자로 배열을 만들어 slice 함수를 통하여 구분자 세 번째 라벨값에 있는 배열 데이터를 > 구분자로 변경하여 리턴
      • 변수유형: 맞춤 자바스크립트

        function(){
          var arrayVar = {{공통_dataLayer_dataAttr}}.split('^');
          return arrayVar.slice(2, arrayVar.length).join('>')
        }        
        

  • 트리거 생성
    • 공통_폼이탈_트리거
      • 트리거 유형: 맞춤 이벤트
      • 이벤트 이름: formAbandonment
      • 이 트리거는 다음에서 실행됩니다: 모든 맞춤 이벤트
  • 태그 생성
    • 태그명: 공통_폼이탈_태그
    • 태그유형: Google 애널리틱스: 유니버설 애널리틱스
    • 추적유형: 이벤트
    • 카테고리: {{공통_카테고리_클릭_변수 (DL)}}
    • 작업: {{공통_액션_클릭_변수 (DL)}}
    • 라벨: {{공통_폼이탈_라벨_변수 (DL)}}
    • 트리거
      • 공통_폼이탈_트리거
  • 스크립트 작성
    • 적용 HTML 태그

      ...
      <div class="form-group">
        <input id="addr" type="text" class="form-control" data-attr="주문자정보^address" />
      </div>
      ...
      <div class="col-xs-6">
        <input type="text" id="firstName" name="firstName" class="form-control" data-attr="주문자정보^first name">
      </div>      
      ...
      

    • 스크립트

      const gtmFormArray = [];
      $('#orderForm').find('[data-attr]').focusout(function () {
        const gtmDataAttrStr = $(this).attr("data-attr");
        if (gtmDataAttrStr != null && gtmDataAttrStr != "") {
          gtmFormArray.push(gtmDataAttrStr);
        }
      });
      
      $(window).on("beforeunload", function() {
        if (gtmFormArray!= null && gtmFormArray.length) {
          dataLayer.push({
            'event' : 'formAbandonment',
            'data-attr': shop.bkjeon.lang + '_' + shop.bkjeon.dvceVal + '_폼이탈^Place Order^' + gtmFormArray.join(' > ')
          });
        };
      });
      
      $(document).on("submit", "form", function() {
        $(window).off("beforeunload");
      });

    • 결과
      • Ex) 주문자정보>Address Line 2 > 주문자정보>Address Line 1 > 주문자정보>Address Line 2