Angular

Name: Rybbit
Author: Rybbit

This guide explains how to integrate Rybbit with your Angular application.

How to Add Rybbit to Your Angular App

The recommended and most common method is to add the Rybbit tracking script directly to your src/index.html file. This ensures the script is loaded early and reliably for your Angular application.

Adding to `src/index.html`

1. Retrieve Your Tracking Script

Navigate to your Rybbit dashboard to obtain your code snippet. It will look like this:


<script
  src="https://app.rybbit.io/api/script.js"
  data-site-id="YOUR_SITE_ID"
  async
  defer
></script>

Remember to replace YOUR_SITE_ID with your actual Site ID.

2. Locate Your `index.html` File

In a standard Angular CLI project, this file is typically located at src/index.html.

3. Add the Snippet to `index.html`

Open src/index.html and paste the Rybbit tracking snippet just before the closing </head> tag or </body> tag. Placing it in the <head> is generally preferred for earlier loading.

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">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Rybbit Tracking Snippet -->
  <script
    src="https://app.rybbit.io/api/script.js"
    data-site-id="YOUR_SITE_ID"
    async
    defer
  ></script>
</head>
<body>
  <app-root></app-root> <!-- Your root Angular component -->
  <!-- If you prefer, you can also place the script here, before </body> -->
</body>
</html>

Make sure to replace YOUR_SITE_ID with your actual Site ID.

4. Verify Installation

After building and deploying your application, open your Rybbit dashboard to check if data is being received. You can also inspect your browser’s network tab to confirm that script.js is loaded.

SPA Page View Tracking: Rybbit’s tracking script is designed to automatically detect route changes in most Angular applications (using Angular Router) and track them as page views. If you find that page views are not being tracked correctly after navigation, you might need to manually trigger page views. You can subscribe to router events:


// In a relevant component or service
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
 
// ...
// constructor(private router: Router) {}
// ...
 
// this.router.events.pipe(
//   filter(event => event instanceof NavigationEnd)
// ).subscribe(() => {{
//   if (window.rybbit) {{
//     window.rybbit.trackPageview();
//   }}
// }});

However, test the default behavior first, as manual tracking might not be necessary.

Custom Event Tracking

Once the Rybbit script is installed and loaded, you can track custom events from any of your Angular components or services:


// Example in an Angular component
import { Component } from '@angular/core';
 
// Declare rybbit on window for TypeScript
declare global {
  interface Window {
    rybbit?: {
      trackEvent: (eventName: string, eventData?: Record<string, any>) => void;
      trackPageview: () => void;
      // Add other methods if you use them
    };
  }
}
 
@Component({{
  selector: 'app-my-feature',
  template: `<button (click)="onFeatureClick()">Use Feature</button>`,
}})
export class MyFeatureComponent {{
  onFeatureClick(): void {{
    if (window.rybbit && typeof window.rybbit.trackEvent === 'function') {{
      window.rybbit.trackEvent('feature_used', {{ featureName: 'Amazing Feature' }});
    }} else {{
      console.warn('Rybbit tracking not available.');
    }}
  }}
}}

Declaring window.rybbit helps with TypeScript type checking. Always ensure window.rybbit and its methods are available before calling them.