ActionLab Analytics for Angular
Add privacy-first, AI-powered analytics to your Angular site in under 60 seconds. No cookies, no consent banners, no complex setup.
Setup at a Glance
Add ActionLab to Angular in 4 simple steps. Copy one script tag, paste it into your project, and start collecting privacy-friendly analytics immediately.
About Angular
Angular is a comprehensive TypeScript framework maintained by Google, used extensively in enterprise applications, government projects, and large-scale web applications. Its opinionated architecture, dependency injection system, and rich built-in features make it suitable for complex projects with large teams. ActionLab integrates through a simple script tag in index.html, automatically tracking Angular Router navigation without requiring Angular modules, services, or dependency injection configuration.
Why Add Analytics to Angular
Angular enterprise applications are often subject to strict governance around dependencies, bundle size, and third-party code. ActionLab external script approach means no npm packages are added to package.json, no modules are registered, no services are injected, and no changes to the Angular build pipeline are needed. This makes security review, dependency auditing, and version management trivial compared to SDK-based analytics tools that become part of the application code. For Angular enterprise teams, this clean separation between application code and analytics is a significant operational advantage.
Installation Code
<!-- Add to src/index.html -->
<script
src="https://cdn.actionlabanalytics.com/actionlab.js"
data-site="YOUR_SITE_ID"
defer
></script>Step-by-Step Setup
- 1
Open your src/index.html file, which is the single HTML page that bootstraps your Angular application.
- 2
Add the ActionLab script tag in the <head> section, before the closing </head> tag.
- 3
Replace YOUR_SITE_ID with your actual site ID from the ActionLab dashboard.
- 4
Angular Router navigation is tracked automatically via History API detection. No Angular module, service, or interceptor is needed.
Why Use ActionLab with Angular
- Automatic Angular Router navigation tracking without adding modules, services, guards, or router event subscriptions to your Angular application.
- No Angular module or service dependency — the analytics are completely external to Angular dependency injection and module system.
- Works with Angular 14+ standalone components, traditional NgModule-based applications, and hybrid approaches.
- Zero impact on Angular build size — the script is external and not processed by the Angular CLI or Webpack/Vite.
Frequently Asked Questions
Does ActionLab work with Angular Universal (SSR)?
Yes. The script tag in index.html is included in the server-rendered HTML output and executes on the client side when the page loads. ActionLab tracks navigation in both SSR-rendered initial page loads and client-side navigations via Angular Router. No server-side Angular Universal configuration is needed for analytics.
Does ActionLab work with Angular lazy-loaded routes?
Yes. ActionLab detects navigation via the History API, which fires regardless of whether the target route module is eagerly or lazily loaded. Lazy-loaded route transitions are tracked identically to eagerly-loaded routes. No additional configuration is needed for lazy loading.
Can I track custom events from Angular components?
Yes. ActionLab JavaScript API for custom events can be called from any Angular component, service, or directive. You can wrap it in an Angular service if you prefer dependency injection for testability, but it works equally well called directly from component code.
Does ActionLab conflict with Angular change detection?
No. ActionLab operates entirely outside Angular zone and change detection system. It does not trigger zone.js patches, does not cause change detection cycles, and does not interact with Angular reactivity model. The script runs in the browser at a level below the Angular runtime.
Does ActionLab work with Angular signals?
Yes. Angular signals (introduced in Angular 16+) are a reactivity primitive within the Angular framework. ActionLab operates at the browser level, completely independent of Angular reactivity system. Whether you use signals, RxJS Observables, or traditional change detection, ActionLab tracking is unaffected.