Meta tags:
description=Integrate Rybbit with your Next.js application for analytics tracking;
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, script, next, js, add, tracking, your, the, how, rybbit, custom, event, retrieve, install, using, component, layout, file, optional, rewrite, serving, bypass, ad, blockers, on, this, page,

Text of the page (most frequently used words):
#script (30), #rybbit (29), next (25), your (20), the (18), tracking (15), you (11), and (10), using (9), component (9), this (9), window (8), api (8), react (7), app (7), site (7), with (6), event (5), add (5), layout (5), how (5), page (5), application (5), are (5), strategy (5), for (5), track (5), data (5), guides (5), rewrite (4), blockers (4), integrate (4), afterinteractive (4), return (4), not (4), function (4), default (4), other (4), use (4), router (4), hosting (4), next_public_rybbit_host (4), https (4), self (4), settings (4), custom (3), serving (3), file (3), client (3), side (3), prestashop (3), them (3), loading (3), when (3), where (3), can (3), title (3), export (3), any (3), from (3), views (3), that (3), server (3), your_site_id (3), src (3), pages (3), env (3), hosted (3), feature (3), import (3), documentation (3), optional (2), bypass (2), install (2), retrieve (2), vite (2), cra (2), analytics (2), methods (2), available (2), consider (2), button (2), handleclick (2), typeof (2), mybutton (2), pageview (2), void (2), string (2), declare (2), components (2), events (2), being (2), need (2), will (2), _app (2), process (2), destination (2), source (2), rewrites (2), value (2), myapp (2), pageprops (2), html (2), body (2), children (2), guide (2), integration (2), users (2), troubleshooting (2), traffic (2), 687 (2), github (2), store, always, ensure, its, before, calling, especially, since, managed, examples, deciding, early, reliably, call, these, functions, click, onclick, warn, console, else, buttontitle, button_click, undefined, const, eventname, eventdata, record, interface, global, typescript, has, interactivity, example, once, loaded, via, within, designed, automatically, detect, route, changes, encounter, rare, scenario, tracked, correctly, after, navigation, might, manually, trigger, however, test, behavior, first, manual, typically, necessary, push, link, view, note, consume, bandwidth, all, requests, proxied, through, evaluating, costs, capacity, requirements, async, configurations, exports, module, config, instance, com, reduce, chance, blocked, while, cookied, based, fully, compliant, gdpr, ccpa, privacy, regulations, some, may, still, agressively, block, matter, implemented, operated, head, lang, rootlayout, create, modify, depending, version, provides, built, handles, efficiently, recommended, approach, navigate, dashboard, obtain, attribute, popular, framework, enables, features, like, rendering, static, generation, explains, open, copy, markdown, definitions, inviting, billing, teams, organization, account, migration, managing, installation, quick, start, embeds, funnels, goals, bot, detection, filter, hiding, own, sdks, proxy, wordpress, woocommerce, wix, webflow, vue, vitepress, thrivecart, svelte, strapi, squarespace, shopify, sanity, remix, gatsby, mintlify, laravel, joomla, jekyll, hugo, google, tag, manager, gitbook, ghost, framer, drupal, docusaurus, contentful, carrd, bubble, bigcommerce, astro, angular, tagging, identify, autocapture, usage, cloud, architecture, comparison, introduction, setup, reference, search,

Text of the page (random words):
next js rybbit search k github rybbit io rybbit 12 4k 687 documentation api reference documentation guides setup and feature documentation github rybbit io rybbit 12 4k 687 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 next js react vite cra gatsby remix 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 next js integration guides react next js integrate rybbit with your next js application for analytics tracking copy markdown open next js is a popular react framework that enables features like server side rendering and static site generation this guide explains how to integrate rybbit with your next js application how to add rybbit to next js retrieve your tracking script navigate to your rybbit dashboard to obtain your site id you ll need this for the data site id attribute install the script using next js script component next js provides a built in script component that handles script loading efficiently this is the recommended approach add to your layout file create or modify your layout file depending on your next js version for app router next js 13 app layout js import script from next script export default function rootlayout children return html lang en head body children script src https app rybbit io api script js data site id your_site_id strategy afterinteractive body html for pages router pages _app js import script from next script function myapp component pageprops return component pageprops script src https app rybbit io api script js data site id your_site_id strategy afterinteractive export default myapp optional 4 rewrite the script serving to bypass ad blockers while rybbit is not using any cookied based tracking and is fully compliant with gdpr ccpa and other privacy regulations some ad blockers may still agressively block it no matter how the tracking is implemented or operated with next js s rewrites feature you can rewrite the script serving to reduce the chance of being blocked by ad blockers env use this value if you are self hosting rybbit next_public_rybbit_host https your hosted rybbit instance com use this value if you are using the rybbit hosted tracking next_public_rybbit_host https app rybbit io next config js module exports other configurations async rewrites return source api script js destination process env next_public_rybbit_host api script js source api track destination process env next_public_rybbit_host api track and where you are using the script app layout js or pages _app js script src api script js data site id your_site_id strategy afterinteractive note that this rewrite will consume the bandwidth of your server as all tracking requests will be proxied through your next js application consider this when evaluating your hosting costs and server capacity requirements page view tracking in next js rybbit s tracking script is designed to automatically detect route changes when using next js s link component or router push and track them as page views if you encounter a rare scenario where page views are not being tracked correctly after client side navigation you might need to manually trigger page views using window rybbit pageview however test the default behavior first as manual tracking is typically not necessary custom event tracking once the rybbit script is loaded via the next js script component you can track custom events from any of your react components within your next js application example in a next js component components mybutton js use client if using app router and this component has interactivity declare rybbit on window for typescript if you re using it declare global interface window rybbit event eventname string eventdata record string any void pageview void add other methods if you use them export default function mybutton title const handleclick if typeof window undefined window rybbit typeof window rybbit event function window rybbit event button_click buttontitle title else console warn rybbit tracking not available return button onclick handleclick title click me button always ensure window rybbit and its methods are available before calling them especially since the script loading is managed by next js s strategy consider the script s loading strategy afterinteractive in the examples when deciding where and how early you can reliably call these tracking functions prestashop integrate rybbit analytics with your prestashop store react vite cra integrate rybbit with your client side react application on this page how to add rybbit to next js retrieve your tracking script install the script using next js script component add to your layout file optional 4 rewrite the script serving to bypass ad blockers custom event tracking