Add Privatus Analytics to Angular

Add privacy-friendly analytics to an Angular app in src/index.html, handle hash location routing and track custom events from an injectable Angular service.

# Add Privatus Analytics to Angular

> Add privacy-friendly analytics to an Angular app in src/index.html, handle hash location routing and track custom events from an injectable Angular service.

Add the snippet to `src/index.html` inside `<head>`:

```html
<script defer src="https://privatusstats.com/js/pa.js" data-site="pa_YOURSITEID" data-modules="engage,auto,vitals,clicks,ask"></script>
```

The Angular router uses `history.pushState` by default, which the tracker
follows. With `withHashLocation()` (or `useHash: true`), add
`data-spa="hash"`.

## Events

Declare the global once and call it from a service:

```ts
// privatus.service.ts
import { Injectable } from '@angular/core'

declare global {
  interface Window { privatus?: { track(name: string, props?: Record<string, unknown>): void } }
}

@Injectable({ providedIn: 'root' })
export class PrivatusService {
  track(name: string, props: Record<string, string | number | boolean> = {}) {
    if (typeof window === 'undefined') return // server-side rendering
    window.privatus?.track(name, props)
  }
}
```

With server-side rendering (Angular Universal / SSR), the snippet in
`index.html` still only runs in the browser, and the `typeof window` check
makes the service do nothing on the server.

Ver como Markdown

Add the snippet to src/index.html inside <head>:

html

<script defer src="https://privatusstats.com/js/pa.js" data-site="pa_YOURSITEID" data-modules="engage,auto,vitals,clicks,ask"></script>

The Angular router uses history.pushState by default, which the tracker follows. With withHashLocation() (or useHash: true), add data-spa="hash".

Events#

Declare the global once and call it from a service:

// privatus.service.ts
import { Injectable } from '@angular/core'

declare global {
  interface Window { privatus?: { track(name: string, props?: Record<string, unknown>): void } }
}

@Injectable({ providedIn: 'root' })
export class PrivatusService {
  track(name: string, props: Record<string, string | number | boolean> = {}) {
    if (typeof window === 'undefined') return // server-side rendering
    window.privatus?.track(name, props)
  }
}

With server-side rendering (Angular Universal / SSR), the snippet in index.html still only runs in the browser, and the typeof window check makes the service do nothing on the server.