현재 개발 및 유지보수하게 된 서비스는 광고에 높은 수익 비중을 두고 있다. 따라서 광고를 효율적으로 노출하는 여러 방법과 관련된 기술을 익힐 필요성을 느끼게 되었고, 또한 그 속에서 사용하게 된 Google Analytics를 잘 사용할 줄 알아야 될 것 같다는 필요성 또한 느끼게 되었다.

구글 아날리틱스

Collection: 유저 인터렉션 데이터 수집

Configuration: 데이터 프로세싱 관리

Processing: 유저 인터렉션 데이터를 설정(Configuration)에 따라 처리

Reporing: 처리 된 모든 데이터에 접근 부여

analytics.js

제공하는 기능

유저가 사이트에서 보내는 총 시간
각 페이지에서 보낸 시간 및 페이지를 방문한 순서
클릭 된 내부 링크

새로운 트래커 객체를 생성했을 때 추가 기능

사용자의 지리적 위치
사용되는 브라우저와 시스템
스크린 크기와 Flash/Java 가 설치 되있는지
참조 사이트

Google Anaytics tag

<!-- Google Analytics -->  
<script>  
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){  
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),  
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');  

ga('create', 'UA-XXXXX-Y', 'auto');  
ga('send', 'pageview');  
</script>  
<!-- End Google Analytics -->

<head> 태그에 가깝게, 다른 <script> 혹은 CSS tag보다 앞서 위치해야한다.
다음 코드는 다음과 같은 4가지의 역할을 한다.

비동기적으로 analytics.js를 다운로드한다.
전역 함수 ga()를 설정한다. (schedule command들이 analytics.js 라이브러리가 준비 되었을 때 돌아가도록)
새로운 트래커 객체를 생성하기 위해 ga() command queue에 커맨드들을 추가한다.
pageview를 구글 아날리틱스에 보내기위해 또 다른 커맨드를 ga() command queue에 추가한다.

Alternative async tag

<!-- Google Analytics -->  
<script>  
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;  
ga('create', 'UA-XXXXX-Y', 'auto');  
ga('send', 'pageview');  
</script>  
<script async src='https://www.google-analytics.com/analytics.js'></script>  
<!-- End Google Analytics -->

모던 브라우저들이 script preloading을 하는데 있어, 첫 번째 방법은 허용을 하지 않는다. 두 번째 방법을 통해 모던 브라우저들에게 small perfomance boost를 줄 수 있다. 하지만 이 방법은 옛 브라우저들 (IE 9 혹은 더 오래된 모바일 브라우저)에게 동기적인 로딩으로 성능 저하를 줄 수 있다. 모던 브라우저의 사용자가 많다면 사용하자.

analytics.js 동작 방식

`ga()` command queue

analytics.js 로 측정해야할 거의 모든 것은 ga() 커맨드 큐로 시행된다.

즉각적으로 커맨드가 입력되었을 때 실행되는 것이 아니라, analytics.js 라이브러리가 완전 로딩 됬을 때까지 delay 시킨다.

ga.q property: 커맨드를 담는 큐 역할을 하는 배열

ga 오버로딩(overloading): ga 커맨드 큐는 오버로딩 되어 다양한 포맷의 인자를 받는다.

ga(command, [...fields], [fieldsObject]): 라이브러리가 로딩 되었을 때 실행 될 커맨드 들을 queue에 push한다.

ga(readyCallback): 라이브러리가 로딩 되었을 때 실행할 함수를 queue에 push한다. 라이브러리가 로딩이 완료되어 콜백을 실행 할 때 주로 사용된다.

// Creates a tracker with the name "myTracker" for the Property  
// UA-XXXXX-Y, sets the cookieDomain to "example.com", and specifies  
// a transport mechanism of "beacon".  
ga('create', 'UA-XXXXX-Y', 'example.com', 'myTracker', {  transport: 'beacon'  
});

