Docs
Installation

Install Visitors on Angular

Angular provides several approaches for integrating third-party scripts. Here are the recommended methods for adding Visitors analytics to your Angular application.

Replace YOUR_TOKEN with your project token.

Simplest approach

The simplest approach is to add the script tag directly to your src/index.html file.

src/index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script 
    src="https://cdn.visitors.now/v.js" 
    data-token="YOUR_TOKEN">
  </script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Using DOCUMENT Service

For more control, you can inject the script programmatically in your app component:

src/app/app.component.ts
import { Component, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: Document) {}
  ngOnInit(): void {
    const script = this.document.createElement('script');
    script.src = 'https://cdn.visitors.now/v.js';
    script.setAttribute('data-token', 'YOUR_TOKEN');
    script.async = true;
    this.document.head.appendChild(script);
  }
}