Angular

Fathom Analytics works great with Angular applications. Since Angular is a single-page application framework, you’ll want to properly track page views as users navigate between routes.

Simple setup with data-spa

The quickest way to add Fathom to your Angular app is by adding the script to your index.html with the data-spa attribute:

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR-SITE-ID" data-spa="auto" defer></script>

Note: Replace `YOUR-SITE-ID` with your actual Fathom site ID. You can find this in your Fathom site settings.

Add this just before the closing </head> tag in src/index.html.

Using a service for more control

For more control over tracking, create a dedicated Fathom service:

1. Install fathom-client:

npm install fathom-client

2. Create a Fathom service at src/app/services/fathom.service.ts:

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import * as Fathom from 'fathom-client';

@Injectable({
  providedIn: 'root'
})
export class FathomService {
  constructor(private router: Router) {}

  initialize(siteId: string) {
    Fathom.load(siteId, {
      auto: false
    });

    // Track page views on route changes
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        Fathom.trackPageview({
          url: event.urlAfterRedirects
        });
      });
  }

  trackEvent(name: string, value?: number) {
    if (value !== undefined) {
      Fathom.trackEvent(name, { _value: value });
    } else {
      Fathom.trackEvent(name);
    }
  }
}

3. Initialize the service in your app.component.ts:

import { Component, OnInit } from '@angular/core';
import { FathomService } from './services/fathom.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private fathom: FathomService) {}

  ngOnInit() {
    this.fathom.initialize('YOUR-SITE-ID');
  }
}

For standalone components (Angular 17+)

If you’re using standalone components, you can initialize Fathom in your app config:

// app.config.ts
import { ApplicationConfig, APP_INITIALIZER, inject } from '@angular/core';
import { FathomService } from './services/fathom.service';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        const fathom = inject(FathomService);
        return () => fathom.initialize('YOUR-SITE-ID');
      },
      multi: true
    }
  ]
};

Tracking events

Use the Fathom service to track custom events:

import { Component } from '@angular/core';
import { FathomService } from './services/fathom.service';

@Component({
  selector: 'app-signup',
  template: `<button (click)="onSignup()">Sign Up</button>`
})
export class SignupComponent {
  constructor(private fathom: FathomService) {}

  onSignup() {
    this.fathom.trackEvent('Signup Button Clicked');
    // ... rest of your signup logic
  }
}

For events with monetary values (in cents):

this.fathom.trackEvent('Purchase Completed', 9900); // $99.00

Environment configuration

Store your site ID in Angular’s environment files:

// src/environments/environment.ts
export const environment = {
  production: false,
  fathomSiteId: '' // Empty for development
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  fathomSiteId: 'YOUR-SITE-ID'
};

Then use it when initializing:

import { environment } from '../environments/environment';

if (environment.fathomSiteId) {
  this.fathom.initialize(environment.fathomSiteId);
}

Further customization

To learn about all the options we offer, read our advanced documentation here.