Угловая аналитика приложений измерения с использованием пользовательского поставщика Angulartics2

Question

Мы хотим отслеживать изменения URL и различные события в нашем приложении Angular (v5.1).

Нам нужно получать собранные данные на наш собственный сервер, а не на одного из поддерживаемых поставщиков (например, Google Analytics).

Кажется, что Angulartics2 поддерживает множество провайдеров, а также имеет возможность написания собственного провайдера. Как они пишут на своем веб-сайте: "Если для выбранного поставщика аналитики нет плагина Angulartics2, напишите свой".

Я не нахожу никакой документации о том, как написать собственный поставщик. Если у кого-то есть опыт с этим.

Или любая рекомендация для другой аналитической библиотеки, которая работает с Angular и может отправлять данные на пользовательский URL.

Благодарю.

Answer 1

Тот же вопрос здесь... найдено решение для обмена: (Первый вклад в Stackru, проблемы с формой оправдания)

1. Посмотрите на существующих провайдеров

Я посмотрел на это, потому что это довольно просто.

2. Переименуйте его в соответствии со своими потребностями
3. Удалить странное declare var _kmq: any; и вместо этого внедрите свой собственный ApiService.
4. Отслеживайте свои вещи

Я удалил this.angulartics2.setUsername и this.angulartics2.setUserPropertiesот конструктора. Потому что я не знаю, для чего он используется... Моя бэкэнд-команда предоставила конечную точку, которая ожидает следующей структуры данных:

export interface AnalyticsDataInterface {
    id?: number;
    userId: number;
    action: AnalyticsAction|string;
    properties: string[];
    date: string;
}

Мои действия в Google Analytics на данный момент:

export enum AnalyticsAction {
    PAGE_VIEW = 'page_view',
    LOGIN = 'login_success',
}

Тогда это будет мой ApiService:

@Injectable({
    providedIn: 'root'
})
export class AnalyticsService extends ApiService{

    public sendData(data: AnalyticsDataInterface){
        this.post<AnalyticsDataInterface>(Endpoint.ANALYTICS, data).subscribe();
    }
}

И последнее, но не менее важное, мой CustomProvider:

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

    constructor(
        private angulartics2: Angulartics2,
        private api: AnalyticsService,
        private userService: UserService
    ) {
        // this.angulartics2.setUsername
        //     .subscribe((x: string) => this.setUsername(x));
        // this.angulartics2.setUserProperties
        //     .subscribe((x) => this.setUserProperties(x));
    }

    startTracking(): void {
        this.angulartics2.pageTrack
            .pipe(this.angulartics2.filterDeveloperMode())
            .subscribe((x) => this.pageTrack(x.path));

        this.angulartics2.eventTrack
            .pipe(this.angulartics2.filterDeveloperMode())
            .subscribe((x) => this.eventTrack(x.action, x.properties));
    }

    pageTrack(path: string) {
        const requestData: AnalyticsDataInterface = {
            userId: this.userService.getUser().id,
            action: AnalyticsAction.PAGE_VIEW,
            properties: [path],
            date: new Date().toISOString()
        };

        this.api.sendData(requestData);
    }

    eventTrack(action: string, properties: string[]) {
        const requestData: AnalyticsDataInterface = {
            userId: this.userService.getUser().id,
            action,
            properties,
            date: new Date().toISOString()
        };
        this.api.sendData(requestData);
    }
}

Затем просто следуйте обычным инструкциям по установке

• импортировать Angulartic2Module в AppModule:

    imports: [
        ...
        Angulartics2Module.forRoot(),
        ...
    ]
  

• вставьте свой собственный сервис провайдера в AppComponent и начните отслеживать:

    export class AppComponent implements OnInit {
  
        constructor(
            private myCustomProvider: AngularticsProvider
        ) {
            myCustomProvider.startTracking();
        }
    }
  

Остальное должно быть по умолчанию...