Nuxt.js
This guide explains how to integrate Rybbit with your Nuxt.js application for analytics tracking. Nuxt.js provides a structured way to add external scripts via its configuration.
Adding Rybbit via Nuxt.js Configuration
This is the recommended method for Nuxt.js applications.
1. Retrieve Your Site ID
Navigate to your Rybbit dashboard to obtain your Site ID. You’ll need this for the data-site-id attribute in the script configuration.
2. Modify nuxt.config.ts (or .js)
For Nuxt 3:
Add the Rybbit script to the app.head.script array in your nuxt.config.ts file:
export default defineNuxtConfig({
// ... other configurations
app: {
head: {
script: [
{
src: 'https://app.rybbit.io/api/script.js',
async: true,
defer: true,
'data-site-id': 'YOUR_SITE_ID', // Replace with your Site ID
},
],
},
},
})For Nuxt 2:
Add the Rybbit script to the head.script array in your nuxt.config.js file:
export default {
// ... other configurations
head: {
// ... other head properties
script: [
{
src: 'https://app.rybbit.io/api/script.js',
async: true,
defer: true,
'data-site-id': 'YOUR_SITE_ID', // Replace with your Site ID
},
],
},
}Ensure you replace YOUR_SITE_ID with your actual Site ID from your Rybbit dashboard. This method ensures the script is included in the <head> of all your pages.
3. Verify Installation
After restarting your Nuxt.js development server or 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 Nuxt.js applications and track them as page views. If you find that page views are not being tracked correctly after navigation (which is uncommon for Nuxt), you might need to manually trigger page views using window.rybbit.trackPageview() after each route change. You could use Nuxt’s router events or middleware for this if necessary, but test the default behavior first.
Custom Event Tracking
From any Vue component within your Nuxt.js application, you can track custom events:
<template>
<button @click="trackCustomEvent">Track Important Action</button>
</template>
<script setup>
function trackCustomEvent() {
if (process.client && window.rybbit) { // Ensure running on client and rybbit exists
window.rybbit.trackEvent('nuxt_interaction', { detail: 'User clicked important button' });
}
}
</script>Using process.client (Nuxt 2) or checking typeof window !== 'undefined' (Nuxt 3, or generally) is good practice before accessing window if your component might render or execute logic on the server side.
