이벤트, 가상 페이지뷰, 소셜 활동, 에러 추적 1

이벤트, 가상 페이지뷰, 소셜 활동, 에러 추적 1

 

GA 속성을 페이지뷰 데이터로 즉시 채우기 시작하겠지만, 그것만으로 웹 페이지에서 방문자들이 활동하는 내용을 전체적으로 이해하기는 역부족이다.

이 부족함을 채우기 위해 이벤트와 가상 페이지뷰, 소셜 추적을 설정할 수 있으며 이 모든 내용을 이번에 공부할 수 있다.

이 과정에서 GTM 기술을 많이 연습하게 될 것이다. 기술적 내용을 상세히 검토하고 GTM의 고급 기능을 소개하고 있으므로 마케터나 분석가라면 이번 기회에 이벤트와 가상 페이지뷰, 소셜 활동, 에러 추적의 기본 원리에 대해 배워서 구현 과정에서 개발자들과 함께 일할 수 있을 것이다.

 

#이벤트 추적의 필요성

페이지뷰 추적은 각 기본 페이지뷰 Hit가 페이지, 방문자의 트래픽 소스, 지역 위치, 방문자 그 페이지에 방문했을 때 사용했던 기술환경, 신규/재방문 사용자 여부 등 광범위한 측정기준 값을 가진다는 점에서 매우 포괄적이다.

 

포괄적인 만큼 페이지뷰 히트는 페이지가 로딩될 때만 생성되면 GA로 추적하는 페이지가 로딩되지 않는 한 GA속성이 어떤 사용자 상호작용도 기본으로 기록하지는 않는다는 사실을 아는 것이 중요하다. 일반적으로 이벤트 추적은 새 화면 로딩없이 상댱량의 상호작용이 일어나는 모바일 앱 추적에서도 중요한 역할을 한다.

 

 

 

1. 클릭은 아무 일도 하지 않는다.

앞의 내용을 좀 더 설명하자면 GA로 작업하는 사람, 그중에서도 특히 구현하는 사람이면 "기본적으로 클릭 활동은 GA에서 추적되지 않는다"는 기본적인 추적 개념을 이해하는 것이 매우 중요하다. 클릭으로 웹사이트의 페이지에 접근하고 그 페이지에 GA 추적코드나 GTM의 GA페이지뷰 태그가 들어 있다면 GA는 페이지뷰를 기록한다. 그 클릭이 직접 GA에 기록되는 것이 아니라 그 클릭으로 파생한 결과인 페이지뷰가 기록되는 것이다. 마찬가지로 스크롤링이나 마우스를 위에 올려 두는 등의 브라우저 활동 역시 기본적으로는 GA에 기록되지 않는다.

 

 

• 페이지뷰가 발생하지 않는 링크
  - 외부링크
  - mailto : 이메일 클라이언트 프로그램 열기
  - PDF, 스프레드시트, 파워포인트/프레젠테이션
  - 같은 페이지 내의 앵커(anchor) 링크
• 소셜 미디어 연결 링크
• 소셜 컨텐츠 링크
• 비디오
• 도움말이나 제품 종류를 표시하기 위해 마우스를 위해 올리기
• 실시간 채팅, 지도, 그 외 별도 문서로 등장하지 않는 모달(modal) 및 모드리스(modeless) 팝업
• 탭
• 표필터
• 스크롤링
• 회전식 보기에서 이미지 탐색
• 댓글 등록
• 리뷰/평점 제출
• 개별 양식 필드 채우기 또는 드롭다운 메뉴 선택
• 한 페이지에서 동일한 페이지를 가리키는 여러 링크 구분하기
• 여러 AJAX 화면을 위한 가상 페이지뷰에서 설명한 것처럼 URL변경이 일어나지 않는 여러 단계/여러 화면으로 이루어진 프로세스
• 단일 - 페이지로 된 웹 애플리케이션
• 페이지를 로딩하지 않고 페이지를 업데이트하는 AJAS나 jQuery, 자바스크립트 라이브러리, 또는 HTML5 캔버스 요소를 사용하도록 디자인된 기타 상호작용
• tel : 링크(자동 다이얼)
• 아코디언 메뉴
• 화면 회전(세로보기 /가로보기)
• 화면 축소 / 확대

★ tel : 링크

최신 모바일 브라우저에서는 전화번호를 클릭했을 때 자동 다이얼 되도록 하기 위해 웹 개발자가 전화번호를 tel : 링크로 감싸지 않아도 된다. 하지만 전화번호에 tel : 클릭을 추적하는 이벤트를 쉽게 설정할 수 있으며 그 이벤트 데이터를 기반으로 목표 설정도 수월하게 할 수 있다. 기능적 관점에서 tel : 래퍼(wrapper)는 전화번호가 아니더라도 텍스트를 클릭했을때도 자동으로 전화를 걸게 해준다.

 

 

 

2. DOM 리스너

이제 문제가 무엇인지 알았다. 문제는 바로 데스트탑과 모바일에서 많이 사용자 상호작용이 기본으로 추적되지 않는다는 것이다. 그렇다면 이 문제를 어떻게 해결할 수 있을까?

 

해결책은 GA 이벤트 추적의 밑바탕이 되는 다른 핵심 개념으로부터 출발한다. 그 개념은 브라우저에서 페이지 로딩 여부와 상관없이 모든 사용자 상호작용에 대한 반응을 코딩할 수 있다는 것이다.

DOM(Document Object Model, 문서 객체 모델)은 자바스크립트를 통해 브라우저와 페이지 요소를 참조하고 조작하기 위한 표기 형식으로서 광범위한 역할을 맡고 있는데, 그 중 하나로 사용자 행동과 코드에 특화된 반응을 '들을(listen)'수 있는 방법을 제공한다.

 

다음은 구현할 수 있는 DOM 리스너 몇 가지다.

 

• onclick
• onmouseover (페이지 구성요소 위에 마우스를 올려두는 것)
• onmouseout (페이지 구성요소 밖으로 마우스를 옮기는 것)
• onkeydown (특정 키를 확인할 수 있음)
• onkeyup (특정 키를 확인할 수 있음)
• onchage (드롭다운 메뉴 선택)
• onfocus (양식 필드로 사용자 클릭)
• onblur (양식 필드에서 떠나는 사용자 클릭)
• onscroll

프론트엔드 웹 개발자가 아니라면 이 목록을 기억할 필요가 없지만, GA 실무자로서 페이지에 추가스크립트를 실행하기 위해 이 리스너들을 사용할 수 있다는 점을 알아야 한다. GTM에서는 클릭(그리고 양식 제출)이 일반적으로 가장 듣기 쉬운 행동 유형이지만, 그 외의 사용자 행동 유형에 대응하는 별도 스크립트를 작성하도록 설정할 수도 있다.