How can I continue tracking events in Webflow after Google introduced the new gtag.js and event tracking stopped working?

TL;DR
  • Update to gtag.js by replacing the existing Google Analytics script in Webflow's Custom Code section.
  • Define events using gtag.js syntax and implement in Webflow elements.
  • Publish website and verify event tracking using Google Analytics tools.

Google introduced gtag.js for a streamlined event tracking process, which has caused some tracking issues in Webflow. Here’s how to address it:

​

1. Understand gtag.js Requirements

  • gtag.js is the latest Google Analytics tracking code needed for setting up event tracking on your website.
  • This requires migrating from the older analytics.js or universal analytics setup to gtag.js.

​

2. Update Your Google Analytics Script in Webflow

  • Go to Project Settings in your Webflow dashboard.
  • Navigate to the Custom Code tab.
  • Replace the current Google Analytics script with the gtag.js script provided by Google. Ensure it's placed in the Head Code section.

​

3. Define Events in gtag.js

  • Use the gtag('event', [event name], { [event parameters]}) format for event tracking.
  • Example: to track a button click, use gtag('event', 'buttonclick', {'buttonid': 'signup_button'}).

​

4. Implement Event Tracking in Webflow

  • Open the Designer and select the element you want to track (e.g., a button).
  • Add an OnClick interaction with Custom Code.
  • Use the defined event format from Step 3.

​

5. Test Your Event Tracking

  • Publish Your Website to make the changes live.
  • Use Google Tag Assistant or Real-Time Events in Google Analytics to verify that events are being tracked.

​

6. Ensure Correct Event Tags

  • Double-check that all event names and parameters used in your code are correctly spelled and formatted.

​

Summary

Switch to gtag.js in Webflow by updating your analytics script in the Custom Code section of Project Settings. Define and implement specific event tracking manually using gtag.js syntax, and verify functionality via Google Analytics tools.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How do I host a main domain and add a second domain as a sub-domain in Webflow for a website that features multiple products?
How can I create a responsive grid in Webflow, where a 3x3 grid of images on desktop becomes a 2x2 grid on tablet and a 1x1 grid on mobile?
How can I improve the loading speed of web pages with multiple YouTube videos on Webflow?
How can I create pagination for a list of 2000 items in Webflow?
How can I import a .csv file with multi-reference fields (category and department) into Webflow and map them to the appropriate collection items?
What are the reasons for the error messages "Your upload failed because of a filename error" and "There was a problem creating a new asset manager folder" in Webflow when uploading pictures into a predesigned template or creating a folder for uploads?
How can I set the default starting slide to slide 2 in a Webflow slider without sharing the read-only link?
How can an Alt tag be added to an image in Webflow after uploading it?
How can I fix the erratic behavior of my Lightbox Gallery grid on my Webflow webpage?
How can I change the text on a button to display a phone number on hover in Webflow without using images?
How can I prevent the body from scrolling when the mobile menu overlay is active in Webflow?
How can I properly load a script in Webflow after the page has been fully loaded, specifically for a popup created with Calendly?
How can I get CSS blend modes to work on a background video element in Webflow? Is it possible to remove the black background in the video and show only the smoke over the image? Also, why won't the video autoplay on an iPhone running iOS 10.2?
What could be causing glitches in the Designer and live site of a specific Webflow project, specifically when using the CMS section, while other projects in the same account are not affected?
How can I make fonts render consistently in Webflow preview and browser compared to my design in Figma/Sketch using custom CSS code?
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?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?