Skip to main content
Version: Javascript tag

NPM packages

How to add the Screeb tag to your app?​

To make it easier for developers to integrate Screeb into their applications, we provide NPM packages. These packages offer a streamlined installation process and comprehensive documentation to help you get started quickly and efficiently.

Screeb for browser (@screeb/sdk-browser)​

Install​

npm install @screeb/sdk-browser --save

# For Yarn, use the command below.
yarn add @screeb/sdk-browser

Usage​

import * as Screeb from "@screeb/sdk-browser";

// Load and initialize Screeb
Screeb.load();
Screeb.init("<website-id>");

// Initialize with identified user (optional)
Screeb.init(
  "<website-id>",
  "<unique-visitor-id>",
  {
    firstname: "<user-firstname>",
    lastname: "<user-lastname>",
    plan: "<user-plan>",
    last_seen_at: new Date(),
    authenticated: true,
  }
);

// Track events
Screeb.eventTrack("Name of the Event");

// Assign groups
Screeb.identityGroupAssign("company", "Apple");

Screeb for React (@screeb/sdk-react)​

Install​

npm install @screeb/sdk-react --save

# For Yarn, use the command below.
yarn add @screeb/sdk-react

Usage​

Wrap your app with ScreebProvider:

import * as React from "react";
import { ScreebProvider } from "@screeb/sdk-react";

const App = () => (
  <ScreebProvider
    autoInit
    websiteId="<website-id>"
    userId="<unique-visitor-id>" // optional
    userProperties={{            // optional
      firstname: "<user-firstname>",
      lastname: "<user-lastname>",
      plan: "<user-plan>",
    }}
  >
    <HomePage />
  </ScreebProvider>
);

Then use the useScreeb hook in your components:

import { useScreeb } from "@screeb/sdk-react";

const HomePage = () => {
  const { eventTrack, identityGroupAssign } = useScreeb();

  return (
    <button onClick={() => eventTrack("Name of the Event")}>
      Track event!
    </button>
  );
};

Screeb for Angular (@screeb/sdk-angular)​

Install​

npm install @screeb/sdk-angular --save

# For Yarn, use the command below.
yarn add @screeb/sdk-angular

Usage​

Import ScreebModule in your app module:

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

@NgModule({
  imports: [
    ScreebModule.forRoot({
      autoInit: true,
      websiteId: "<website-id>",
      userId: "<unique-visitor-id>", // optional
      userProperties: {               // optional
        firstname: "<user-firstname>",
        lastname: "<user-lastname>",
        plan: "<user-plan>",
      },
    }),
  ],
})
export class AppModule {}

Then inject Screeb service in your components:

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

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

  trackEvent() {
    this.screeb.eventTrack("Name of the Event");
  }
}