Angular 프로젝트에 Countly를 통합하는 방법을 배우고 JS에서 TS로 이동

우선 Idea 추출에 많은 도움을 주신 Mohammed Hewedy 에게 깊은 감사를 드립니다.

Countly는 온프레미스에 설치할 수 있는 강력한 웹 분석 도구입니다.

Countly에는 사용자 세션, 프로필, 페이지 보기, 사용자 지정 이벤트, 히트맵, 피드백, 설문 조사, 기록 쿼리, 오류, 모니터링, 사용자 세분화 및 퍼널 수집과 같은 많은 기능이 있습니다.

Countly는 Android, IOS 및 JavaScript 기반 프레임워크에서 사용할 수 있습니다.

Angular 개발 통합 가이드:

세 가지 방법으로 Countly를 통합할 수 있습니다.

전제 조건:

• 서버 URL: Countly 인스턴스가 설치된 포털/대시보드이며 대시보드를 보는 데 사용됩니다.
• 앱 키: 타사 통합과 같이 구독 계정을 연결하는 데 사용되는 키(예: firebase, FCM 등)

2- 패키지 관리자를 통해

npm install countly-sdk-web
bower install countly-sdk-web
yarn add countly-sdk-web

• 첫 번째 방법에서 생성된 스크립트를 가져오고 src/assets/js에 .JS 파일을 만듭니다(예: countly.js).
• 생성된 파일을 'scripts' 배열 아래의 각도 앱 진입점 'angular.json'에 연결합니다(예: "scripts": ["src/assets/js/countly.js"]).

• 가장 사용자 정의 가능한 방법이며 더 세밀하게 제어할 수 있습니다.
• Angular 서비스를 만들고 필요한 Countly 기능을 활성화합니다.

import {Injectable} from '@angular/core';
import Countly from 'countly-sdk-web';

@Injectable({providedIn: 'root'})
export class CountlyService {

  init(): void {
    window['Countly'] = Countly;
    Countly.init({
      app_key: 'Your company subscription app key',
      url: 'the server URL where Countly is installed',
      debug: true, // make sure to remove from production
    });

    Countly.q.push(['track_sessions']);
    Countly.q.push(['track_pageview']);
    Countly.q.push(['track_clicks']);
    Countly.q.push(['track_links']);
    Countly.q.push(['track_forms']);
    Countly.q.push(['track_errors']);
    // .....
  }
}

export class AppComponent implements OnInit {
 constructor(private countlyService: CountlyService) {}
 ngOnInit() {
  this.countlyService.init();
 }
}

// in Countly.service.ts add the below method
private fillUserProfile(customUserProperties) {
Countly.q.push(() => {
  Countly.user_details({
    name: this.fullName,
    username: this.username,
    organization: this.organization,
    email: this.email,
    phone: this.phone,
    custom: customUserProperties
  });
});
}

// const customUser = {UserType: UserTypeEnum.CLIENT};
// this.countlyService.fillUserProfile(customUser);

// in Countly.service.ts add the below method
pushCustomEvent(eventName: string, segmentationObject) {
  // key: identifies the event
  // count: is the number of times this event occurred
  // sum: is the total amount, total amount of purchases
  // dur: The recorded time is in seconds
  Countly.q.push(['add_event', {
    key: eventName,
    count: 1,
    segmentation: segmentationObject
  }]);
}

// const segmentation = {CarType: CarTypeEnum.SUV};
// this.countlyService.pushCustomEvent('Cancel-Ride', segmentation);

• https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-