Support home / Integrations

Framer

Adding the Fathom Analytics script to your Framer website is a quick and easy process. Here's how to set up your Framer site to work with our analytics:

Setting up the script

Framer websites are built as Single Page Applications (SPAs). That means, instead of fully reloading the page every time someone navigates to another page, the website dynamically updates the content while keeping the page open in the background.

So even though it looks like you're going from "Home" to "About", technically the browser doesn't load a brand new page. It just swaps out the content on the same page.

To handle this type of page change, you need to enable SPA mode on your Fathom script. Here's how to do that:

Step 1: Enabling SPA mode on your script

Copy your Fathom Analytics script from your site settings
Add data-spa="auto" to your script, like this:

Note: If you're copying the below example script, make sure to replace the dummy Site ID with your own Site ID. It can be found in your site settings.

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" data-spa="auto" defer></script>

Step 2: Adding the Fathom script to your Framer site

Sign in to your Framer account
In Framer, click the Settings cog icon in the top right of the navigation bar
In the left sidebar, under the Site Settings section, click General and scroll down to the Custom Code section
Paste your Fathom Analytics script in the End of <head> tag text box
Click the Save button
If your site is already published, go back to your project and click the Publish button in the top right corner to publish your latest changes. If your site isn't published yet, you can skip this step
This will add your Fathom Analytics script to all pages. To check if the script is working, head over to your site and then check your Fathom dashboard to see if your visit was recorded

Adding events code

If you would like to capture specific events that happen on a page, such as form submissions, button clicks, etc., you can do that using our events feature (check out our events guide for code examples). Here's how to add your Fathom Analytics events code to your Framer site:

Go to your Framer account and click the Settings cog icon in the top right of the navigation bar
In the left sidebar, under the Page Settings section, click the page to which you want to add the events code

Note: If you want the events code to run on all pages, select "General" under the "Site Settings" section instead

Scroll down to the the Custom Code section
Paste your events code into the End of <body> tag text box
Click the Save button
If your site is already published, go back to your project and click the Publish button in the top right corner to publish your latest changes. If your site isn't published yet, you can skip this step
To check if your events code is working as expected, navigate to the page you've added your events code to and trigger the event. Afterward, check your Fathom dashboard to see if the event completion was recorded