17. 10. 11. TypeScript 의 window 객체에 property 추가하기. Google Analytics 추적코드 심기,

Angular4로 component 단위의 개발은 매우 편리한데,

Javascript 라이브러리를 가져다 쓰려면, 꼭 귀찮은 일들이 발생하기 마련이다.

GoogleAnalytics 로 Tracking 을 해야됐어서, Javascript 코드로 심으려고 보니까,

window 객체에 property 를 추가해야했다.

개발자 가이드를 보면, 

https://developers.google.com/analytics/devguides/collection/gtagjs/

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

window 객체에 dataLayer 라는 프로퍼티와, gtag() 라는 function 을 추가해야한다.

문제는 TypeScript 에서 window 객체에는 그냥 저런식으로 접근할 수도, 추가할 수 도 없다.

그래서 TypeScript 에서 window 객체에 새로운 property 를 추가하는 방법이 몇가지가 있는데 아래 사이트에 잘 설명되어 있다.

https://ourcodeworld.com/articles/read/337/how-to-declare-a-new-property-on-the-window-object-with-typescript

나는 간단하게, index.html 의 Javascript 부분에서 gtag() 를 정의해 두었고,

TypeScript 내부에서 GA 라는 클래스를 만들어서, (<any>window)를 이용해 gtag()에 접근하였다.

export class GA {

static pageRefresh(pageTitle: string, location:string, path: string){

(<any>window).gtag('js', new Date());

(<any>window).gtag('config', 'XX-XXXXXXXXX-X', {

'page_title': pageTitle,

'page_location': location,

'page_path': path

});

}

static screen(subdomain: string, appName:string, screenName:string){

(<any>window).gtag('event', 'screen_view', {

'app_name' : appName,

'app_id' : subdomain,

'screen_name' : screenName

});

}

}