Skip to content
Segment Analytics for Angular 4/5/6/7
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
src
tools/gulp
.gitignore
.npmignore
.travis.yml
.yo-rc.json
LICENSE.md
README.md
gulpfile.js
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

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;

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 ©2017 OpenDecide

🚀 Segment Angular Quickstart

Interested in writing analytics code once? With Segment, you can collect customer data from any source (web, mobile, server, CRM, etc.) and send it to over 250+ destinations (Google Analytics, Amplitude, Mixpanel, etc.) via the Segment dashboard. Follow the tailored guide for Angular to get setup.

You can’t perform that action at this time.