지금 내가 하고 있는 직무와 관련 된 내용과 공부하고 있는 내용을 정리하고 기억하기 위해서 블로그를 개설했다.
앞으로 블로그에는 내가 하고 있는 업무와 관련된 내용과 공부하고 있는 내용을 정리해서 기록하고자 한다.
티스토리의 장점 중에 하나는 구글 검색 엔진에서 노출이 잘 된 다는 것도 있지만, Google Analytics 를 통해 내 블로그에 유입되는 사용자들의 웹로그 데이터를 분석할 수 있기 때문이다. 내가 앞으로 블로그에 정리할 내용의 대다수가 Google Analytics 의 기본적인 부분 부터 조금은 어려운 내용까지 다룰 예정이고 그 내용은 바탕은 내 블로그에 유입되는 사용자 데이터를 기반으로 정리해 볼까 한다. (과연 그만큼 사용자들이 블로그에 들어올까...)
티스토리에서 Google Analytics 를 연동하는 방법에는 크게 3가지가 있다.
1) 티스토리에서 제공하는 플러그인 사용
2) 티스토리에 직접 GA gtag.js 스크립트 코드 삽입
3) 구글태그매니저(GTM)을 활용하여 GA 연동
사실 단순히 대부분의 블로그를 운영하는 사용자는 Google Analytics(이하 GA) 가 뭔지 모르는 사람들이 훨씬 더 많을 테고 GA를 알고 있다고 해도 블로그를 관리하는 목적에 GA를 활용하고자 한다고 하더라도 그냥 티스토리에서 제공하는 플러그인을 사용해서 쉽게 연동하는게 가장 쉽고 효율적인 방법이다.
다만, 나의 경우는 GA와 관련된 내용이 주된 콘텐츠가 될 것이기 때문에 1)번, 2)번이 아닌 3)번 구글태그매니저(GTM)을 활용하여 티스토리에 GA를 연동하는 방법으로 첫번째 블로그 글을 작성해 볼까 한다.
[GTM을 활용하여 GA연동]
1) GA 계정 및 속성 생성
2) GA 속성 추적코드 확인
3) GTM 계정 및 컨테이너 생성
4) 블로그 <html> 파일 내에 GTM 스크립트 삽입
5) GTM 에서 변수, 태그, 트리거 생성 : 모든 페이지뷰 수집
GTM을 활용하여 티스토리에 GA를 연동하기 위해서는 크게 위와 같은 5가지의 작업이 필요하다.
1) GA 계정 및 속성 생성
2) GA 속성 추적코드 확인
구글애널리틱스 뿐만 아니라 구글과 관련된 솔루션을 사용하기 위해서는 필수적으로 gmail 계정 생성이 필요하며, gmail 계정만 있다면 구글애널리틱스와 구글태그매니저 계정을 생성하는 일은 어렵지 않다.
3) GTM 계정 및 컨테이너 생성
구글태그매니저의 계정 및 컨테이너를 생성한 이후에 관리 화면을 들어가면 위와 같은 화면을 볼 수 있다. 구글 태그매니저에서 이야기하는 컨테이너는 구글애널리틱스의 속성(Property)와 유사한 개념이라고 이해해주면 좋을 것 같다.
구글태그매니저(GTM) 관리 화면에서 Install Google Tag Manager 항목에 들어가면 해당 구글태그매니저를 설치하기 위해 티스토리 블로그에 넣어줘야할 스크립트 코드를 확인할 수 있으며, 위 사진에서 하이라이트 처진 부분이 우리가 설치한 구글 태그매니저 컨테이너의 고유한 값(GTM-XXXXXX)이다.
두 가지 코드가 나오는 데 각각 티스트리 블로그의 HTML 내의 <head> 영역과 <body> 영역 최상단에 삽입해 주면 된다.
4) 블로그 <html> 파일 내에 GTM 스크립트 삽입
티스토리 스킨편집 화면에 들어가면 블로그의 html 을 편집할 수가 있으며 블로그 내에 구글태그매니저 코드를 삽입할 수 있다. 위에도 말했지만, 가능하면 <head> 와 <body> 각 태그의 최상단에 구글태그매니저 코드를 삽입해 주는게 가장 좋다.
5) GTM 에서 변수, 태그, 트리거 생성 : 모든 페이지뷰 수집
구글태그매니저 메인화면에 보면 좌측에 Tags, Triggers, Variables 라는 카테고리가 나와 있다. 구글태그매니저를 사용해 태깅작업을 진행할 때 반드시 사용해야 하는 것이 태그, 트리거, 변수이다. 이 중에서도 나중에 조금 어려운 태그를 활용하기 위해서는 변수를 잘 생성하는게 가장 중요하다.
5-1) GA Config 변수 생성
원래 우리의 목적이었던 구글 태그매니저를 사용하여 GA를 티스토리와 연동해보자. 그러기 위해서는 우선 제일 처음 생성했던 GA 속성에 데이터를 전송해 주기 위해 GA 추적코드를 설정해 주어야 한다. 태그를 생성할 때마다 해당 추적코드를 설정해 줘야 하는 번거로움이 있기 때문에 GA 추적코드를 변수화 하여 관리하기로 한다.
5-2) 트리거 생성
태그와 트리거 어떤 것을 먼저 만들어도 큰 상관은 없다. 하지만 궁극적으로는 GA 속성에 데이터를 전송하는 역할을 하는 것이 태그(Tag) 이며, 해당 태그(Tag)가 원하는 조건 하에서 발동하도록 하는 것이 트리거(Trigger)의 역할이다. 나는 우선 트리거를 먼저 생성할텐데, 이번에 설치할 모든 페이지 조회(All Page)에 대한 트리거는 최초 구글 태그매니저를 생성하면 Default 로 만들어 지는 트리거이기 때문에 별도로 트리거를 새로 만들 필요는 없다.
5-3) 태그 생성
태그를 생성할 때 필수적으로 입력해줘야 하는 값들이 몇가지 있다.
첫번째. 태그유형(Tag Type)
구글태그매니저는 단순히 구글애널리틱스 뿐만 아니라 다양한 솔루션의 태그를 설치할 수 있다. 페이스북 픽셀 등 마케팅 스크립트 뿐만 아니라 다양한 태그 설정이 가능하지만 구글애널리틱스에 데이터를 수집하기 위해서는 'Google Anlaytics: Universal Analytics' 를 선택해 줘야 한다.
두번째. Track Type
이 부분은 나중에 따로 이야기 하겠지만 구글 애널리틱스는 hit 라는 최소 단위로 데이터를 수집하며, hit 의 종류에는 pageview, event, transaction, timming 등 여러가지 타입이 존재한다. 하지만 우리가 사용할 대부분의 hit는 pageview 와 event 이므로 다른 것을 크게 신경쓰지 않아도 된다.
이번에 태깅하려는 것은 블로그 내에 모든 페이지를 조회 할 때 마다 페이지뷰를 수집하기 위한 태그 생성이므로 Pageview 를 선택한다.
세번째. Google Analtyics Settings
여기에는 GA의 어떤 속성에 데이터를 전송할 것인지를 설정하는 항목이다. 우리가 생성한 GA 속성에서 데이터를 확인하기 위해서는 해당 속성에 데이터를 전송해 줘야한다. 구글 애널리틱스 관련 태그를 생성할 때는 모든 태그에 해당 GA 추적코드를 설정해 줘야 하기 때문에 우리가 가장 먼저 작업해 준 것이 GA의 추적코드를 '변수화' 한 것이다.
변수화한 GA추적코({{GA_Config}})를 선택한다.
이제 우리가 생성한 태그, 트리거, 변수가 제대로 작동하는지를 최종적으로 확인해야 한다. 이번에 생성한 태그는 간단해서 큰 문제가 없지만 커스텀한 이벤트 태그를 생성하거나 할 때는 반드시 제대로 값이 설정이 되었는지 최종 배포 전 검수하는 단계가 필요하다.
값을 검수하는 방법으로는 아래 두가지가 있지만, 미리보기 모드를 통해 디버그 모드를 활용하는 방법은 이번 게시물에서는 Skip 하고자 한다.
1) 미리보기모드(Preview) 실행 후 디버그 창에서 태그 발동 여부 확인
2) GA 실시간 보고서를 통해 데이터 수집 여부 확인
최종적으로 구글 태그매니저에서 생성한 태그를 배포하면 위와 같이 구글애널리틱스에 정상적으로 데이터가 수집되는 것을 확인할 수 있다.
위에서 말했듯이 블로그에 방문하는 사람들의 데이터를 확인하기 위해서는 티스토리에서 제공하는 기본적인 플러그인을 사용하여 연동해도 충분하다. 다만 나는 앞으로 몇가지 이벤트 태깅도 진행하고자 굳이 번거롭게 구글 태그매니저를 통해서 구글 애널리틱스를 연동하였다.
이미 구글 태그매니저를 사용할 수 있는 사람이라면 티스토리에도 그다지 어렵지 않게 구글태그매니저를 활용할 수 있을 것이라고 생각한다.
앞으로는 구글애널리틱스에서 제공하는 다양한 지표들의 의미와 보고서 등에 대해서 정리해볼 예정이다. 처음 구글애널리틱스를 배우고 활용할 때 이제 어느정도 구글 애널리틱스를 쓸 줄 안다고 생각했지만, 실제로 구글 애널리틱스를 조금 깊게 공부해 보니, 내가 제대로 알지 못했던 것이 많았다.
단순히 획득 보고서에서 채널 별 유입현황을 볼 줄 아는 것이 중요한 것이 아니라 각 보고서에서 보여주는 지표의 의미를 명확하게 이해해야만 그 보고서에서 보여주는 데이터가 의미하는 바를 이해하고 숫자 속에서 인사이트를 발견해 낼 수 있다고 생각한다.
댓글