안녕하세요. 그로스 해킹 에이전시, LABBIT 입니다. LABBIT은 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 오픈애즈에 구글 애널리틱스의 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 일곱 번째 이야기를 진행해보도록 할게요.

추적 코드를 삽입하기 위해서는 , 추적 코드를 넣을만한 웹사이트가 있어야 합니다. 웹사이트의 코드를 수정할 수 있는 권한이 있어야 하기 때문입니다.. 아마 대부분의 분들은 자신의 웹사이트를 가지고 있지 않을 것으로 보여, 간단히 실습할 수 있는 블로그를 만들어봅시다. 네이버 블로그는 코드 수정을 지원해주지 않고 있어, 구글 애널리틱스와 같은 외부 툴을 설치할 수 없습니다. 하지만, 다음에서 제공 주고 있는 티스토리 블로그는 다행히도 코드 수정을 지원해주고 있습니다. 추적 코드를 삽입하는 방법은 의외로 간단합니다.  

우선 새 창을 열어, 티스토리 블로그를 하나 만들어봅시다.   

티스토리 블로그를 검색하여 메인 페이지로 이동합니다.  

오른쪽 상단 가입하기 버튼을 눌러주세요.   

안내에 맞게 회원가입을 진행하고, 스킨을 선택하면 여러분의 블로그가 매우 쉽게 만들어집니다.    

완성된 홈페이지에서 오른쪽 하단 [관리] 버튼을 눌러서, 티스토리 블로그 관리자로 이동해봅시다. 

오른쪽 상단에 보시면 [HTML 편집]이라는 메뉴가 있습니다. 이곳에서 여러분 블로그의 코드를 수정하고, 설명드렸던 자바스크립트 코드인 구글 애널리틱스 추적 코드를 삽입할 수 있습니다. 

자 무슨 내용인지는 모르겠으나, 우리 블로그의 HTML이 있는 것을 확인할 수 있습니다. 이 상태에서 열어두었던 구글 애널리틱스의 [관리] - [속성 열] - [추적 정보] - [추적 코드]로 이동하여, 우리의 설치 코드를 봅시다.  

추적 코드를 모든 웹 페이지의 의 첫 번째 항목으로 붙여 넣으라고 합니다. 겁먹을 것 없이, 이 코드를 복사하여, 우리 티스토리 블로그 HTML 파일에서 HEAD를 찾아서, 붙여 넣기를 해줍시다. 간단하죠?  

마지막으로 [적용] 버튼을 누르면, 구글 애널리틱스 코드의 설치가 완료됩니다. 우리는 지금, “우리 웹사이트에 들어오는 모든 사람들의 데이터를 추적하여, 우리 구글 애널리틱스 고유의 계정으로 데이터를 처리하라"라는 명령어의 자바스크립트를 우리 티스토리 블로그에 설치한 것입니다. 추후, 추적을 원하지 않는다면, 이 HTML 파일에 있는 추적 코드를 삭제하면, 추적하지 않습니다. 

간혹 강의를 하다가, 다른 사이트의 데이터도 추적할 수 있냐고 물어보시는 분들도 계신데요. 일단 소유권을 가지고 있지 않은 상태에서 다른 사이트의 데이터를 추적하는 것은 엄연히 불법 행위입니다. 

그리고, 특정 웹사이트의 HTML을 수정할 수 있는 권한을 가지고 있어야, 구글 애널리틱스를 성공적으로 설치할 수 있습니다. 우리는 티스토리 블로그를 직접 만들어서 관리자의 권한으로 개설할 수 있었기 때문에, HTML을 수정할 수 있었습니다. 

이제 구글 애널리틱스 코드가 성공적으로 설치되었는지 확인하기 위해, 검토를 해보아야겠죠? 검토를 하는 방법은 크게 2가지가 있습니다. 첫 번째는, 티스토리 블로그에 방문을 한 상태에서, 구글 애널리틱스의 [실시간 리포트]로 이동하여, 내 트래픽이 정상적으로 들어오는지 확인하는 것입니다. 두 번째는, 확장 프로그램을 활용하여, 구글 애널리틱스가 문제없이 설치되었는지 확인하는 방법입니다. 

우선 첫 번째 방법부터 안내드릴게요. 

1) 첫 번째 데이터 확인 방법 : 실시간 리포트

실시간 리포트 확인 방법은 말 그대로, 구글 애널리틱스의 실시간 리포트에서 내 트래픽이 집계되는지 확인을 해주면 끝납니다. 구글 애널리틱스의 왼쪽 카테고리에서, [실시간] - [개요] 카테고리로 이동합니다. 

실시간 리포트에 방금 만든 블로그의 데이터가 들어오고 있는 것을 확인하였습니다. 당연히 우리는 데스크톱 환경에서 들어왔기 때문에, 데스크톱에서 트래픽이 잡히겠죠? 모바일로도 한번 들어가 보게 되면, 모바일 트래픽이 잡힐 것입니다. 

