티스토리 / 구글 아날리스틱스 웹로그 모바일 유입량 분석은?

티스토리 / 구글 아날리틱스 웹 로그 모바일 유입량 분석은?

티스토리블로그 자체에서도 유입경로라든지 키워드 등에 대한 간단한 정보는 제공한다. 

물론 플러그인을 켜놨을 때에만 점검이 가능하다. 

그 조차도 켜놓지 않으면, 장님 상태로 블로그를 운영하는 꼴이 된다. 

티스토리에서 블로그를 운영하는 정도의 사람들이라면, 어느 정도 IT관련 상식과 식견이 있는 사람들이고, 주워 듣는 풍월로라도 구글 애널리틱스 정도는 설치 해둔 사람들이다. 

문제는...이 구글 애널리틱스 코드를 html/css 설정에서 헤드에다가 코드를 삽입해두고는 별다른 의심을 하지 않는 다는데에 있다. 

티스토리의 관리메뉴에서 html/css에 script코드를 head에 삽입해 둬봤자, 모바일로 티스토리 블로그 글에 유입되는 경우에는 이 헤더에 있는 정보는 적용되지 않는다. 

때문에 실질적으로 모바일 기기의 접속 정보라든지, 유입량, 유입 키워드에 대한 정보를 구글 애널리틱스 수집할 수가 없다.

이 것을 해결할 수 있는 가장 확실한 방법은 글을 쓸 때 마다 모든 페이지에 ga코드를 삽입해두는 것이다.

이 것 또한 녹록치 않다. 

포스팅하는 글 마다 코드를 삽입해두라는 것이지만, 매번 글 쓸 때마다 코드를 삽입하기도 힘들다.

또한 언젠가 정책이 바뀐다든지, 코드가 바뀐다든지, 어느날 갑자기 구글이 폭삭 망해버려서 새롭게 나타난 업체의 분석코드를 삽입하려면, 수백, 수천개의 글을 모두 수정해야 될지도 모르는 문제가 생길 수도 있다.

티스토리에서 구글 애널리틱스 분석 코드를 삽입할 때 발생하는 문제점을 요약하자면 다음과 같다.

1. PC웹용 스킨의 head 영역에 분석코드를 삽입하면, mobile 웹 페이지에서는 분석코드가 동작하지 않는다.

2. 모바일에서도 동작시키기 위해서, 스킨의 head가 아닌, 각 포스팅 글마다 분석코드를 삽입한다면, 포스팅 글이 아닌, 방명록이나, 카테고리 목록, 메인 페이지에서 머무르는 시간들에 대한 정보를 분석할 수가 없다.

3. 스킨의 head에도 분석코드를 삽입하고, 포스팅 글에도 분석코드를 삽입해둔다면, 1명의 방문자에 대해 중복된 데이터가 수집된다.

4. 향후 구글이 망할 수도 있으므로, 모든 글에 로그 분석 코드가 그대로 삽입된다면, 수백, 수천건의 포스팅 글을 한 꺼번에 수정하는데 어려움이 크다.

가장 좋은 방법은 반응형웹스킨을 사용하는 것이 가장 확실하다.

그래서 현재 내 블로그도 반응형스킨을 사용하는 중이다.

문제는 반응형스킨을 쓰지 않는 사람들이 모바일의 로그분석을 원할 경우다.

위와 같은 문제점이 정리되었다면, 문제점을 피할 수 있는 해답을 찾아 내면된다.

1. PC용 웹 스킨의 head와 포스팅 하는 각 글에 모두 분석 코드를 삽입한다.

2. 단, PC용 웹스킨의 분석코드가 동작 할 경우, 카운터 변수에 동작했음을 알리는 값을 저장한다.

3. 포스팅된 글에 삽입된 분석 코드는 카운터 변수가 존재하는지를 따져서, 카운터변수의 값이 0인 경우에만 동작하고, 카운터 변수의 값이 존재하면, 동작하지 않도록 설계한다.

4. 포스팅되는 글에 삽입되는 분석코드는 스킨의 이미지 폴더에 *.js 형태로 새로 만들어진 js파일의 형태로 올려두고, 해당 js파일을 src="~~~"으로 불러 와서 동작시킨다.

