Webflow sync, pageviews & more.
NEW

How do I track button clicks on my website using Google Analytics and Webflow?

TL;DR
  • Add Google Tag Manager to your Webflow site via the project’s custom code settings.
  • In GTM, create a click trigger targeting your button and a GA4 event tag with desired parameters.
  • Test with GTM’s preview mode, then publish changes and verify events in GA4’s Realtime report.

To track button clicks on your Webflow site with Google Analytics, you’ll use Google Tag Manager along with tags and triggers configured for click events.

1. Install Google Tag Manager in Webflow

  • Create a Google Tag Manager (GTM) account at tagmanager.google.com.
  • Copy the GTM container ID (e.g., GTM-XXXXX).
  • In Webflow, go to Project Settings > Custom Code > Head and paste the GTM <head> code snippet.
  • Then, under “Before tag”, paste the GTM <body> snippet.
  • Publish your site to apply the changes.

2. Set Up Click Trigger in Google Tag Manager

  • In GTM, go to Triggers and click New.
  • Choose Trigger Type → Just Links or All Elements (depending on whether the button is a link or a div/button).
  • Select “Some Clicks” and define conditions like:
  • Click Classes contains "btn-primary", or
  • Click Text equals "Sign Up".
  • Give the trigger a name (e.g., "Sign Up Button Click") and save.

3. Create a Google Analytics Event Tag

  • Go to Tags, then click New.
  • Choose Tag Type → Google Analytics: GA4 Event.
  • Select your GA4 Configuration tag or enter your Measurement ID.
  • Define the event name, e.g., button_click, and optional parameters:
  • event_category: "Button"
  • event_label: "Sign Up Button"
  • Under Triggering, add the click trigger you created in Step 2.

4. Preview and Test in GTM

  • Click Preview in GTM and enter your site’s URL.
  • Click the button on your site to test.
  • In the Tag Assistant Preview, confirm that the event tag fires when the button is clicked.

5. Publish Your GTM Changes

  • Once verified, return to GTM and click Submit → Publish to make the changes live.

6. Verify in Google Analytics

  • Go to GA4 > Reports > Realtime to confirm that the event is tracked live when someone clicks the button.

Summary

To track button clicks in Webflow using Google Analytics, embed Google Tag Manager in your site, then use click-based triggers and GA4 event tags in GTM to send click data to Analytics. This method provides flexibility and doesn’t require custom code on each button.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is it possible to add and edit the style of an element from CMS content in Webflow, such as aligning headers differently on blog posts compared to other pages?
How can I create an 8-step calc form like the one showcased on valority.com using Webflow?
How can I prevent my Webflow website from moving on mobile from left to right and appearing incorrectly spaced? Thank you for any thoughts or suggestions!
Can Webflow allow for custom redirect URLs for each contact form in CMS templates to create separate thank-you pages for landing pages?
Does Webflow support YouTube Shorts for the Video Link in the CMS, as it is not working for me?
How can I put text over an image in Webflow? I adjusted the z-index of the text, but it still remains above the image. Is there another step I should take to achieve this?
How can I resolve the Google reCaptcha error on my Webflow form? I have tried adding both the Site and Secret keys, enabling validation, and even using different Google accounts, but the issue persists. Has anyone else experienced this and found a solution? Thank you.
How can I fix the issue of my Webflow site not scrolling on mobile?
How can I design a responsive heading with a link in Webflow without the link formatting becoming incorrect when using flex text? I've tried adjusting font size and adding spans to move certain elements to the next line, but the results are inconsistent. What am I missing?
What could be causing the spacing issue below images in the Webflow CMS collection display? The spacing only appears on a few images, not all of them, and I'm unable to determine the source of this issue. I've noticed a similar problem on another page with a similar design that also uses CMS collections. Any insights would be appreciated.
Why are background videos not playing on the desktop version of my Webflow website, even though they work when toggling the preview?
How can I change the font size of H4 elements in the Rich Text element on Webflow only for mobile screen sizes?
Can you integrate Webflow and Shopify to create a seamless ecommerce experience? Can you use third-party tools like Zapier to sync orders between Webflow and Shopify?
Can combo classes be applied to CMS collections or is there another solution to applying the card stack effect in Webflow?
Can Webflow be used to clip an image using an SVG clipping mask without custom coding?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?