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:
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, clickGeneral
and scroll down to theCustom 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
- 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