← Back to Docs

Framer Setup Recipe

Integrate the tracking pixel into your Framer site settings to track landing page visitors.

Who This Is For

This guide is for startups, founders, and designers who build their marketing websites or landing pages on Framer, and want campaign attribution set up in minutes.

Key Terms Defined:

  • Start of <head> — a settings text field in Framer that inserts custom HTML scripts at the top of your page before it renders in the browser.
  • Single Page Application (SPA) — a modern website structure (used by Framer) that changes pages instantly without full browser reloads.

What You Will Set Up

You will add our pixel script code into the custom code head configuration of your Framer project settings and publish it to launch automatic pageview and referrer tracking.

Steps: Framer Integration

  1. Log in to your Framer Dashboard and open your target project.
  2. Click the gear icon in the top toolbar to open Project Settings.
  3. Go to the Custom Code section on the left sidebar.
  4. Locate the Start of <head> field.
  5. Paste the tracking code snippet into the box:
    <script async src="https://api.srctk.com/tracker.min.js" data-site-key="YOUR_SITE_KEY"></script>
  6. Click Save.
  7. Click Publish in the top right to deploy the code to your live domain.

How to Verify It Worked

  1. Visit your live published Framer website.
  2. Open Developer Tools (right-click → Inspect), click Network, and filter by track.
  3. Refresh the page. Verify a call to POST /api/track completes successfully.
  4. Since Framer runs as a Single Page Application (SPA), click a navigation link. You should see another network call to POST /api/track trigger instantly without a full page reload.
  5. Verify visits are recorded in real-time under the Event Debugger in your SourceTrack dashboard.

Common Mistakes

  • Failing to Publish: Code changes inside Framer Settings do not take effect until you click Publish.
  • Pasting into Page-Specific Code instead of Project Settings: Ensure the script is placed inside the global Project Settings → Custom Code area so it tracks across all pages.

Next Step

Now that basic pageview tracking is active, configure your conversion triggers for leads or signups by following ourBrowser Conversions guide.