Angular
Add Logspot analytics to an Angular app with automatic pageviews and custom events.
This guide covers a modern standalone Angular app (v17+). The SDK is framework-agnostic, so the calls are the same on older module-based apps.
Install
npm install @logspot/webInitialize
Call Logspot.init once, before Angular bootstraps, in main.ts:
// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import Logspot from '@logspot/web';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
Logspot.init({
publicKey: 'YOUR_PUBLIC_KEY',
enableAutoPageviews: true,
});
bootstrapApplication(AppComponent, appConfig);Find your public key in Project settings.
Prefer to init inside the root component? You can also call
Logspot.init(...)fromAppComponent'sngOnInit()— it's the same SDK call, just a different place to put it (this is the snippet shown in the in-app Integrations panel).
Angular Router:
enableAutoPageviewstracks history navigations automatically. For manual control, callLogspot.pageview()from aRouterNavigationEndsubscription.
Track Events
Inject nothing — import the SDK directly where you need it:
import { Component } from '@angular/core';
import Logspot from '@logspot/web';
@Component({
selector: 'app-subscribe',
standalone: true,
template: `
<button (click)="subscribe()">Subscribe</button>
<!-- or auto-capture with the class convention: -->
<button class="lgspt-sign-up">Sign up</button>
`,
})
export class SubscribeComponent {
subscribe() {
Logspot.track({ event: 'UserSubscribed', metadata: { plan: 'pro' } });
}
}Identify Users
Logspot.identify('john@doe.com', { plan: 'pro' });Call Logspot.reset() on logout.
Consent (Optional)
Logspot.setConsent({ analytics: true });See How Tracking & Identity Works for the consent model.
Verify It's Working
Run your dev server, navigate around, and watch events appear in the Logspot dashboard within seconds.