Angular SDK

CI environments

Deactivate the Screeb SDK during CI execution to avoid creating anonymous users and exceeding your MTU limit.

Prerequisites

• Node.js 14 or later
• Angular 12 or later (Angular 14+ for standalone bootstrapping)

Add Screeb as a dependency

npm install @screeb/sdk-angular --save
# or
yarn add @screeb/sdk-angular

Setup — Standalone (recommended, Angular 14+)

import { bootstrapApplication } from "@angular/platform-browser";
import { importProvidersFrom } from "@angular/core";
import { ScreebModule } from "@screeb/sdk-angular";

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      ScreebModule.forRoot({
        autoInit: true,
        websiteId: "<YOUR-CHANNEL-ID>",
        userId: "<USER-ID>",    // optional
        userProperties: {              // optional
          firstname: "<user-firstname>",
          plan: "<user-plan>",
          last_seen_at: new Date(),
          authenticated: true,
        },
      }),
    ),
  ],
});

Setup — NgModule

import { ScreebModule } from "@screeb/sdk-angular";

@NgModule({
  imports: [
    ScreebModule.forRoot({
      autoInit: true,
      websiteId: "<YOUR-CHANNEL-ID>",
    }),
  ],
})
export class AppModule {}

tip

You can find your channel id in your workspace settings.

Use the Screeb service

Inject the Screeb service in your components:

import { Component } from "@angular/core";
import { Screeb } from "@screeb/sdk-angular";

@Component({
  selector: "app-home",
  standalone: true,
  template: `<button (click)="track()">Track event</button>`,
})
export class HomeComponent {
  constructor(private screeb: Screeb) {}

  track() {
    this.screeb.eventTrack("button-clicked");
  }
}

SDK lifecycle

constructor(private screeb: Screeb) {}

// Disable Screeb
this.screeb.close();

Example app

See the example-angular for a working integration.