# Angular

Add ProductLense to an Angular app in src/index.html, then identify the signed-in user from a service once authentication resolves.

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.

```html title="src/index.html" {6-7}
<!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

```ts title="src/app/productlense.service.ts" {14}
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](/docs/revenue/attribution).

## 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](/docs/install/verify).