Angular

Add Reignat analytics to your Angular app.

Via index.html

The quickest way: add the script to src/index.html before </body>:

src/index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>My App</title>    <base href="/" />  </head>  <body>    <app-root></app-root>     <script      src="https://www.reignat.com/tracker.js"      data-site="your-project-id"      defer    ></script>  </body></html>

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>My App</title>    <base href="/" />  </head>  <body>    <app-root></app-root>     <script      src="https://www.reignat.com/tracker.js"      data-site="your-project-id"      defer    ></script>  </body></html>

Via service

For more control, inject the tracker from your root AppComponent:

src/app/app.component.ts

import { Component, OnInit, Inject, PLATFORM_ID } from "@angular/core"import { isPlatformBrowser } from "@angular/common" @Component({  selector: "app-root",  template: "<router-outlet />",})export class AppComponent implements OnInit {  constructor(@Inject(PLATFORM_ID) private platformId: object) {}   ngOnInit() {    if (isPlatformBrowser(this.platformId)) {      const script = document.createElement("script")      script.src = "https://www.reignat.com/tracker.js"      script.dataset["site"] = "your-project-id"      script.defer = true      document.head.appendChild(script)    }  }}

import { Component, OnInit, Inject, PLATFORM_ID } from "@angular/core"import { isPlatformBrowser } from "@angular/common" @Component({  selector: "app-root",  template: "<router-outlet />",})export class AppComponent implements OnInit {  constructor(@Inject(PLATFORM_ID) private platformId: object) {}   ngOnInit() {    if (isPlatformBrowser(this.platformId)) {      const script = document.createElement("script")      script.src = "https://www.reignat.com/tracker.js"      script.dataset["site"] = "your-project-id"      script.defer = true      document.head.appendChild(script)    }  }}

ℹ

The isPlatformBrowser guard makes this SSR-safe if you use Angular Universal.

Verify

Deploy and open your app in a browser. Check your Reignat dashboard: a pageview should appear within seconds.

ℹ

Reignat ignores localhost automatically. Test on your deployed URL.