Angular Analytics Integration

To add tinyanalytics to an Angular app, paste the tracking snippet into src/index.html, the single HTML shell for the whole app. It loads once, and client-side navigation with the Angular Router is tracked automatically.

Before you start

A tinyanalytics site. If you don’t have one yet, follow the Quickstart.
Your snippet from Settings → Tracking in your dashboard.

Add the snippet to `src/index.html`

Add the tag inside the <head>:

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Angular App</title>
    <base href="/" />
    <script defer src="https://dash.tinyanalytics.io/script.js"
      data-site-id="YOUR_SITE_ID"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Replace YOUR_SITE_ID with your real site ID, and copy the full snippet from Settings → Tracking if you’ve toggled any options.

The Angular Router renders route changes on the client, and tinyanalytics records each one as a new pageview by default (data-track-spa). You don’t need to subscribe to router events. See Track single-page apps to change this.

Verify

Run or deploy your app, open it in a browser, then check Realtime in your dashboard for your visit. See Verify your setup for the full check.

Your install is working when your own visit appears in Realtime in your dashboard.

Install on any platform

The universal method and other platforms.

Configure the tracking script

Every data-* option you can set.

Track custom events

Send events from your components.

Verify your setup

Confirm tracking works.

Choose an install method

Frameworks

Other platforms

Angular Analytics Integration

Before you start

Add the snippet to `src/index.html`

Client-side navigation is tracked automatically

Verify

Install on any platform

Configure the tracking script

Track custom events

Verify your setup

​Before you start

​Add the snippet to src/index.html

​Client-side navigation is tracked automatically

​Verify

​Related

Install on any platform

Configure the tracking script

Track custom events

Verify your setup

Before you start

Add the snippet to `src/index.html`

Client-side navigation is tracked automatically

Verify

Related