Skip to main content

Angular Integration

Add Ovyxa analytics to your Angular application via index.html or the angular.json scripts configuration.

Add the tracking script to your src/index.html file, just before the closing </head> tag:

src/index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Angular App</title>
  <!-- ... other head elements ... -->

  <script
    defer
    data-domain="yourdomain.com"
    src="https://ovyxa.com/js/script.js"
  ></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Option 2: Via angular.json​

Add the script to the scripts array in angular.json:

angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              {
                "input": "https://ovyxa.com/js/script.js",
                "inject": true
              }
            ]
          }
        }
      }
    }
  }
}

Note: The index.html approach is preferred because it preserves the data-domain and defer attributes.

Tracking Custom Events​

Create a reusable service for tracking:

src/app/ovyxa.service.ts
import { Injectable } from '@angular/core'

declare global {
  interface Window { ovyxa: (event: string, name: string, options?: object) => void }
}

@Injectable({ providedIn: 'root' })
export class OvyxaService {
  trackEvent(name: string, props?: Record<string, string>) {
    window.ovyxa?.('event', name, props ? { props } : undefined)
  }
}

Use it in any component:

constructor(private ovyxa: OvyxaService) {}

onSignup() {
  this.ovyxa.trackEvent('Signup', { plan: 'growth' })
}

Cookieless Mode​

Add data-cookieless to skip cookie consent requirements:

<script
  defer
  data-domain="yourdomain.com"
  data-cookieless
  src="https://ovyxa.com/js/script.js"
></script>

Verify Installation​

  1. Serve your app (ng serve) or deploy it
  2. Visit the app in your browser
  3. Open the browser Network tab and look for a request to ovyxa.com/js/script.js
  4. Check your Ovyxa dashboard to confirm pageviews are appearing

Next Steps​