Install analytics on Framer

It takes about 5 minutes: you add one script in your Framer site settings, publish, and check that events are coming in.

Before you start

1. Your site needs a paid Framer site plan, Basic or higher.
2. You need your HeyCatch project key. It starts with hck_pk_.

1. Find your project key

Your project key starts with hck_pk_. Before your first install is confirmed it sits on the Analytics, Install screen in the sidebar; once an install is confirmed it sits behind the gear icon in the top right of the Product page. Press Copy prompt, paste the text into a note and copy just the key, from hck_pk_ to its last character. If a full stop follows the key, leave it out.

2. Copy this code

Replace YOUR_PROJECT_KEY with your key and keep the quotes:

<script type="module">
  import { analytics } from 'https://esm.sh/@heycatch/sdk@0.8.0';
  analytics.init({
    projectKey: 'YOUR_PROJECT_KEY',
    install: { framework: 'framer', agent: 'other' },
  });
</script>

3. Add it in Framer

1. Open your project in Framer.
2. Open Project Settings and go to the Custom Code tab.
3. Press Add Script and paste the code.
4. Set the placement to the start of the head.
5. Set how often it runs to Once, not Run on every page visit.
6. Save.

4. Publish your site

Press Publish and update your live site. The code runs only on the published site, not in the editor preview.

5. Visit your live site

Open your live site in a normal browser and click through a couple of pages. Visits from bots, scripts and automated browsers are filtered out, so it has to be you, clicking.

6. Check in HeyCatch

Back in HeyCatch, on the screen where you copied the prompt, press "I've installed" within the next half hour. The check only counts events from the last 30 minutes, so do it straight after your visit.

Not seeing events?

1. Did you publish? Saving the script is not enough. Press Publish.
2. Is the key right? It starts with hck_pk_ and sits inside the quotes, with no extra spaces.
3. Did you visit the live site yourself? Not the editor preview, and not a testing tool.
4. Is the script at the start of the head? Not at the end of the body.

Still stuck? Write to us in the chat and we will look at your site.

Short links

Short links are a separate step. Each link needs one redirect rule on your site, from /i to /?utm_campaign=i for each letter you use. Framer has a redirect screen for this. The Short links article explains the rule.