Skip to main content

Angular

Integrate Swetrix with your Angular application to track page views, monitor errors, and capture custom events — all while staying privacy-friendly and GDPR-compliant.

Installation​

Install the Swetrix npm package:

npm install swetrix

Basic setup (without routing)​

If your app doesn't use the Angular Router, you can initialise Swetrix once in your root component.

Open src/app/app.component.ts:

import { Component, OnInit } from '@angular/core'
import * as Swetrix from 'swetrix'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit() {
    Swetrix.init('YOUR_PROJECT_ID')
    Swetrix.trackViews()
  }
}
caution

Replace YOUR_PROJECT_ID with your actual Project ID from the Swetrix dashboard, otherwise tracking won't work.

With Angular Router​

trackViews() automatically detects client-side route changes (including Angular Router navigations), so you only need to call it once in your root component — no router subscription needed.

The same AppComponent setup from above works for apps with routing.

Noscript fallback (optional)​

To track visitors who have JavaScript disabled, add a noscript image pixel to your src/index.html:

<body>
  <app-root></app-root>

  <noscript>
    <img
      src="https://api.swetrix.com/log/noscript?pid=YOUR_PROJECT_ID"
      alt=""
      referrerpolicy="no-referrer-when-downgrade"
    />
  </noscript>
</body>

Disable tracking in development​

By default, Swetrix ignores localhost traffic. You can also explicitly disable it using Angular's environment files.

1. Define the flag in your environments

src/environments/environment.ts (production):

export const environment = {
  production: true,
  swetrixDisabled: false,
}

src/environments/environment.development.ts:

export const environment = {
  production: false,
  swetrixDisabled: true,
}

2. Use it during initialisation

import { environment } from '../environments/environment'
import * as Swetrix from 'swetrix'

Swetrix.init('YOUR_PROJECT_ID', {
  disabled: environment.swetrixDisabled,
})
tip

If you want to verify tracking locally during development, set devMode: true instead:

Swetrix.init('YOUR_PROJECT_ID', {
  devMode: true,
})

Remember to remove this before deploying to production.

Check your installation​

Build and deploy your application (or temporarily enable devMode) and visit a few pages. Within a minute you should see new pageviews appearing in your Swetrix dashboard.

Error tracking​

Enable automatic client-side error monitoring by adding trackErrors() to your initialisation. This captures unhandled JavaScript errors and reports them to Swetrix.

Update your AppComponent:

ngOnInit() {
  Swetrix.init('YOUR_PROJECT_ID')
  Swetrix.trackViews()
  Swetrix.trackErrors()
}

Errors will appear in the Errors tab of your project dashboard. See the tracking script reference for options like sampleRate and callback.

Tracking custom events​

Custom events let you track specific user interactions — button clicks, form submissions, sign-ups, purchases, and more. Import swetrix in any component and call track().

Example: tracking button clicks​

import { Component } from '@angular/core'
import * as Swetrix from 'swetrix'

@Component({
  selector: 'app-signup-button',
  template: '<button (click)="onClick()">Sign up</button>',
})
export class SignUpButtonComponent {
  onClick() {
    Swetrix.track({
      ev: 'SIGNUP_CTA_CLICK',
      meta: {
        location: 'navbar',
      },
    })
  }
}

Example: tracking form submissions​

import { Component } from '@angular/core'
import * as Swetrix from 'swetrix'

@Component({
  selector: 'app-contact-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input type="email" placeholder="you@example.com" required />
      <textarea placeholder="How can we help?" required></textarea>
      <button type="submit">Send</button>
    </form>
  `,
})
export class ContactFormComponent {
  onSubmit() {
    Swetrix.track({
      ev: 'CONTACT_FORM_SUBMITTED',
      meta: {
        source: 'support_page',
      },
    })

    // ...submit logic
  }
}

Create a reusable directive for external links:

import { Directive, HostListener, Input } from '@angular/core'
import * as Swetrix from 'swetrix'

@Directive({ selector: 'a[appTrackOutbound]' })
export class TrackOutboundDirective {
  @Input() appTrackOutbound = 'OUTBOUND_CLICK'

  @HostListener('click', ['$event.target'])
  onClick(target: HTMLAnchorElement) {
    Swetrix.track({
      ev: this.appTrackOutbound,
      meta: { url: target.href },
    })
  }
}

Usage in a template:

<a href="https://example.com" target="_blank" appTrackOutbound>Visit Example</a>

<!-- With a custom event name -->
<a href="https://partner.com" target="_blank" appTrackOutbound="PARTNER_LINK_CLICK">
  Our partner
</a>

Event naming rules​

Event names must:

  • Contain any characters (including spaces, unicode, etc.)
  • Be no longer than 256 characters

We recommend UPPER_SNAKE_CASE for consistency (e.g. SIGNUP_CTA_CLICK, CONTACT_FORM_SUBMITTED).

Using environment variables for your Project ID​

Rather than hardcoding your Project ID, you can store it in Angular's environment files.

1. Add to your environment files:

src/environments/environment.ts:

export const environment = {
  production: true,
  swetrixPid: 'YOUR_PROJECT_ID',
}

2. Use it in your analytics service:

import { environment } from '../../environments/environment'
import * as Swetrix from 'swetrix'

Swetrix.init(environment.swetrixPid)

Further reading​

Help us improve Swetrix

Was this page helpful to you?

Learn how to contribute•Report a problem with this content