Google Analytics Glossary

Add Google Analytics to Framer

Image of Iron Brands

Published on Nov 23, 2023 and edited on Apr 7, 2024 by Iron Brands

Incorporating Google Analytics into your Framer website can provide you with lots of insight to understand engagement and traffic, and ultimately improve your site's performance. Here's a step-by-step guide to integrating Google Analytics with Framer.

Let's dive in!

  1. Step-by-step integration
    1. Set up a Google Analytics property
    2. Access Framer Project
    3. Edit custom code
    4. Update Your Site
    5. Verify the Integration
    6. (Optional) Create New Properties
  2. Final Thoughts
Logo of the Government of the United KingdomThe UK Government chose Simple AnalyticsJoin them

Before we dig in I want to show you something. I promise it's worth it...

Google Analytics is great, but also complex and a bit clunky. If you just want a straightforward dashboard with the insights you need, GA is not a great place to start. Additionally, Google doesn't care about privacy and GA requires an annoying cookie banner.

That's why I built Simple Analytics, a privacy-friendly and simple analytics tool - no personal data, no cookies, just the insights you need in a straightforward dashboard.

Here is how it looks vs GA. Feel free to check our live analytics to get an idea for your project. (It is free btw)

All right, enough about us. Now let's get into answering your question!

Can you spot the difference between the dashboards?

Step-by-step integration

Set up a Google Analytics property

  • Log into your GA account (or create one, if you haven't already).
  • Create a GA property for your website
  • Inspect your property and note its Measurement ID. You will need this ID later.

Access Framer Project

Log into your Framer account and open the project you wish to integrate with Google Analytics.

Edit custom code

Access the custom code section and, insert the GA4 tracking script. The standard GA tracking code looks like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Make sure to replace G-XXXXXXXXXX with your actual Measurement ID!

Update Your Site

After adding the tracking code, save your changes and publish your website project so the changes take effect.

Verify the Integration

To check if Google Analytics is successfully integrated, visit your live Framer site and then review the real-time reports in Google Analytics. If your visit is recorded, the setup is working correctly.

(Optional) Create New Properties

To track multiple apps, create more GA properties and use the corresponding Measurement IDs. This prevents GA from conflating the data.

Final Thoughts

Adding Google Analytics to your website can give you great insights. However, ask yourself: is Google Analytics the right tool for you?

GA is an overpowered solution for straightforward analytics. If you're looking for a simple and intuitive dashboard with the insights you need, there are better alternatives. Yes, I’m talking about my own product (Simple Analytics), but there are others out there as well.

I hated using Google Analytics for my projects. It's clunky, there are hundreds of dashboards and it doesn't look appealing. Also Google doesn't care about privacy or ethics. That's why I decided to build my own and more intuitive web analytics tool.

If this resonates with you, feel free to give Simple Analytics a spin. You just need to add the script to your website and off you go. This takes about one minute- and there is a free version as well!

Enjoy!

GA4 is complex. Try Simple Analytics

GA4 is like sitting in an airplane cockpit without a pilot license

Start 14-day trial