Analytics for Angular
Angular apps are typically large and complex — the last thing you need is a heavy analytics library in your bundle. BetterMeter loads as an external script, completely outside Angular's compilation and dependency injection system. Zero bundle impact, full page tracking.
Option 1: Add to index.html
The quickest setup. Add the script tag directly to your index.htmlbefore the closing body tag. Angular's build system leaves it untouched.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Angular App</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<app-root></app-root>
<script
defer
data-site="your-domain.com"
src="https://bettermeter.com/api/script"
></script>
</body>
</html>Option 2: angular.json scripts array
Angular's build configuration supports external scripts. You can reference the BetterMeter tracker URL in your angular.json to have it injected during the build. However, for external CDN scripts the index.html approach above is simpler and recommended.
Angular Router tracking
- 01 History API detection — BetterMeter intercepts
pushStatecalls from the Angular Router. EveryrouterLinknavigation is tracked. - 02 Lazy-loaded routes — When Angular lazy-loads a route module, the URL change is still captured by BetterMeter at the browser level.
- 03 Guard redirects — If an Angular guard redirects the user (e.g., auth guard), BetterMeter tracks the final destination URL, not the redirect chain.
- 04 No NgModule needed — The tracker is not an Angular module. There is nothing to import, provide, or inject.
Outside the bundle
Angular's CLI compiles TypeScript, tree-shakes, and produces optimized bundles. BetterMeter stays entirely outside this process — it's a plain <script> tag loaded from a CDN. Your main.jsbundle size is unaffected. Your build times don't change. The tracker loads in parallel after Angular boots.