Angular

An Angular CLI project serves one HTML shell, src/index.html, for every route. Paste the snippet into its <head> and the script loads once for the whole app.

Get your tracking snippet

In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.

Add the snippet to Angular

Open src/index.html and paste the snippet just before </head>:

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyAngularApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Placing it before </body> also works; <head> lets it start loading sooner. Navigation through the Angular Router is tracked automatically as pageviews.

Verify installation

Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.

If nothing shows up:

View the page source and search for script.js?siteId= to confirm the snippet is on the page.
Open the browser Network tab and check that script.js returns 200 and that POST requests go to /api/track.
Disable ad blockers, or set up a proxy so the script loads from your own domain.
See the script troubleshooting guide for other common causes.

Track custom events

Declare rybbit on window once so TypeScript accepts the call, then call window.rybbit.event() from any component or service. Guard the call so a blocked script does not throw.

src/app/feature/feature.component.ts

import { Component } from "@angular/core";

declare global {
  interface Window {
    rybbit?: {
      event: (eventName: string, eventData?: Record<string, any>) => void;
      pageview: () => void;
    };
  }
}

@Component({
  selector: "app-feature",
  template: `<button (click)="onFeatureClick()">Use Feature</button>`,
})
export class FeatureComponent {
  onFeatureClick(): void {
    if (window.rybbit) {
      window.rybbit.event("feature_used", { featureName: "Amazing Feature" });
    }
  }
}

Troubleshooting

Pageviews missing after navigation: this is rare. If it happens, subscribe to Router.events, filter for NavigationEnd and call window.rybbit.pageview(); test the default behaviour first.

Next steps

Track custom events such as signups, purchases and button clicks.
Identify users to connect sessions to accounts.
Proxy the script through your own domain to bypass ad blockers.
Script attributes let you skip or mask URLs and tag events.