Angular에서 Anode Analytics 통합

이 메모는 우리 애플리케이션이 스크립트를 포함하고 추적 정보를 보내기 위해 호출해야 하는 타사 도구와의 모든 종류의 통합에 유용합니다. 최대한 각진 방법으로 유지하려고 노력했습니다.

먼저 삽입된 스크립트를 통해 제3자에게 보내야 하는 정보의 스키마를 정의할 유형을 생성해 보겠습니다. 아래의 경우 Adobe 대시보드에서 추적 및 분석하는 데 사용되는 메트릭 모델입니다.

//metrics.model.ts
export interface Metrics {
    applicationame: string;
    country: string;
    language: string;    
    pagename: string;    
    userid: string;
    userrole: string;    
}

타사 스크립트를 호출하려면 헤드 섹션에 스크립트를 포함해야 합니다. 각도 방식을 시도하고 있으므로 AppComponent 로드 시 이 스크립트 노드를 동적으로 추가합니다.

아래와 같이 AppComponent에 구현OnInit

const scriprtNode = this.document.createElement('script');
scriprtNode.src = environment.adobeAnalyticsUrl;
scriprtNode.type = 'text/javascript';
scriprtNode.async = false;
this.document.getElementsByTagName('head')[0].appendChild(scriprtNode);

AppComponent 내에서 문서를 사용하려면 생성자를 통해 문서를 주입해야 합니다@Inject(DOCUMENT) private document: Document.

Adobe Analytics는 개체가 window 개체의 미리 정의된 사용자 정의 속성에 바인딩될 것으로 예상합니다. 창 개체에 대한 참조를 가져오고 구성 요소에 주입할 수 있는 서비스를 만들 것입니다. 그 쪽이 더 깨끗합니다.

//window-ref.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class WindowRef {
   get nativeWindow() : any {
       return window;
   }
}

이전에 만든 유형Metrics의 개체를 추적하는 서비스를 만들 수 있습니다. 이 서비스는 포함된 스크립트를 통해 Analytics 서비스에 보낼 개체를 설정하는 데 사용해야 합니다.

//adobe-analytics.service.ts
import { Injectable } from '@angular/core';
import { WindowRef } from './window-ref.service';
import { Metrics } from 'src/models/metrics.model.ts';

@Injectable()
export class AdobeAnalyticsService {
    metrics: Metrics = {} as Metrics;

    constructor(private winRef: WindowRef) {
    }
    updateMetricsObject(deltaMetrics) {
        Object.assign(this.metrics, deltaMetrics)
        const wr = this.winRef.nativeWindow;
        wr.Org = wr.Org || {};
        wr.Org.Metrics = wr.Org.Metrics || {};
        wr.Org.Metrics.sc = this.metrics;
        return wr.Org.Metrics.sc;
    }

    sendToAdobe() {
        const wr = this.winRef.nativeWindow;
        if (wr.metrics_pagenav != undefined) wr.metrics_pagenav('', this.metrics);
    }
}

우리는 새 페이지를 탐색할 때마다 이러한 측정항목을 캡처하여 가장 많이 방문한 페이지와 사용자가 이동한 경로 및 사용자 세부정보 및 페이지 이름과 같은 다른 속성에서 파생할 수 있는 다양한 기타 통찰력을 알도록 노력할 것입니다. Angular에서는 Router events을 사용하여 경로 변경 이벤트를 수신하고 분석 메서드를 호출하여 정보를 푸시할 수 있습니다.

//app-routing.module.ts
this.router.events.pipe(filter(e => e instanceof RoutesRecognized))
                .subscribe((event) => {
                    const url: string = event['urlAfterRedirects'];
                    const regex = /[a-zA-Z]+[-]*[a-zA-Z]+/gm;
                    var pageName = url.match(regex)[0];
                    this.adobeAnalyticsService.updateMetricsObject({ pagename: `blahblah|${pageName}` });
                    this.adobeAnalyticsService.sendToAdobe();
                    }
                );

이제 Adobe 대시보드에서 압정 정보를 확인할 수 있습니다.

원래 게시됨Bitsmonkey