// Queues a tracker object for creation.  
ga('create', 'UA-XXXXX-Y', 'auto');  

// Once the tracker has been created, log the  
// client ID to the console.  
ga(function(tracker) {  console.log(tracker.get('clientId'));  
});

create: 지정된 필드로 새로운 트래커 인스턴스를 생성한다.

// Creates a tracker with the name "myTracker" for the Property  
// UA-XXXXX-Y, sets the cookieDomain to "example.com", and specifies  
// a transport mechanism of "beacon".  
ga('create', 'UA-XXXXX-Y', 'example.com', 'myTracker', {  transport: 'beacon'  
});

send: 구글 애널리틱스에 hit를 보낸다.

// Sends an event hit for the tracker named "myTracker" with the  
// following category, action, and label, and sets the nonInteraction  
// field value to true.  
ga('send', 'event', 'link', 'click', 'http://example.com', {  nonInteraction: true  
});

require: analyics.js 플러그인을 요구한다.

// Requires the Advertising Features plugin  
// named "myTracker" and override its default cookie name.  
ga('myTracker.require', 'displayfeatures', {  cookieName: 'display_features_cookie'  
});

provide: ga() 커맨드 큐와의 이용을 위한 analytics.js의 플러그인과 메소드를 제공한다.

// Defines a plugin constructor  
function MyPlugin(tracker, options) {  // ...  
}  

// Provides the plugin for use with the ga() command queue.  
ga('provide', 'myplugin', MyPlugin);

remove: 트래커 객체를 제거한다.

// Remove the  tracker named "myTracker".  
ga('myTracker.remove');

https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference#method-details

트래커(Trackers)

트래커(Trackers)는 데이터를 저장하고, 구글 아날리틱스에 보낼 수 있는 객체이다.

트래커를 생성 할 때는 tracking ID를 필수로 명시해야 하며(구글 아날리틱스 프로퍼티 중 하나에 상응하는 property ID와 동일 ) 쿠키가 어떻게 저장되는지 명시하는 cookie domain또한 명시해야 한다.

current browsing context나 page title과 URL같은 정보들은 트래커가 보내지기 전에 저장된다.

다양한 방법을 제공하지만, 가장 흔한 방법으로 create 커맨드를 이용하여 tracking ID와 cookie domain 필드를 두번째와 세번째 파라미터로 제공하여 생성한다.

ga('create', 'UA_XXXXX-Y', 'auto');

네이밍

다양한 트래커가 한 페이지 내에 존재 할 때 네이밍을 할 수 있다.
디폴트 트래커는 t0의 이름으로 생성된다.

ga('create', `UA-XXXXX-Y`, 'auto', 'myTracker');

multiple trackers

하나의 페이지에서 여러개의 트래커를 생성/사용 할 수 있다.
다양한 소유자가 사이트의 섹션을 보고 있을 때 유용하다.

ga('create', 'UA-XXXXX-Y', 'auto');
ga('create', 'UA-XXXXX-Y', 'auto', 'clientTracker');

특정한 트래커 커맨드 실행

ga('send', 'pageview');
ga('clientTracker.send', 'pageview');

특정한 트래커 커맨드를 실행할 때, 트래커 명에 이어 .을 붙힌다. 트래커 명을 명시하지 않으면 디폴트 트래커가 실행된다.

'개발일지' 카테고리의 다른 글

[npm] 리액트 패키지를 만들어 npm에 배포해보자 - 1 (0)	2023.05.30
[데스크탑 애플리케이션: 01] Firebase + Nextron (Electron + Next.js) (4)	2022.07.23
[이미지 렌더링: 02] 웹 성능과 이미지 최적화 (0)	2022.07.06
[이미지 렌더링: 01] 무한스크롤과 이미지 렌더링 (0)	2022.07.01
[크롬 익스텐션: 06] StompJs & SockJs, 디자인 및 구현 - 2 (0)	2022.06.23

[구글 애널리틱스: 01] Google Analytics 이해하기