How to Track Button Clicks and Form Submissions in Framer with Google Analytics 4
9/5/25
Articles
Introduction
When building a modern website, beautiful design and smooth animations are only part of the equation. What truly determines success is whether your visitors take action—whether that’s clicking a button, submitting a form, downloading a file, or requesting a quote.
These interactions are called conversions, and tracking them is essential for measuring the ROI of your marketing campaigns, understanding user behavior, and optimizing your website for growth.
If your website is built on Framer, you may wonder: how can I implement conversion tracking with Google Analytics 4 (GA4)? Since Framer is not a traditional CMS and doesn’t expose raw HTML in the same way, you need to take a slightly different approach.
In this article, we’ll explore why conversion tracking matters, explain how GA4 event tracking works, and give you a step-by-step tutorial on implementing button click and form submission tracking in Framer. By the end, you’ll have a clear roadmap for turning your design-driven site into a conversion-optimized powerhouse.
Why Conversion Tracking Matters
Without tracking user interactions, you’re essentially flying blind. Here’s what happens if you don’t measure button clicks or form submissions:
You don’t know which calls-to-action (CTAs) are actually performing.
Marketing campaigns can’t be optimized, since you don’t know what drives results.
Decisions are based on “gut feeling” rather than hard data.
You miss opportunities to improve UX and reduce friction in the sales funnel.
For example, imagine you’re running ads to a landing page that features a big “Get Started” button. If you can’t track how many people actually click it, you can’t calculate your conversion rate or test alternative designs.
Conversion tracking answers questions like:
Which buttons are my visitors clicking most often?
How many people start filling out forms but don’t submit?
Are visitors downloading my lead magnets?
Which traffic sources lead to the highest-quality leads?
With this knowledge, you can double down on what’s working and fix what isn’t.
Why Google Analytics 4 (GA4) is the Right Tool
Google Analytics 4 (GA4) is the latest version of Google’s analytics platform. Unlike the old Universal Analytics, GA4 is event-based, meaning everything a user does—clicking, scrolling, submitting a form—is treated as an event.
This makes GA4 ideal for tracking micro-interactions on modern websites. Here’s why it matters for Framer users:
Event flexibility: You can define custom events like
button_clickorform_submit.Cross-platform tracking: Works seamlessly across websites and apps.
Automatic tracking: GA4 already tracks page views, scrolls, and outbound clicks.
Custom reporting: Create reports showing which CTAs perform best.
Integration with Google Ads: Use conversion data to optimize campaigns automatically.
In other words, GA4 is built for the type of granular, action-driven tracking you need on a Framer site.
How Event Tracking Works in GA4
At its core, GA4 tracks events. An event has a name (e.g., generate_lead) and optional parameters (e.g., button_text: "Get Started").
Here’s the basic syntax for sending a custom event:
gtag("event", "button_click", {
button_name: "Get Started",
page_location: window.location.href
});
When this code runs, GA4 records an event called button_click along with details about which button was clicked and on which page.
Later, in the GA4 interface, you can mark certain events as conversions (e.g., a form submission).
Challenges of Tracking in Framer
Framer is a design-focused platform. Unlike WordPress or Webflow, you don’t always have direct access to HTML elements where you could just paste inline JavaScript.
Instead, Framer offers:
Custom Code injection (site-wide scripts like the GA4 tracking code).
Code Overrides (React/JavaScript functions you can attach to elements like buttons and forms).
This means your best approach is:
Add the GA4 tracking script globally.
Create Code Overrides that send
gtag()events when users interact with buttons or forms.
Step-by-Step Tutorial: Tracking Button Clicks and Form Submissions in Framer
Step 1. Add the GA4 Global Site Tag
First, get your GA4 Measurement ID (it looks like G-XXXXXXXXXX) from your Google Analytics property.
Then, in Framer:
Go to Settings → Code → Custom Code.
Paste this code in the
<head>section:
<!-- Google tag (gtag.js) -->
<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>
This installs GA4 across your entire site.
Step 2. Create a Code Overrides File in Framer
In your Framer project:
Go to Code → New File.
Name it
overrides.tsx.Add this import at the top:
import { Override } from "framer";
Step 3. Track Button Clicks
Let’s say you have a button labeled “Get Started.” You want to fire an event every time someone clicks it.
In your overrides file:
export function TrackGetStartedClick(): Override {
return {
onClick: () => {
gtag("event", "button_click", {
button_name: "Get Started",
page_location: window.location.href
});
}
}
}
Now, in Framer’s UI, select your button, go to Overrides, and attach TrackGetStartedClick.
Step 4. Track Multiple Buttons Separately
If you have multiple CTAs (e.g., “Download PDF,” “Request Demo”), create unique overrides for each:
export function TrackDownloadPDF(): Override {
return {
onClick: () => {
gtag("event", "button_click", {
button_name: "Download PDF",
page_location: window.location.href
});
}
}
}
export function TrackRequestDemo(): Override {
return {
onClick: () => {
gtag("event", "button_click", {
button_name: "Request Demo",
page_location: window.location.href
});
}
}
}
This way, GA4 will show separate events for each button, helping you measure which is most effective.
Step 5. Track Form Submissions
For forms, you’ll want to track successful submissions. In Framer, you can attach an override to the form’s onSubmitevent:
export function TrackContactForm(): Override {
return {
onSubmit: () => {
gtag("event", "form_submit", {
form_name: "Contact Us",
page_location: window.location.href
});
}
}
}
Now every time a visitor submits the contact form, GA4 will log a form_submit event.
Step 6. Mark Events as Conversions in GA4
By default, all events are just “data.” To make them count as conversions:
Go to Admin → Events in GA4.
Find your custom event (e.g.,
form_submit).Toggle “Mark as conversion.”
Now, Google Analytics will treat that event as a conversion, which you can use in reports and ad campaigns.
Best Practices for Testing & Debugging
Use GA4 DebugView:
Open your site in Chrome with the Google Analytics Debugger extension.
Go to Admin → DebugView in GA4.
Interact with your site and confirm events are firing.
Name events consistently:
Use lowercase, underscores instead of spaces.
Example:
form_submit,button_click,file_download.
Add parameters:
Capture extra details like button text, form type, or page URL.
This makes reporting more powerful later.
Test across devices:
Mobile and desktop may behave differently.
Check for duplicates:
Avoid firing the same event twice (e.g., once on
onClickand again ononSubmit).
Common Mistakes to Avoid
Forgetting to publish the project after adding overrides.
Using different event names for the same action (
formSubmit,form_submit,form-submission→ leads to messy data).Not marking key events as conversions in GA4.
Testing in Incognito without the Debugger enabled.
Tracking button clicks on dummy elements (make sure the button actually exists on the live site).
Advanced Tips for Power Users
Track outbound links: You can add an override that fires an event when a user clicks an external link.
Track file downloads: If you have PDFs or technical docs, fire a
file_downloadevent.Track scroll depth: GA4 automatically tracks some scrolling, but you can create custom events for specific sections.
Link GA4 with Google Ads: Use conversion data to let Google optimize your ad spend.
Use Google Tag Manager (GTM): For larger projects, GTM can make tracking easier without editing code each time.
Conclusion
Conversion tracking isn’t just a technical detail—it’s the lifeline of any digital marketing strategy. Without it, you’re guessing about your audience’s behavior and risking wasted ad spend.
With Google Analytics 4 and Framer’s Code Overrides, you can implement precise event tracking for buttons, forms, downloads, and more. The process may feel technical at first, but once you set it up, you’ll have invaluable insights into what drives action on your site.
The result? Smarter campaigns, higher ROI, and a website that’s not just beautiful—but effective.
Still need help? Contact us for help with setting up Google Analytics and SEO by filling.
