How to add analytics to an Angular app

src/index.html is the document every Angular route renders into — for a browser-only build and for @angular/ssr, which uses it as the template. Adding the tag there keeps it outside Angular's change detection and out of your bundles, and guarantees it loads exactly once.

How to install VisitTrack on Angular

1. 1

   Step 1: Copy your site id

   Copy your snippet from VisitTrack's install step (or Settings → General). SITE_ID below is the placeholder.

2. 2

   Step 2: Add the tag to src/index.html

   Inside <head>, after <base href>.

   src/index.htmlCopy

   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>MyApp</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script defer data-site="SITE_ID" src="https://visitrack.app/tracker.js"></script>
   </head>
   <body>
     <app-root></app-root>
   </body>
   </html>

3. 3

   Step 3: Optional: production-only index file

   To keep staging builds out, point the production configuration at its own index file in angular.json ("index": { "input": "src/index.prod.html", "output": "index.html" }) and put the tag only there. Or simply save your production hosts in Settings → General → Allowed hostnames.

4. 4

   Step 4: Build, deploy and browse

   ng serve runs on localhost and is ignored. Deploy a production build and navigate around the live app.

How to check VisitTrack is working on Angular

1. Navigate between two routes with routerLinks on the deployed app.
2. The VisitTrack live view shows you within seconds; the Pages tab lists both paths.
3. DevTools → Network shows one POST to visitrack.app/api/collect per navigation.
4. If you enabled autoCsp or another CSP, confirm the tracker request isn't blocked in the console.

Does VisitTrack track Angular page navigation?

Angular's default PathLocationStrategy updates the URL with history.pushState/replaceState, both of which the tracker wraps, and back/forward fire popstate. Each pathname change is one pageview; query-param-only changes (queryParamsHandling, filter state) aren't counted again.

HashLocationStrategy (withHashLocation() or RouterModule.forRoot(routes, { useHash: true })) keeps routes after #, so the pathname never changes and only the first load is a pageview. Switch to path routing (your server must serve index.html for deep links), or send an event per navigation:

// Only for hash routing: one event per screen.
router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((e) => {
  (window as any).visitrack?.("screen_view", { screen: (e as NavigationEnd).urlAfterRedirects });
});

How to track custom events and goals in Angular

Wrap the global in a service so components stay testable and SSR never touches window:

import { Injectable, PLATFORM_ID, inject } from "@angular/core";
import { isPlatformBrowser } from "@angular/common";

type Props = Record<string, string | number | boolean>;

@Injectable({ providedIn: "root" })
export class AnalyticsService {
  private browser = isPlatformBrowser(inject(PLATFORM_ID));

  track(name: string, props?: Props) {
    if (this.browser) (window as any).visitrack?.(name, props);
  }

  identify(userId: string, traits?: Props) {
    if (this.browser) (window as any).visitrack?.identify?.(userId, traits);
  }
}

// usage: this.analytics.track("signup", { plan: "pro" }) after the API call succeeds

In templates, data-vt-goal="cta_click" and data-vt-scroll="pricing_viewed" are plain attributes Angular passes through. Turn any event name into a goal in Settings → Goals.

Script options you might need on Angular

All optional — add them to the same tag. Full reference: script configuration.

Angular troubleshooting

Not on Angular? See all 29 integration guides.