실시간 리포트에서, [인기 사용 중 페이지] 항목을 보면, 우리 웹사이트 내에서, 현재 어느 웹 페이지에 있는지 보여줍니다. “ / “ 이렇게 슬래쉬 하나만 간단하게 있는 것은 현재 트래픽이 우리 웹사이트 메인 페이지에 들어와 있기 때문입니다. 구글 애널리틱스에서 메인 페이지는 단순히 슬래쉬 하나로 표현합니다.  

그럼, 티스토리 블로그 메인 페이지 우측 상단에서 메뉴를 클릭하여 [방명록] 쪽으로 이동해볼까요?  

방명록 페이지로 이동하는 순간 우리의 주소가 바뀌게 되는 것을 확인할 수 있습니다. 다시 구글 애널리틱스의 실시간 리포트로 이동해 봅시다.  

구글 애널리틱스의 실시간 리포트에 “ /guestbook “이라고 표시가 됩니다. 메인 도메인 다음에 슬래쉬로 이어지는 부분을 우리는 [서브 도메인]이라고 부릅니다. 즉, 정리를 하면 구글 애널리틱스에서 메인 페이지는 슬래쉬 하나로 표기되고, 다른 페이지로 이동하면 메인 페이지의 서브도메인이 나타난다는 것을 확인할 수 있습니다.   

2) 두 번째로 구글 애널리틱스의 설치 여부를 확인할 수 있는 방법은, 구글 애널리틱스를 포함한 구글 소프트웨어의 정상적인 설치 여부 확인을 도와주는 크롬 확장 프로그램입니다. 이 크롬 확장 프로그램을 우선 먼저 설치해 보겠습니다. 여러분 크롬 브라우저의 오른쪽 상단에 점이 세로로 3개 표기되어 있는 부분이 있을 것입니다. 이 메뉴를 눌러주세요.  

메뉴를 누르고 난 뒤, [도구 더보기] - [확장 프로그램]으로 이동합니다.  

그러면 여러분이 사용하고 계신 확장 프로그램들의 목록이 나타나는데, 확장 프로그램을 설치한 적이 없는 분들은 빈 공간으로 나타날 것입니다. 확장 프로그램이란, 크롬 브라우저에서 다양한 사람들이 크롬의 사용 환경을 자신들의 사용용도에 따라 좀 더 편리한 사용을 위해 고안된 소프트웨어들을 판매하거나 무료로 제공해주는 곳입니다. 확장 프로그램의 종류는 다양하지만, 우리는 지금 “구글 애널리틱스가 잘 설치되었는지 확인을 도와주는" 확장 프로그램을 설치하기 위해, 크롬 웹 스토어로 이동해보겠습니다.  

다양한 확장 프로그램이 나타나고, 왼쪽에는 우리가 원하는 확장 프로그램을 찾도록 도와주는 검색창이 있습니다. 이 검색창에 영어로. [Tag Assistant]라고 검색해봅시다.   

웃고 있는 모양의 tag assistant라는 확장 프로그램이 보이시나요? 저는 설치를 이미 해두었기 때문에, [평가하기]라는 버튼이 나타나지만, 설치가 되어있지 않은 분들은 [설치하기]라는 버튼이 나타나 있을 것입니다. 설치하기 버튼을 눌러주세요. 설치가 정상적으로 완료되면, 크롬 브라우저 메뉴창에 웃고 있는 조그마한 모형이 나타날 것입니다.  

이 태그 어시스턴트가 GA 코드가 잘 설치되었는지, 여부를 확인해줍니다. 저처럼, 모형이 나타났다면 다시 티스토리 블로그 메인 화면으로 이동해봅시다.  

이동한 다음, 조그마한 썸네일을 클릭하면 [Record]라는 버튼이 나타납니다. 레코드 버튼을 누르게 되면, 빨간색으로 버튼의 색이 바뀌면서, 트래킹 녹화가 시작됩니다. 

이 상태에서 새로고침을 눌러봅시다. 그러고 나서, 다시 tag assistant를 눌러주세요.  

정상적으로 구글 애널리틱스 코드가 설치되었다는 것을 확인할 수 있습니다. 만약에 설치 코드에 문제가 있다면, 코드의 색이 노란색이나 빨간색으로 변환하여, 오류 내역을 알려주게 됩니다. 실제 실무에서도 오류 내역을 보고 코드의 문제가 있을 시의 원인을 찾아내곤 합니다. 대표적인 오류로는 태그가 2번 설치되거나, 잘못된 위치에 설치된 경우입니다. 같은 태그가 2번 설치되면, 중복 트래킹의 이슈가 발생할 수 있습니다. 중복 트래킹이 되면, 1명의 사람이 들어와도 구글 애널리틱스에는 2명으로 구분하는 등 데이터 자체가 2배 불어날 수 있으니 정확한 데이터 트래킹 능력을 잃어버립니다. 반드시 주의해주셔야 합니다.

자, 이제 우리는 구글 애널리틱스를 우리 웹사이트에 설치완료 하였고, 확인 작업까지 마무리했습니다. 다음 장에서는 본격적으로 구글 애널리틱스의 기본적인 세팅 영역을 순차적으로 다뤄보겠습니다.

 그로스 해킹 파트너, 그로스해킹LABBIT 바로가기