Angular

Public Preview

Angular is currently in public preview and as a result the way this feature is used may change over time.
Use with caution in production environments.

Seeka can be installed on Angular apps via the NPM package.

Install

Install the browser SDK NPM package.
Install Seeka's Angular NPM package with one of the below commands.

# NPM
npm install --save @seeka-labs/converge-angular-lib@latest

# Yarn
yarn add @seeka-labs/converge-angular-lib@latest

Configure

Create a provider component that will wrap your application. You can create a file called seeka-provider.component.ts in your app directory:

src/app/seeka-provider/seeka-provider.component.ts

import { Component } from '@angular/core';
import { SeekaProviderComponent, SeekaProviderConfigContext } from '@seeka-labs/converge-angular-lib';

// Get below details from https://seeka.app/settings/integrations/api
const seekaOrgId = '(organisation ID)';
const seekaPublicKey = '(public key)';
const seekaInstanceId = '(instance ID)';
const hosts: string[] = [];

const seekaContext: SeekaProviderConfigContext = {
  tracking: {
    defaults: {
      currencyCode: 'NZD', // not required
      countryCode: 'NZ', // not required
    }
  },
  client: {
    ver: '1.0.0', // or build number of your frontend / git sha etc
    type: 'yoursoftwarename' // all lowercase, no spaces, alphanumeric
  }
};

@Component({
  selector: 'app-seeka-provider',
  standalone: true,
  imports: [SeekaProviderComponent],
  template: `
    <seeka-provider
      [org]="orgId"
      [id]="instanceId"
      [publicKey]="publicKey"
      [context]="context">
      <ng-content></ng-content>
    </seeka-provider>
  `
})
export class AppSeekaProviderComponent {
  // Use the actual values instead of demo values
  orgId = seekaOrgId;
  instanceId = seekaInstanceId;
  publicKey = seekaPublicKey;
  context = seekaContext;
}

In your app.component.ts file, wrap your app with the AppSeekaProviderComponent:

src/app/app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
+import { AppSeekaProviderComponent } from './seeka-provider/seeka-provider.component';

@Component({
  selector: 'app-root',
  standalone: true,
+  imports: [RouterModule, CommonModule, AppSeekaProviderComponent],
  template: `
+    <app-seeka-provider>
      <div class="container">
        <router-outlet></router-outlet>
      </div>
+    </app-seeka-provider>
  `
})
export class AppComponent {
  title = 'angular-app';
}

You can now start tracking events and identities from your Angular app by following the below guides.

Tracking events

For a full reference of supported events and parameters, see the tracking SDK documentation.

The below example shows how to track a content view event when a button is clicked and how to set up page view tracking when the component initializes.

import { Component, OnInit } from '@angular/core';
import { SeekaService } from '@seeka-labs/converge-angular-lib';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  template: `
    <div class="content">
      <h1>Home Page</h1>
      <button (click)="trackContentView()">Track Content View</button>
    </div>
  `
})
export class HomeComponent implements OnInit {
  constructor(
    private seekaService: SeekaService,
    private router: Router
  ) {}

  trackContentView(): void {
    const converge = this.seekaService.getConverge();
    if (converge) {
      converge.track.viewContentItem({
        contentName: 'Home Page Content',
        categoryName: 'Demo Content'
      });
      console.log('Content view tracked!');
    }
  }
}

Tracking identities

For a full reference of supported methods, see the identity SDK documentation.

For a full reference of supported identity traits, see the identity SDK documentation.

import { Component } from '@angular/core';
import { SeekaService } from '@seeka-labs/converge-angular-lib';

@Component({
  selector: 'app-profile',
  template: `
    <div class="profile">
      <h1>User Profile</h1>
      <button (click)="setProfile()">Set Profile</button>
    </div>
  `
})
export class ProfileComponent {
  constructor(private seekaService: SeekaService) {}

  setProfile(): void {
    const converge = this.seekaService.getConverge();
    if (converge) {
      converge.identity.mergeProfile({
        email: ['email-test@example.com'],
        firstName: ['John'],
        lastName: ['Smith'],
        phone: ['+61422333444'],
        address: [
          {
            countryCode: 'AU'
          }
        ]
      });
    }
  }
}

User privacy

See the User privacy SDK for Angular.

Debugging / diagnosis

To identify if your integration is running correctly, see the diagnosing section for more information on how to enable debugging and diagnosis mode.

Not seeing any data come through to the Seeka dashboard?
If running on localhost then the Browser SDK will block sending data to ensure no test data makes it's way to production data destinations. See the diagnosing on how to enable full test mode.

Example project

Example project for Angular v17 can be downloaded from from here.