2022. 1. 20. 22:26ㆍ구글 애널리틱스(GA)
Google analytics(이하 GA)를 활용할 때 개발을 최소화 하기 위해 Google Tag Manager(이하 GTM)를 활용한다.
GTM은 DataLayer 라는 객체에 데이터가 Push되면서 GA로 이벤트는 보내는 방식을 사용한다.
이때문에 사이트가 복잡한 구조로 되어 있거나 랜더링 속도가 느린 환경 등에서 데이터 수집이 잘 일어나지 않는 경우가 있다.
이런 경우에는 결국 GTM을 거치지 않고 바로 GA로 데이터를 전송하는 코드로 해결할 수 있다.
바로 gtag.js의 함수를 활용하는 것이다.
물론 MP(Measurement Protocol)이 속도적 측면에서는 가장 빠르긴 하다.
하지만 MP(Measurement Protocol)는 사이트 소스코드의 많은 부분을 수정해야하고 구글이 기본적으로 수집하는 데이터들이 누락될 수 있다.
그래서 절충안인 gtag.js의 함수를 활용해 GA에 데이터를 전송해 보자.
1. GA 스니펫 코드 import
일단 GA의 gtag()함수를 사용하기 위해서는 스니펫 코드를 사이트에 심어야 한다.
스니펫 코드는 GA 대시보드에서 '관리' 메뉴에 들어가 추적정보를 누르면 확인할 수 있다.
코드 부분만 떼어 내면 아래와 같다.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<트레킹 ID>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<트레킹 ID>');
</script>
보통 이 코드를 복사하여 추적할 모든 웹페이지의 <HEAD>에 첫 번째 항목으로 붙여 넣는다.
Tistory 블로그의 경우 플러그인을 통해 해당 스니펫 코드가 블로그에 심어진다.
※ 수집 확인 방법 (Omnibug)
GA로 데이터가 잘 전송되고 있는지 확인하는 툴로 Omnibug가 있다.
Omnibug는 발신 디지털 마케팅 도구 요청을 디코딩하고 표시하는 브라우저 확장 프로그램이다.
GA 데이터도 확인이 가능하고 Adobe analytics나 기타 솔루션들의 데이터도 확인이 가능하다.
설치 후 F12를 눌러 개발자 도구를 열고 탭에서 omnibug를 선택하고 사이트에 접속하면
위와 같이 데이터가 가는 것을 확인할 수 있다.
2. 페이지뷰 수집
MPA(Multiple Page Application) 형태로 기존에 많이 사용하던 SSR(Server side rendering)을 이용하는 사이트의 경우 GA가 자동으로 페이지뷰를 수집한다.
하지만 SPA(Single Page Application) 구조이면서 별도의 SSR(Server side rendering)이 없다면 소스코드를 활용해서 페이지뷰를 잡을 수 있다.
아래와 같이 gtag() 함수를 통해 페이지뷰를 수집할 수 있다.
gtag('event', 'page_view', {
page_title: '<Page Title>',
page_location: '<Page Location>',
page_path: '<Page Path>',
send_to: '<GA_MEASUREMENT_ID>'
})
티스토리의 경우 MPA(Multiple Page Application) 구조로 되어 있어 플러그인만 설치하면 자동적으로 페이지뷰를 수집하게 된다.
3. 이벤트 수집
GA로 페이지뷰만 수집한다면 그것은 GA를 30%도 사용하지 않는 것과 같다.
GA는 페이지뷰 이외에도 웹에서 일어나는 많은 행동들을 수집할 수 있다.
수집하고자 하는 이벤트가 일어날 때 아래 코드를 실행하면 된다.
gtag('event', <action>, {
'event_category': <category>,
'event_label': <label>,
'value': <value>
});
페이지뷰와 거의 비슷한 형태이다.
하나의 예시로 클릭이 일어날 때 해당 이벤트를 함수로 잡아서 코드를 실행시켜주면 된다.
4. 티스토리 블로그에서 관련글 클릭 이벤트 수집 방법
앞서 이야기 했듯이 티스토리 블로그에서는 페이지뷰만이 기본으로 수집된다.
블로그 특성상 페이지뷰 만으로도 어느정도의 분석이 가능하지만
블로그 본문 글 맨 끝에 달리는 관련글을 클릭하는 이벤트를 수집한다면 어떨까?
본문글과 어떤 관련이 있는 글들이 클릭되는지 알 수 있고
해당 글들을 같은 카테고리로 묶어 페이지 체류 시간을 늘릴 수 있을 것이다.
방법은 간단하다
스킨 편집을 열고 html 편집을 누른다.
티스토리는 그렇게 복잡하지 않은 html 형태를 가지고 있고 아래 태그별로 영역이 나눠져 있는 형태이다.
Tistory 블로그 태그 종류와 설명 | |
<s_article_rep> | 글정보 |
<s_ad_div> | 관리 |
<s_tag_label> | 해시태그 |
<s_permalink_article_rep> | 퍼머링크 |
<s_index_article_rep> | 인덱스 |
<s_article_related> | 관련글 |
<s_article_next> | 다음글 |
<s_article_prev> | 이전글 |
우리는 관련글 부분에 이벤트 수집을 할 예정이기 때문에 <s_article_related>태그부분을 찾는다.
<li class="item_related"> 부분이 클릭되면 실행되는 이벤트 리스너를 하나 만든다.
이 코드는 되도록 아래쪽에 위치하게 해서 html이 모두 렌더링 된 다음에 이벤트 바인딩을 할 수 있도록 한다.
<script>
var clickEle = $('.list_related li');
clickEle.click(function () {
gtag('event', '관련글 클릭', {
'event_category': $(this).index(),
'event_label': this.getElementsByClassName('box_content')[0].innerText
});
})
</script>
이제 관련글을 클릭하여 이벤트가 가는지 확인해 본다.
Omnibug로 이벤트가 가는걸 확인할 수 있다.
마무리
GA를 코드로 활용하는 방법에 대해 알아보았다.
GTM을 써서 수집하는 것도 좋지만 역시 개발자는 코드로 작성하는게 편하고 작업하는 맛이 난다.
개인적으로 운영하는 서비스나 웹사이트가 있다면 GA를 코드 형태로 심어 서비스 분석을 해보는 것도 좋을 듯 하다.
'구글 애널리틱스(GA)' 카테고리의 다른 글
jquery의 시대는 이제 끝난것인가?(w/ Google Tag Manager) (0) | 2022.02.28 |
---|---|
Google Analytics API 사용법 ② (0) | 2022.01.09 |
Google Analytics API 사용법 ① (0) | 2022.01.05 |
GA 스크립트나 GTM 스니펫 없이 데이터를 전송할 수 있다?Measurement Protocol (0) | 2021.12.24 |
② GA 설치시 개발자가 고려해야 할 사항 5가지 (0) | 2021.01.09 |