@renet-consulting/ngx-tracking-analytics NPM

Tracking-Analytics

The application is custom implementation Google Analytics to handle a behavior of a user. It's only the front-end part of the tracking user's data, see the back-end part on the TODO-add a link.

Installation

npm install @renet-consulting/ngx-tracking-analytics --save

Include it in your application

Add NgxTrackerModule to your root NgModule passing an config with a loader TrackerHttpService

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { NgxTrackerModule } from '@renet-consulting/ngx-tracking-analytics';

const ROUTES: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent }
];

export function trackerHttpServiceFactory(trackerService: NgxTrackerService, http: HttpClient): TrackerHttpService {
    return new TrackerHttpService(trackerService, http);
}

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forRoot(ROUTES),

        // added to imports
        NgxTrackerModule.forRoot({
			loader: { provide: NgxTrackerHttpService, useFactory: (trackerHttpServiceFactory), deps: [NgxTrackerService, HttpClient] },
			baseUrl: { provide: NGX_BASE_URL, useValue: window.location.host },
		}),
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

Where the TrackerHttpService is:

@Injectable()
export class TrackerHttpService {

    public readonly keyId: string = "Encrypt-Key";
    public readonly ivId: string = "Encrypt-Iv";

    constructor(
        private trackerService: NgxTrackerService,
        private http: HttpClient,
    ) { }

    public addTracker = (item: TrackerModel): Observable<any> => {
        const keyId: string = this.trackerService.randomValue;
        const ivId: string = this.trackerService.randomValue;
        const value: string = this.trackerService.encrypt(item, keyId, ivId);
        return this.http
            .get(`api/ra?model=${value}`, {
                responseType: "text",
                headers: new HttpHeaders({
                    [this.keyId]: keyId,
                    [this.ivId]: ivId
                })
            });
    }
}

Usage

Collect basic data

import { Component } from "@angular/core";

@Component({
    selector: "app",
    template: `
	<router-outlet></router-outlet>
	<ngx-tracker></ngx-tracker>
	`
})
export class AppComponent {
    
	constructor() { }
}