/ngx-segment-analytics

Segment Analytics for Angular 6 -> 14

Primary LanguageTypeScriptMIT LicenseMIT

ngx-segment-analytics

Greenkeeper badge Build Status GitHub Downloads All Releases npm Downloads All Releases npm Version node Version Required Angular Universal Compatible

This Angular module provides an API for Segment using the analytics.js official library.

Compatible with Angular AOT and Universal.

Installation

To install this library, run:

$ npm install --save ngx-segment-analytics

Consuming Segment

Add the SegmentModule to your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the Segment module
import { SegmentModule } from 'ngx-segment-analytics';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Segment Importation
    SegmentModule.forRoot({ apiKey: 'YOUR_WRITE_APIKEY', debug: true, loadOnInitialization: true })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You can use the SegmentService in any constructor as a injected service :

import { Component, OnInit } from '@angular/core';
import { SegmentService } from 'ngx-segment-analytics';
@Component({
    selector: 'hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {

    constructor(private segment: SegmentService) { }

    public ngOnInit() {
        this.segment.track('load an hero')
            .then(() => console.log("Event sended"));
    }

}

Documentation

A full documentation is available here

API

This API is compatible with analytics.js but returns Promises instead of taking callbacks in parameters.

load(apiKey: string, options: any);
get plugins: {[pluginName :string]: SegmentPlugin};
identify(userId?: string, traits?: any, options?: any): Promise<SegmentService>;
track(event: string, properties?: any, options?: any): Promise<SegmentService>;
page(category?: string, name?: string, properties?: any, options?: any): Promise<SegmentService>;
group(groupId: string, traits?: any): Promise<SegmentService>;
alias(userId: string, previousId?: string, options?: any): Promise<SegmentService>;
ready(): Promise<SegmentService>;
user(): any;
id(): any;
traits(): any;
reset(): void;
debug(enabled?: boolean): void;
on(method: string, callback: (event?: string, properties?: any, options?: any) => any): void;
trackLink(elements: HTMLElement | HTMLElement[], event: string | Function, properties?: Object | Function): void;
trackForm(forms: HTMLElement | HTMLElement[], event: string | Function, properties?: Object | Function): void;
timeout(timeout: number): void;
addSourceMiddleware(middleware: ({integrations, payload, next}) => void): void;

Development

To lint all *.ts files:

$ npm run lint

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To publish on npmjs registry :

$ npm publish dist

License

MIT ©2019 OpenDecide