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

  1. Sign in to your Framer account
  2. In Framer, click the Settings cog icon in the top right of the navigation bar
  3. In the left sidebar, under the Site Settings section, click General and scroll down to the Custom Code section
  4. Paste your Fathom Analytics script in the End of <head> tag text box
  5. Click the Save button
  6. 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
  7. 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:

  1. Go to your Framer account and click the Settings cog icon in the top right of the navigation bar
  2. 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
  1. Scroll down to the the Custom Code section
  2. Paste your events code into the End of <body> tag text box
  3. Click the Save button
  4. 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
  5. 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