Angular

npm install @dwellcount/angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DwellcountModule } from '@dwellcount/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    DwellcountModule.forRoot({
      siteId: 'YOUR_SITE_ID',
      version: '1.0.0',
      // endpoint: 'https://your-server.com/api/ingest' // Self-hosted
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { bootstrapApplication } from '@angular/platform-browser';
import { provideDwellcount } from '@dwellcount/angular';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideDwellcount({
      siteId: 'YOUR_SITE_ID',
      version: '1.0.0',
    }),
  ],
});

import { Component } from '@angular/core';
import { DwellcountService } from '@dwellcount/angular';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-checkout',
  template: `
    <button (click)="handleCheckout()">Checkout</button>
  `,
})
export class CheckoutComponent {
  constructor(
    private dwellcount: DwellcountService,
    private http: HttpClient
  ) {}

  async handleCheckout() {
    // Track custom event
    this.dwellcount.track('checkout_started', {
      cartTotal: 99.99,
      itemCount: 3,
    });

    // Make API call and capture backend version
    this.http.get('/api/checkout', { observe: 'response' }).subscribe(response => {
      const version = response.headers.get('X-App-Version');
      if (version) {
        this.dwellcount.setBackendVersion({ version });
      }
    });
  }
}

<!-- Track click event (default) -->
<button dcTrack="cta_clicked" [dcTrackProps]="{ location: 'hero' }">
  Get Started
</button>

<!-- Track hover event -->
<div
  dcTrack="product_hovered"
  dcTrackOn="mouseenter"
  [dcTrackProps]="{ productId: product.id }"
>
  {{ product.name }}
</div>

<!-- Track form submission -->
<form dcTrack="newsletter_signup" dcTrackOn="submit">
  <input type="email" placeholder="Email" />
  <button type="submit">Subscribe</button>
</form>

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { DwellcountService } from '@dwellcount/angular';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {
  constructor(
    private router: Router,
    private dwellcount: DwellcountService
  ) {
    // Track page views on navigation
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        this.dwellcount.track('page_view', {
          path: event.urlAfterRedirects,
        });
      });
  }
}