Install analytics on Webflow
It takes about 5 minutes: you paste one piece of code into your Webflow site settings, publish, and check that events are coming in.
Before you start
- Your site needs a paid Webflow site plan, Basic or higher. Custom code is not available on the free plan.
- 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',
requestBatching: false,
install: { framework: 'webflow', agent: 'other' },
});
</script>
Keep requestBatching: false. Webflow sites load a new page on every click, and without that line visits from iPhones get lost.
3. Paste it into Webflow
- Open your project in Webflow.
- Go to Site settings, then Custom code.
- Paste the code into Head code.
- Press Save changes.
4. Publish your site
Press Publish and publish to your live domain. The code runs only on the published site, not in the Designer preview, so nothing shows up until you publish.
5. Visit your live site
Open your live site in a normal browser and click around for a few seconds. 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?
- Did you publish? Saving in site settings is not enough. Press Publish.
- Is the key right? It starts with hck_pk_ and sits inside the quotes, with no extra spaces.
- Did you visit the live site yourself? Not the Designer preview, and not a testing tool.
- Is the code in Head code? Not in a page's settings and not in the footer section.
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. Webflow has redirect settings for this. The Short links article explains the rule.