본문 바로가기
Angular

Google Analytics in Angular 적용기

seungwoo_h 2018. 4. 11. 10:45

이 글은 프로젝트에 Google Analytics 적용에 대해 정리 하고자 합니다. 


기존 웹사이트의 적용 방식과  Angular 프로젝트의 Google Analytics 적용 방식은 약간의 차이가 있다.

어떠한 차이가 있는지 알아보기전에 우선적으로 알아야 할 개념이 있습니다.

  • SPA (Single Page Application) 


이미 다들 알고 계시겠지만 글 이해을 돕기 위해 다시 한번 개념을 정리 해보도록 하겠습니다.


SPA(Single Page Application) 방식은 기본적으로 단일 페이지로 구성된다. 웹 어플리케이션에 필요한 모든 정적 리소스를 

최초 렌더링시 모두 불러옵니다. 따라서 초기 구동 속도가 매우 느리고 최초 렌더링이 완료 될 때까지 시간이 오래 걸립니다.

전통 웹 링크 방식은 새로운 페이지가 요청되면 요청 시마다 정적 리소스를 다운로드하고 전체 페이지를 새로 다시 렌더링 하여 비효율적이고 사용자 측면에서도 새로고침이 계속 발생하여 좋지 않습니다.

하지만 전통 웹의 링크 방식과는 다르게 최초 렌더링 이후 새로 페이지 요청 시, 페이지 갱신에 필요한 데이터만 전달 받아 갱신 하므로 트래픽이 감소 되고 새로 고침이 발생하지 않습니다.


Angular는 SPA 방식의 프레임워크입니다.

그런데 이 SPA 방식의  특징으로 인해 Google Analytics 적용에도 약간의 차이가 발생한 것 입니다.


Google Analytics는 아래 이미지와 같은 추적 코드를 제공합니다.




<head>
<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', '{YOUR-TRACKING-ID}', 'auto');
  ga('send', 'pageview');
</script>
</head>


기존 전통 링크 방식의 웹은 제공 받은 추적코드를 위 코드를  {YOUR-TRACKING-ID} 부분에 넣어 페이지마다 삽입하면 페이지별로 트래킹 됩니다.


반면, angular 프로젝트는 위에서 앞서 말씀 드렸듯 SPA 방식의 프레임워크로 최초 한번만 리소스가 다운로드 되는 단일 페이지입니다,

이로 인해 위 코드 역시 한번만 로드되고 페이지 트래킹 또 한 최초 한번만 발생 되게 됩니다.


따라서 Angular 프로젝트에서는 라우터별로 페이지 트레킹 이벤트가 발생 할 수 있도록 해주면 됩니다.


<head>
<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', '{YOUR-TRACKING-ID}', 'auto');
  ga('send', 'pageview'); // remove
</script>
</head>

이전의 코드에서 page send 이벤트 부분을 제거 후의 코드를 프로젝트의 index 페이지에만 삽입합니다.


이후에 root component를 아래와 같이 작성합니다.

import { Router, NavigationEnd } from "@angular/router";
 
 @Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
 })
 
        window['GoogleAnalyticsObject'] = 'ga';
        window['ga'] = window['ga'] || function() {
          (window['ga'].q = window['ga'].q || []).push(arguments)
        };
 
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
              ga('set', 'page', event.urlAfterRedirects); // traking set
              ga('send', 'pageview'); // page traking
            }
          });
      }
}


Router 모듈을 이용하여 router 이벤트가 발생 될때마다 traking을 세팅 합니다.

NavigationEnd는 navigation을 성공적으로 마쳤을때 발생됩니다. 이 NavigationEnd의 멤버 변수로 urlAfterRedirects 가 있는데 router의 경로를 담고 있습니다.

이 경로로 page traking 이벤트를 세팅하고 send 합니다.


그럼 router가 변경 될때마다 page가 traking 되도록 할 수 있습니다.


한 번 확인 해보도록 하겠습니다.

구글 애너리틱스에 적용 되기전 까지 잘 동작하는지 임시적으로 확인 할 수 있는 방법이 있습니다.





위 이미지와 같이 traking 이벤트가 정삭적으로 동작을 하였다면 angular analytics로 부터 resopnse 가 옵니다.


만약 기존과 같이 한번만 트래킹 이벤트가 발생 된다면 이 리소스 또한 하나뿐 일 것이고 

정상적으로 원하는 바와 같이 동작한다면 라우터가 이동 될때마다 생겨날 것입니다.


이상 글을 마치겠습니다.

'Angular' 카테고리의 다른 글

Angular summary  (0) 2018.12.26
알아 두면 유용한 Angular CLI 1탄!  (0) 2017.12.11
Angular 내장 파이프  (0) 2017.06.28

'Angular' Related Articles

티스토리툴바