Skip to main content
Version: Ionic SDK

Ionic SDK

Ionic apps run entirely inside a WebView — which means the Screeb JS SDK works natively, just like on a regular web app. No native plugin is required.

Pick the package matching your Ionic stack

Prerequisites​

  • Node.js 14 or later
  • Ionic 6 or later
  • Angular 14+ (for standalone bootstrapping) or Angular 12+ (NgModule)
  • Capacitor 4+ (for native app deployment)

Ionic Angular​

Add Screeb as a dependency​

npm install @screeb/sdk-angular --save

Setup — Standalone (recommended, Ionic v7+ / Angular 14+)​

import { bootstrapApplication } from "@angular/platform-browser";
import { importProvidersFrom } from "@angular/core";
import { RouteReuseStrategy, provideRouter } from "@angular/router";
import { IonicRouteStrategy, provideIonicAngular } from "@ionic/angular/standalone";
import { ScreebModule } from "@screeb/sdk-angular";
import { routes } from "./app.routes";

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    importProvidersFrom(
      ScreebModule.forRoot({
        autoInit: true,
        websiteId: "<YOUR-CHANNEL-ID>",
        userId: "<USER-ID>",    // optional
        userProperties: {              // optional
          firstname: "<user-firstname>",
          plan: "<user-plan>",
        },
      }),
    ),
    provideRouter(routes),
  ],
});
tip

You can find your channel id in your workspace settings.

Setup — NgModule​

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

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

Use the Screeb service​

import { Component } from "@angular/core";
import { ScreebModule, ScreebService } from "@screeb/sdk-angular";

@Component({ ... })
export class MyPage {
  constructor(private screeb: ScreebService) {}

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

Session replay​

Session replay works out of the box via the JS SDK — Screeb captures the full DOM, including Ionic components rendered in the WebView.

Mobile app (Capacitor)​

To deploy as a native iOS/Android app using Capacitor:

npm install @capacitor/core @capacitor/cli
npx cap init
npx cap add ios
npx cap add android
npm run build
npx cap sync

The Screeb SDK runs inside the WebView and does not require the native Android/iOS SDKs.

Example app​

See the example-ionic for a complete Ionic Angular + Capacitor integration.