Meta tags:
description=Integrate Rybbit Analytics with your Angular application;
author=Rybbit Team;
keywords=web analytics,privacy analytics,open source analytics,Google Analytics alternative,website tracking,self-hosted analytics;

Headings (most frequently used words):

to, your, index, html, angular, add, tracking, how, rybbit, app, custom, event, adding, src, retrieve, script, locate, file, the, snippet, verify, installation, on, this, page,

Text of the page (most frequently used words):
rybbit (30), your (22), #angular (17), #script (15), tracking (12), html (12), the (11), index (9), and (9), window (9), you (8), event (7), src (7), app (7), router (7), add (6), this (6), with (6), snippet (5), page (5), application (5), data (5), feature (5), component (5), site (5), guides (5), file (4), how (4), for (4), from (4), import (4), can (4), events (4), your_site_id (4), body (4), head (4), settings (4), custom (3), installation (3), integrate (3), analytics (3), astro (3), use (3), before (3), them (3), not (3), void (3), loaded (3), track (3), filter (3), views (3), open (3), root (3), api (3), tag (3), self (3), documentation (3), verify (2), locate (2), retrieve (2), adding (2), content (2), tagging (2), typescript (2), type (2), methods (2), are (2), available (2), onfeatureclick (2), button (2), other (2), pageview (2), any (2), string (2), declare (2), might (2), subscribe (2), navigationend (2), most (2), that (2), being (2), after (2), dashboard (2), also (2), replace (2), actual (2), defer (2), https (2), href (2), icon (2), width (2), meta (2), title (2), guide (2), integration (2), users (2), hosting (2), troubleshooting (2), traffic (2), 692 (2), github (2), rich, websites, tags, label, segment, declaring, helps, checking, always, ensure, its, calling, warn, console, else, amazing, featurename, feature_used, function, typeof, myfeaturecomponent, class, export, click, template, selector, record, eventdata, eventname, interface, global, core, example, once, installed, components, services, however, test, default, behavior, first, manual, necessary, instanceof, pipe, constructor, private, rxjs, operators, relevant, service, designed, automatically, detect, route, changes, applications, using, find, tracked, correctly, navigation, need, manually, trigger, spa, view, building, deploying, check, received, inspect, browser, network, tab, confirm, make, sure, prefer, place, here, favicon, ico, image, rel, link, device, initial, scale, viewport, name, base, myangularapp, utf, charset, lang, doctype, paste, just, closing, placing, generally, preferred, earlier, loading, standard, cli, project, typically, located, remember, navigate, obtain, code, will, look, like, recommended, common, method, directly, ensures, early, reliably, explains, copy, markdown, definitions, inviting, billing, teams, organization, account, migration, managing, quick, start, embeds, funnels, goals, bot, detection, hiding, own, sdks, proxy, wordpress, woocommerce, wix, webflow, vue, vitepress, thrivecart, svelte, strapi, squarespace, shopify, sanity, react, prestashop, mintlify, laravel, joomla, jekyll, hugo, google, manager, gitbook, ghost, framer, drupal, docusaurus, contentful, carrd, bubble, bigcommerce, identify, autocapture, usage, hosted, cloud, architecture, comparison, introduction, setup, reference, search,

Text of the page (random words):
angular rybbit search k github rybbit io rybbit 12 5k 692 documentation api reference documentation guides setup and feature documentation github rybbit io rybbit 12 5k 692 introduction comparison architecture self hosted vs cloud usage tracking script troubleshooting track events autocapture identify users tagging integration guides angular astro bigcommerce bubble io carrd contentful docusaurus drupal framer ghost gitbook google tag manager hugo jekyll joomla laravel mintlify prestashop react sanity shopify squarespace strapi svelte thrivecart vitepress vue webflow wix woocommerce wordpress proxy guide sdks hiding your own traffic filter traffic bot detection goals funnels embeds feature guides self hosting quick start managing your installation troubleshooting self hosting guides migration to v1 0 settings account settings organization settings teams billing inviting users site settings data import other definitions angular integration guides angular integrate rybbit analytics with your angular application copy markdown open this guide explains how to integrate rybbit with your angular application how to add rybbit to your angular app the recommended and most common method is to add the rybbit 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 retrieve your tracking script navigate to your rybbit dashboard to obtain your code snippet it will look like this script src https app rybbit io api script js data site id your_site_id defer script remember to replace your_site_id with your actual site id locate your index html file in a standard angular cli project this file is typically located at src index html add the snippet to index html open src index html and paste the rybbit tracking snippet just before the closing head tag or body tag placing it in the head is generally preferred for earlier loading doctype html html lang en head meta charset utf 8 title myangularapp title base href meta name viewport content width device width initial scale 1 link rel icon type image x icon href favicon ico rybbit tracking snippet script src https app rybbit io api script js data site id your_site_id defer script head body app root app root your root angular component if you prefer you can also place the script here before body body html make sure to replace your_site_id with your actual site id verify installation after building and deploying your application open your rybbit dashboard to check if data is being received you can also inspect your browser s network tab to confirm that script js is loaded spa page view tracking rybbit s tracking script is designed to automatically detect route changes in most angular applications using angular router and track them as page views if you find that page views are not being tracked correctly after navigation you might need to manually trigger page views you can subscribe to router events in a relevant component or service import router navigationend from angular router import filter from rxjs operators constructor private router router this router events pipe filter event event instanceof navigationend subscribe if window rybbit window rybbit pageview however test the default behavior first as manual tracking might not be necessary custom event tracking once the rybbit script is installed and loaded you can track custom events from any of your angular components or services example in an angular component import component from angular core declare rybbit on window for typescript declare global interface window rybbit event eventname string eventdata record string any void pageview void add other methods if you use them component selector app my feature template button click onfeatureclick use feature button export class myfeaturecomponent onfeatureclick void if window rybbit typeof window rybbit event function window rybbit event feature_used featurename amazing feature else console warn rybbit tracking not available declaring window rybbit helps with typescript type checking always ensure window rybbit and its methods are available before calling them tagging how to use tags to label and segment analytics data in rybbit astro integrate rybbit analytics with your astro application for content rich websites on this page how to add rybbit to your angular app adding to src index html retrieve your tracking script locate your index html file add the snippet to index html verify installation custom event tracking