Angular

An Angular app serves one src/index.html, so the script goes there once. The Angular router changes the URL with the history API, which ProductLense records as pageviews without extra code.

Add the script#

Replace SITE_ID with the id from Settings → Sites in the ProductLense dashboard.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">
  <script>window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}</script>
  <script defer data-site="SITE_ID" src="https://api.productlense.app/a.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Keep the tag in index.html rather than the scripts array in angular.json: the script reads its settings from its own tag, which a bundled copy does not have.

Identify users#

import { Injectable } from '@angular/core';

declare global {
  interface Window {
    productlense?: (...args: unknown[]) => void;
  }
}

@Injectable({ providedIn: 'root' })
export class ProductLenseService {
  identify(user: { id: string; email?: string }): void {
    window.productlense?.('identify', user.id, user.email ? { email: user.email } : undefined);
  }

  event(name: string, props?: Record<string, string | number | boolean>): void {
    window.productlense?.('event', name, props);
  }
}

Call identify from wherever your app learns who is signed in, for example after login succeeds. Use the same id you store on the customer in your billing provider; see how payments are attributed.

Server-side rendering#

With Angular SSR the tag in index.html is rendered into every page as is; nothing else changes. Do not call window.productlense during server rendering: guard calls with isPlatformBrowser, or make them only from event handlers.

Verify your installation#

1. Build and deploy, then open your site in a normal browser window.
2. Open the Live page in the ProductLense dashboard. Your visit appears within a few seconds.
3. In the browser's developer tools, the Network tab shows a POST to https://api.productlense.app/api/e with status 204. Navigate to another route: a second pageview follows.

ng serve runs on localhost, where nothing is sent unless you add data-dev="true" to the tag. If the visit does not appear, follow Verify your installation.