Framer Installation

Framer makes it easy to add Jetrack to your website using the Custom Code feature.

Installation Steps

Step 1: Open Project Settings

Open your Framer project
Click the Settings icon (gear icon) in the top-right corner

Step 2: Navigate to Custom Code

In the left sidebar, click General
Scroll down to find the Custom Code section
Click + Add Script (or the + button if you have existing scripts)

Step 3: Configure the Script

Name: Enter "Jetrack" or a descriptive name
Location: Select headEnd (recommended for analytics)
Paste your tracking script:

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

Run: Select Once (default)
Click Save

Step 4: Publish Your Site

Custom code only appears on your published site, not in the preview.

Click Publish in the top-right
Your tracking script is now live!

Script Placement Options

Framer offers several placement locations:

headStart: Beginning of <head> tag
headEnd: End of <head> tag (recommended for analytics)
bodyStart: Beginning of <body> tag
bodyEnd: End of <body> tag

Recommended: Use headEnd for analytics scripts.

Page-Specific Tracking

To track only specific pages:

In the Custom Code section, select specific pages from the dropdown
The script will only load on those pages

Run on Every Page Visit

For single-page Framer sites with view transitions:

In the script settings, change Run to On Every Page Visit
This ensures tracking on route changes

Using the Embed Component

Alternative method for visual embedding:

Go to Insert menu
Search for Embed
Drag the Embed component onto your canvas
Add your script in the HTML section

Note: Using Custom Code in Settings is the recommended approach.

Framer Sites (formerly FramerX)

These instructions work for both:

Framer (current web-based editor)
Framer Sites (legacy desktop app)

Testing

Publish your Framer site
Visit your live site (not preview)
Open browser Dev Tools (F12)
Check Network tab for script.js
Verify data in your BrandJet dashboard

Troubleshooting

Script Not Loading

Make sure you published your site (custom code doesn't run in preview)
Verify the script location is set to headEnd
Check that your website ID is correct

Custom Code Not Running

Framer sites are SPAs (single-page applications)
Use "Run On Every Page Visit" for tracking all page navigations
Refresh your published site

Changes Not Appearing

Re-publish your Framer site
Clear browser cache
Wait a few minutes for changes to propagate

Framer Motion & Animations

BrandJet tracking works seamlessly with:

Framer Motion animations
Page transitions
Interactive components
All Framer effects

Best Practices

Use clear, descriptive names for your scripts
Place analytics scripts in headEnd
Test on your published site, not in preview
Use environment-specific tracking for staging vs. production

Jetrack