Skip to main content

​
Using HumanBehaviorTracker with Angular

​
Quickstart

Human Behavior works seamlessly to record sessions on your Angular app.

​
Step 1: Installation

npm install humanbehavior-js
# or
yarn add humanbehavior-js

​
Step 2: Environment Variables

Create or update environment files: Create src/environments/environment.ts: 
export const environment = {
  production: false,
  humanBehaviorApiKey: 'your-api-key-here'
};
Create src/environments/environment.prod.ts: 
export const environment = {
  production: true,
  humanBehaviorApiKey: 'your-api-key-here'
};
Angular Environment System: Angular CLI automatically replaces environment.ts with environment.prod.ts during production builds. This is the standard Angular way to handle environment variables.
Create a service and initialize the SDK outside Angular’s zone, and only in the browser. 
// src/app/services/hb.service.ts
import { Injectable, NgZone, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { HumanBehaviorTracker } from 'humanbehavior-js';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class HumanBehavior {
  private tracker: ReturnType<typeof HumanBehaviorTracker.init> | null = null;

  constructor(private ngZone: NgZone, @Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      this.ngZone.runOutsideAngular(() => {
        this.tracker = HumanBehaviorTracker.init(environment.humanBehaviorApiKey);
      });
    }
  }

  capture(event: string, props?: Record<string, any>) {
    this.tracker?.customEvent(event, props);
  }

  identify(user: Record<string, any>) {
    this.tracker?.identifyUser({ userProperties: user });
  }

  trackPageView(path?: string) {
    this.tracker?.trackPageView(path);
  }
}
Inject the service in your root standalone component so it initializes early: 
// src/app/app.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Navigation } from './navigation/navigation';
import { HumanBehavior } from './services/hb.service';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, Navigation],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  constructor(private readonly humanBehavior: HumanBehavior) {}
}

​
Optional: Router-based pageviews

// e.g., in app.ts
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private hb: HBService, private router: Router) {
  this.router.events
    .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
    .subscribe((evt) => this.hb.trackPageView(evt.urlAfterRedirects));
}
No separate Angular package is required. Use the single humanbehavior-js package.

​
Features

  • ✅ Angular 17+ standalone components support
  • ✅ Works with earlier Angular versions via a service
  • ✅ TypeScript support
  • ✅ Automatic session recording (via SDK) and custom events
  • ✅ SSR-safe guard with isPlatformBrowser and runOutsideAngular

​
Troubleshooting

  • Ensure HumanBehaviorTracker.init is called as init(apiKey, ingestionUrl?, options?)
  • If TypeScript complains about rrweb types, add:
    • @rrweb/types@2.0.0-alpha.17
    • rrweb-snapshot@2.0.0-alpha.17