# Angular > Add cookieless product analytics to your Angular application import { Steps, Step } from "@/components/docs"; import { Callout } from "@/components/docs"; import { CodeBlock } from "@/components/docs"; import { Card, Cards } from "@/components/docs"; This guide explains how to integrate Databuddy with your Angular application. ## How to Add Databuddy to Your Angular App The recommended method is to add the Databuddy tracking script directly to your `src/index.html` file. This ensures the script is loaded early and reliably for your Angular application. ### Adding to `src/index.html` Navigate to your [Databuddy dashboard](https://app.databuddy.cc) to get your tracking code snippet. It will look like this: `} /> Remember to replace `YOUR_CLIENT_ID` with your actual Client ID. In a standard Angular CLI project, this file is typically located at `src/index.html`. Open `src/index.html` and paste the Databuddy tracking snippet just before the closing `` tag or `` tag. Placing it in the `` is generally preferred for earlier loading. MyAngularApp `} /> Make sure to replace `YOUR_CLIENT_ID` with your actual Client ID. After building and deploying your application, open your [Databuddy dashboard](https://app.databuddy.cc) to check if data is being received. You can also inspect your browser's network tab to confirm the script is loaded. **SPA Page View Tracking**: Databuddy automatically detects route changes in most Angular applications using Angular Router and tracks them as page views. If you find that page views are not being tracked correctly after navigation, you can manually trigger page views by subscribing to router events: event instanceof NavigationEnd) ).subscribe(() => { if (window.databuddy) { window.databuddy.screenView({ path: window.location.pathname }); } });`} /> However, test the default behavior first, as manual tracking might not be necessary. ## Custom Event Tracking Once the Databuddy script is installed and loaded, you can track custom events from any of your Angular components or services. ### TypeScript Declaration First, declare the Databuddy types for TypeScript: ) => void; screenView: (properties?: Record) => void; flush: () => void; clear: () => void; setGlobalProperties: (properties: Record) => void; }; } } export {};`} /> ### Component Example Use Feature\`, }) export class MyFeatureComponent { onFeatureClick(): void { if (window.databuddy && typeof window.databuddy.track === 'function') { window.databuddy.track('feature_used', { featureName: 'Amazing Feature', component: 'MyFeatureComponent' }); } else { console.warn('Databuddy tracking not available.'); } } }`} /> Always ensure `window.databuddy` and its methods are available before calling them. ## Service-Based Tracking Create a service for centralized tracking: ): void { if (typeof window !== 'undefined' && window.databuddy) { window.databuddy.track(eventName, properties); } } screenView(properties?: Record): void { if (typeof window !== 'undefined' && window.databuddy) { window.databuddy.screenView(properties); } } setGlobalProperties(properties: Record): void { if (typeof window !== 'undefined' && window.databuddy) { window.databuddy.setGlobalProperties(properties); } } }`} /> Then use it in your components: ## Route Change Tracking Track route changes automatically: event instanceof NavigationEnd) ).subscribe((event: NavigationEnd) => { if (window.databuddy) { window.databuddy.screenView({ path: event.urlAfterRedirects, screen_name: event.urlAfterRedirects, screen_class: 'Angular' }); } }); } }`} /> ## Configuration Options Enable additional tracking features by adding data attributes to your script tag: `} /> ## Using Data Attributes Enable automatic tracking with data attributes: Get Started View Pricing `} /> ## Common Use Cases ### Form Submissions Track form submissions: ### User Actions Track user interactions: ### Error Tracking Track errors automatically (if enabled) or manually: Register it in your `app.config.ts`: ## Environment Configuration Store your Client ID in environment variables: Then use it in your `index.html`: `} /> Use Angular's file replacements or a build-time templating step to substitute `YOUR_CLIENT_ID` per environment. ## Troubleshooting ### Script Not Loading - Verify the script is in `src/index.html` in the `` section - Check browser console for errors - Ensure your Client ID is correct - Clear browser cache and reload - Check Angular build output for any issues ### Events Not Tracking - Confirm `window.databuddy` exists before calling tracking methods - Always check `typeof window !== 'undefined'` for SSR safety - Check browser console for any errors - Verify events appear in your Databuddy dashboard after 2-3 minutes - Use browser dev tools Network tab to confirm requests are being sent ### Route Changes Not Tracked - Databuddy automatically tracks route changes in most Angular apps - If needed, manually track using router events (see example above) - Check that Angular Router is properly configured - Verify navigation events are firing correctly ### TypeScript Errors - Ensure you've declared `window.databuddy` types (see TypeScript Declaration section) - Add the declaration file to your `tsconfig.json` includes - Use optional chaining: `window.databuddy?.track(...)` ## Related Integrations TypeScript support with React hooks and components. App Router and Pages Router support with SSR. Lightweight Svelte integration with reactive tracking. Need help with your Angular integration? Contact us at [support@databuddy.cc](mailto:support@databuddy.cc).