Install analytics on Bubble

It takes about 5 minutes: you paste one piece of code into your app's settings, deploy, and check that events are coming in.

Before you start

1. Your app needs a paid Bubble plan, Starter or higher. The free plan has no live version, and the code reaches your users only on the live version.
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',
    requestBatching: false,
    install: { framework: 'bubble', agent: 'other' },
  });
</script>

3. Paste it into Bubble

1. Open your app in the Bubble editor.
2. Go to Settings, then SEO / metatags.
3. Paste the code into Script/meta tags in header.

Bubble saves this automatically.

4. Deploy to live

Deploy your app to Live. Changes in the editor go to the development version first, and your real users are on the live version.

5. Visit your live app

Open your live app 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?

1. Did you deploy to live? The development version is not what your users see.
2. Is the key right? It starts with hck_pk_ and sits inside the quotes, with no extra spaces.
3. Is it in the header box? Not in an HTML element on one page.
4. Did you visit the live app yourself? Not a testing tool.

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

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. The Short links article explains the rule.