Localhost Tracking
Track analytics during development using API keys
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?
Immediate fix
- Revoke the API key in dashboard
- Deploy without the API key
- Generate new key for development