Angular

Public Preview

Angular is currently in public preview.

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

Example project

Example project for Angular v17 can be downloaded from from here. See the README in the project for more info.

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.
If you are accessing your local development environment with the localhost hostname, append ?test=full to your URL to enable the Seeka Browser SDK on your local development environment.

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.

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.