ngx-segment-analytics--force-https

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

Compatible with Angular AOT and Universal.

This is an extension of the great package by opendecide if you are looking for the original module go there.

The original library had a doc.location protocol that would determine wether or not to call the segment api with http or https, I was getting issues with the fact once my angular app was deployed to heroku I was getting mixed content errors due to the fact it was calling the segment api with http. So I removed that bit of code to force the use of https.

Installation

To install this library, run:

$ yarn add ngx-segment-analytics--force-https

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--force-https';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Segment Importation
    SegmentModule.forRoot({ apiKey: 'YOUR_WRITE_APIKEY', debug: 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--force-https';
@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.

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