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

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('검색', '검색요청', '검색완료')

}

}