Bolt Installation

Bolt.new is an AI full-stack development tool by StackBlitz. Use these prompts to add Jetrack instantly!

AI Prompt (Recommended)

Copy and paste this into Bolt's chat:

Add Jetrack to my app. Add this script to the <head> section of index.html:

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

Make sure it loads on all pages.

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

Framework-Specific Prompts

For React/Vite projects (most common):

Add Jetrack to index.html in the <head> section:

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

Place it before the closing </head> tag.

For Next.js projects:

Add Jetrack to the root layout (app/layout.tsx). Use the Next.js Script component:

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

Import Script from 'next/script' and add it to the <head>.

With environment variables:

Add Jetrack with environment variable support:
1. Create .env file with VITE_BRANDJET_WEBSITE_ID=your-unique-id
2. Use import.meta.env.VITE_BRANDJET_WEBSITE_ID in the script
3. Add error handling if the env variable is missing

For Node.js/Express:

Add Jetrack to the main HTML template (views/index.ejs or public/index.html). Add the script tag to the <head> section.

Manual Installation

If Bolt doesn't add it correctly, here's how to do it manually:

React + Vite (Most Common)

Edit index.html in the project root:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    
    <!-- Jetrack -->
    <script
      async
      defer
      data-website-id="your-unique-id"
      src="https://analytics.brandjet.ai/script.js">
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

For Other Frameworks

Next.js: See Next.js guide
React: See React guide
Vue: See Vue guide

Testing

After Bolt adds the script:

Click the preview button in Bolt
Open in a new tab
Press F12 → Network tab
Refresh and look for script.js
Check your BrandJet dashboard

Pro Tips

Verify it's working:

Check if the Jetrack script was added correctly. Show me the exact location in the code where it's placed.

If it's not loading:

The analytics script isn't loading. Debug this:
1. Check if it's in the correct HTML file
2. Verify the syntax is correct
3. Make sure the file is actually being used
4. Show me any errors in the console

For production optimization:

Optimize the Jetrack script for production:
1. Make sure async and defer attributes are present
2. Place it in the <head> for early loading
3. Verify it doesn't block other resources

Troubleshooting

AI Not Adding Script

Try a more specific prompt:

I need to add analytics tracking. Open index.html, find the <head> section, and add this exact script before the closing </head> tag:

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

Show me the updated code after you've added it.

Script in Wrong File

Move the Jetrack script from [current location] to the <head> section of index.html. Make sure it's before any other scripts.

Not Tracking All Pages

The analytics script should load on every page. Make sure it's in the main index.html or root layout file, not in individual page components.

StackBlitz Deployment

Works automatically on:

StackBlitz preview URLs
Deployed production sites
Custom domains

No additional setup needed after adding the script!

Bolt + Supabase/Firebase

If using backends with Bolt:

Analytics works alongside any backend
No conflicts with auth or database
Tracks frontend page views only

Framework Guides

For detailed manual instructions:

Jetrack