V0 (Vercel) Installation

V0 by Vercel is an AI design-to-code tool. Use these prompts to add Jetrack to your generated apps!

AI Prompt (Recommended)

Copy and paste this into V0's chat:

Add Jetrack to my Next.js app. In the root layout file (app/layout.tsx), import the Script component from 'next/script' and add this tracking script:

<Script
  src="https://analytics.brandjet.ai/script.js"
  data-website-id="your-unique-id"
  strategy="afterInteractive"
/>

Place it in the <head> section of the layout.

Replace your-unique-id with your BrandJet website ID.

Alternative Prompts

With environment variables:

Add Jetrack with environment variable:
1. Add NEXT_PUBLIC_BRANDJET_WEBSITE_ID to .env.local
2. Use it in the Script component's data-website-id attribute
3. Add it to the root layout (app/layout.tsx)

For React components (non-Next.js):

Add Jetrack to my React app. Add this script tag to the index.html file in the <head> section:

<script
  async
  defer
  data-website-id="your-unique-id"
  src="https://analytics.brandjet.ai/script.js">
</script>

TypeScript-safe version:

Add Jetrack with TypeScript support. Use the Next.js Script component with proper typing and load it with afterInteractive strategy.

Manual Installation

If you prefer to add it manually after generation:

Next.js (Most Common)

Edit app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://analytics.brandjet.ai/script.js"
          data-website-id="your-unique-id"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

See the Next.js installation guide for more details.

React (Vite)

Add to public/index.html or see the React installation guide.

Testing

After V0 adds the script:

Deploy to Vercel or run locally (npm run dev)
Open your site
Press F12 → Network tab
Look for script.js from analytics.brandjet.ai
Check your BrandJet dashboard

Pro Tips

Verify installation:

Show me where the Jetrack script is in the code. Is it in the correct file?

If not working:

The analytics script isn't loading. Check if it's properly added to the root layout with the Next.js Script component.

For production:

Make sure the Jetrack script only uses the production environment variable and loads with the afterInteractive strategy for optimal performance.

Troubleshooting

Script Not Loading

Try this prompt:

Fix the Jetrack installation:
1. Ensure Script component is imported from 'next/script'
2. Verify data-website-id attribute is set
3. Check that strategy is "afterInteractive"
4. Make sure it's in the root layout

TypeScript Errors

Fix any TypeScript errors related to the analytics script. Make sure the Script component and data-website-id attribute are properly typed.

V0 + Shadcn UI

BrandJet works perfectly with all Shadcn UI components. The tracking script won't interfere with any styling or components.

Vercel Deployment

When deploying to Vercel:

The script is included automatically in your build
Works on preview and production deployments
No additional configuration needed

Jetrack