이렇게 해두면, 향후 분석 코드를 변경해야 될 경우, 업로드한 js파일을 변경함으로써 언제든지 수정할 수 있고, 포스팅된 전체 페이지에 영향을 끼치게 된다. 스킨의 헤드에 삽입된 분석코드와 업로드된 js파일의 분석코드는 서로 상호 존재를 감지하여, 단 한번만 동작 하도록 하여 정확한 분석 값을 취할 수 있다.

티스토리의 스킨 설정 메뉴로 가서 html/css 의 head에 삽입해둔 구글 아날리틱스 추적 코드의 끝 쯔음에 다음과 같은 코드를 삽입한다.

var visitCnt=1;

이 코드를 삽입해두고, 다음의 과정을 따라하면 된다.

위의 예시그림에서는 4개의 js파일과 2개의 html파일이 있지만, 구글아날리틱스를 위한 파일은 저 중 하나만 사용하면 된다. 

저 파일들은 모두 임의로 명명한 것이고, 별 내용들이 들어 있지는 않다. 

필자의 경우에는 js1.js를 제외한 나머지 파일들은 모바일과 PC용 웹페이지 간의 광고 전환을 위해 사용하는 파일들이다. (구글 애드센스 광고를 제외한 나머지 광고들은 신뢰가 아직 가지 않기 때문에, 구글 아날리틱스의 js파일처럼 응용해서, 내 마음데로 모바일 화면에서도 광고들을 조정할 수 있게 된다)

아무튼 js1.js파일에 구글 아날리틱스 추적코드를 복사해서 넣어준다. .js파일이기 때문에, 

<script tyep="text/javascript">와 </script>는 제거한다.

복사된 코드의 최 상단에는 다음과 같은 코드를 삽입하고, 맨 마지막에 }로 마감해준다.

var visitCnt=visitCnt;

if(visitCnt != 1) {

...

너의 코드를 삽입하라!

...

}

visitCnt = visitCn라고 선언해 둔 이유는, 웹용 스킨에서 미리 var visitCnt=1; 라고 선언했지만, 모바일에서는 그 코드가 불려져 오지 않기 때문이다.

js파일에서 무작정 visitCnt를 호출해서 값을 물어보면 javascript 처리 엔진은 당황하시게 된다. 

그러므로, 저렇게 선언해두면, 최소한 undifined라는 값이라도 얻을 수 있게 된다.

센스있는 사람들은 이미 눈치챘겠지만, 바로 웹스킨에서 visitCnt=1에 의해 "1"이라는 값이 저장되어져 있다면, js파일이 로드되어도, 구글 아날리틱스의 추적코드는 중복 동작하지 않는다. 

반면에, "1"값을 찾지 못하면, js파일이 로드 되어졌을 때 구글의 추적코드가 동작하게 된다.

이렇게 삽입된 코드도 정상적으로 동작하는 것은 하루쯤 지나서 분석 결과를 보면 알 수 있다.

구글아날리틱스에서 모바일 메뉴의 기기 분석 결과를 보는 화면이다.  

전날까지만 해도, 화면이 큰 기기들만 기록되어 있었다. 

페이지에 삽입해둔 뒤로 다양한 모바일 기기들이 접속했었음을 알 수 있다.

각 페이지에 구글 아날리틱스 추적코드를 넣지 않았을 때는 컨텐츠 항목에서 /m/이 붙은 주소를 확인할 수 없었다. 

시험삼아 893번 글에 js파일을 심어두었더니, 위와 같이 24건의 방문건수가 확인되었다. 

저 마저도, 저녁즈음에 삽입된 코드에 의한 결과값이니, 실제 모바일 접속량은 훨씬 많을 것이다.

포스팅된 글에 구글 아날리틱스 추적코드를 삽입하기 전의 기기 카테고리 점유율을 보면, 모바일보다 타블릿이 많은 것 처럼 보이지만, 

페이지에 추적코드를 삽입한 뒤의 결과는 모바일이 압도적으로 많은 유입량을 보여주고 있다.

그리고 현재 위의 결과는 800여편의 글들 중에서 오직 한 편의 글에만 추적코드를 삽입해서 얻은 결과이다. 

모든 페이지에서 모바일 유입량을 확인할 수 있게 될 때 가장 정확한 유입량을 산출할 수 있을 것이다.