Localhost Tracking
By default, Rybbit validates tracking events come from your registered domain. During development, you can use API keys to track from localhost.
⚠️
Important: Remember to remove the API key before deploying to production!
Localhost Tracking
Generate API Key
In your site dashboard: Settings → API Key tab → Generate API Key
Add to Script
<script
defer
src="https://app.rybbit.io/api/script.js"
data-site-id="YOUR_SITE_ID"
data-api-key="rb_your_api_key_here">
</script>Remove for Production
🚫
Remove the data-api-key attribute before deploying!
<!-- Production: NO API KEY -->
<script
defer
src="https://app.rybbit.io/api/script.js"
data-site-id="YOUR_SITE_ID">
</script>Best Practice: Environment Variables
Use conditional loading to automatically handle development vs production:
// Next.js example
export function Analytics() {
const isDev = process.env.NODE_ENV === 'development';
return (
<script
defer
src="https://app.rybbit.io/api/script.js"
data-site-id={process.env.NEXT_PUBLIC_RYBBIT_SITE_ID}
{...(isDev && { 'data-api-key': process.env.NEXT_PUBLIC_RYBBIT_API_KEY })}
/>
);
}// Vanilla JS example
const script = document.createElement('script');
script.defer = true;
script.src = 'https://app.rybbit.io/api/script.js';
script.setAttribute('data-site-id', 'YOUR_SITE_ID');
// Only add API key in development
if (process.env.NODE_ENV === 'development') {
script.setAttribute('data-api-key', process.env.RYBBIT_API_KEY);
}
document.head.appendChild(script);Troubleshooting
Events not tracking?
- Verify API key starts with
rb_and is 35 characters - Check browser console for errors
- Confirm API key hasn’t been revoked
Accidentally deployed with API key?
Last updated on