Angular

Overview

Alytica is a lightweight, privacy-focused web analytics tool designed to provide comprehensive insights into user interactions within Angular applications. With its minimal performance overhead and easy integration, Alytica helps developers understand user behavior effortlessly.

Key Features

Automatic page view tracking
Custom event tracking
Performance-optimized script
Seamless Angular integration
Comprehensive user interaction monitoring

Integration Steps

1. Create a Project

First create a project from your Alytica dashboard by clicking the button "New Website"

2. Script Injection

For Angular applications, you have multiple integration approaches:

Option 1: index.html (Global Injection)

In your src/index.html, add the Alytica script:

<!doctype html>
<html>
<head>
  <script 
    src="https://alytica.tech/js/tracker.js"
    data-website-id="YOUR_WEBSITE_ID"
    data-domain="yourdomain.com"
  ></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Option 2: Angular Service (Recommended)

Create an Alytica tracking service:

// alytica.service.ts
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class AlyticaService {
  constructor() {
    this.initTracker();
  }
 
  private initTracker() {
    const script = document.createElement('script');
    script.src = 'https://alytica.tech/js/tracker.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    script.setAttribute('data-domain', 'yourdomain.com');
    document.body.appendChild(script);
  }
 
  trackEvent(eventType: string, eventData?: any) {
    if (window.alytica) {
      window.alytica(eventType, eventData);
    }
  }
}

3. Custom Event Tracking

Leverage the AlyticaService for tracking events:

@Component({...})
export class SignupComponent {
  constructor(private alyticaService: AlyticaService) {}
  
  onSignup() {
    this.alyticaService.trackEvent('signup', { 
      email:'user@emai.com'
    });
  }
}

Leverage a prebuilt event type 'payment' to use our revenue analytics and payment attribution the payment tracking should happen on your payment confirmation page

@Component({...})
 
export class PaymentComponent {
  constructor(private alyticaService: AlyticaService) {}
  onPayment() {
    this.alyticaService.trackEvent('payment', { 
      email:'customer@emai.com'
      amount: 69.99
    });
  }
}

You can track any event with the window?.alytica() object

@Component({...})
 
export class Cart {
  constructor(private alyticaService: AlyticaService) {}
  onPayment() {
    this.alyticaService.trackEvent('added to cart', { 
     product: "T-shirt"
    });
  }
}

Best Practices

Initialize tracking in a service
Use dependency injection
Track events consistently
Avoid tracking sensitive information

Testing Your Integration

Click the Verify Script button in the setup form. This will automatically check if the script is correctly installed and configured on your website.
- If successful, you'll see a "Verification Successful" message.
- If it fails, review the script placement and domain settings, then try again.
Check Network tab for https://alytica.tech/api/track-visit calls
Verify custom events are being sent
Use Alytica's dashboard for comprehensive insights

Performance Considerations

The Alytica script is lightweight and async
Minimal impact on application performance
No blocking of critical rendering paths

Conclusion

Alytica provides an intuitive, performance-friendly analytics solution for Angular applications. By implementing these integration steps, you'll unlock powerful insights into user behavior with minimal configuration effort.

Visit Alytica Dashboard →

Angular

On this page