나를 위한 기록들

Angular2 with google analytics (구글 아날리틱스 페이지구분) 본문

JS/Angular

Angular2 with google analytics (구글 아날리틱스 페이지구분)

lyasee 2017. 9. 10. 13:08


angular2 구글 아날리틱스 페이지구분, angular2 google analytics




기존 방법 index.html에 스크립트 추가




<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', 'XXXXX', 'auto');
ga('send', 'pageview');

</script>


이렇게 하게되면 SPA방식에서 페이지 구분을 하지 못함, / 만뜸



변경


index.html

<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', 'XXXXX', 'auto');
// ga('send', 'pageview'); 주석처리

</script>


google-analytics.service.ts 추가

import { Injectable } from '@angular/core';

declare var ga: Function; // 구글 아날릭티스 메소드

@Injectable()
export class GoogleAnalyticsService {

constructor() {
}

/**
* 구글 아날리틱스에서 사용중 페이지 설정
* @param url 사용 중인 페이지
*/
pageView(url: string) {
ga('send', 'pageview', url);
}

/**
* 구글 아날리틱스에서 이벤트 설정
* 참고 URL http://analyticsmarketing.co.kr/digital-analytics/google-analytics/537/
* @param category 이벤트 유형을 나타내는 기본단위, ex)모바일전화연결
* @param action 이벤트 카테고리에 대한 설명, ex)버튼클릭
* @param label 추가 세분화 용도로 사용, ex)오피스
*/
pageEvent(category: string, action: string, label: string){
ga('send', 'event', category, action, label);
}
}


app.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from "@angular/router";
import { GoogleAnalyticsService } from "./services/google/google-analytics/google-analytics.service";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

currentRoute: any

constructor(
private router: Router,
private location: Location,
private googleAnalyticsService: GoogleAnalyticsService
){
// 구글 아날리틱스 SPA 페이지 구분
this.router.events.subscribe(() => {
let newRoute = this.location.path() || '/';
// 라우터가 변경될때 아날리틱스로 전송
if (this.currentRoute != newRoute) {
this.googleAnalyticsService.pageView(newRoute);
this.currentRoute = newRoute;
}
});
}

ngOnInit(){
}
}




이벤트 전송

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from "../../../services/google/google-analytics/google-analytics.service";

@Component({
selector: 'app-test',
templateUrl: './test.html',
styleUrls: ['./test.css']
})
export class TestComponent implements OnInit {

constructor(
private googleAnalyticsService: GoogleAnalyticsService
) { }

ngOnInit() {
}

submit(){
this.googleAnalyticsService.pageEvent('검색', '검색요청', '검색완료')
}


}




'JS > Angular' 카테고리의 다른 글

Angular2, 4 스크롤 이벤트  (0) 2017.09.04
Angular2 rxjs 데이터 공유하기  (0) 2017.09.04
Comments