Webflow sync, pageviews & more.
NEW

Can Webflow be used to enable GA4 tracking of YouTube videos via GTM without reloading the videos and inserting tracking support elements?

TL;DR
  • Add GTM to Webflow via Project Settings and publish the site.
  • Manually embed YouTube videos with ?enablejsapi=1 in the URL to enable JS tracking.
  • Create a YouTube Video trigger in GTM and select desired video interactions to track.
  • Set up corresponding GA4 Event tags in GTM and link them to the YouTube trigger.
  • Publish the GTM container and use Preview mode to test the video tracking.

Yes, you can track YouTube video interactions in Webflow with GA4 via Google Tag Manager (GTM), and it can be done without reloading videos or inserting visible tracking elements—by using GTM’s built-in YouTube Video trigger and custom tags.

Here’s how to implement it smoothly in Webflow:

1. Add GTM to Your Webflow Site

  • Go to Project Settings > Custom Code
  • In the Head Code area, paste the standard GTM container code (from your GTM account).
  • Publish your site for changes to take effect.

2. Use YouTube Embed That Supports JS API

  • Webflow’s native video element doesn’t enable JavaScript access for GTM’s YouTube trigger (which requires enablejsapi=1).
  • Instead, embed YouTube videos manually using Embed elements, and include ?enablejsapi=1 in the video URL.
  • Example: https://www.youtube.com/embed/YOUR_VIDEO_ID?enablejsapi=1
  • This allows GTM to interact with the player via the YouTube IFrame Player API.

3. Configure GTM’s YouTube Video Trigger

  • In GTM, Create a New Trigger:
  • Type: YouTube Video
  • Choose All Videos or set conditions (e.g., specific video IDs).
  • Select what you want to track: Start, Pause, Percent Watched, etc.

4. Set Up a GA4 Event Tag in GTM

  • Create a GA4 Event tag:
  • Set the Configuration Tag to your GA4 Measurement ID.
  • Enter your desired Event Name (e.g., video_start, video_progress).
  • Use auto-event variables (e.g., {{Video Percent}}, {{Video Title}}) as Event Parameters.
  • Link the tag to the YouTube Video Trigger.

5. Publish Your GTM Container

  • After configuring the tag and trigger, Publish the GTM container.
  • Use Preview/Debug mode to confirm events are firing when interacting with your video.

Summary

You can track YouTube video actions on a Webflow site with GA4 via GTM without reloading videos or adding external tracking UI—as long as you embed the videos using the iframe with ?enablejsapi=1, not the default Webflow Video element. Then configure tracking in GTM using the built-in YouTube Video trigger and GA4 event tags.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I build a real masonry layout (Pinterest layout) using Webflow and pure CSS without falling for the ineffective CSS columns hacks?
Can I publish my edited version of a Webflow template to my website without any additional fees if I already have a web domain and hosting? Will I encounter any issues with the single-use license if I export the edited version to HTML/CSS/Javascript code to add backend features and update future versions of my website?
How can I install a countdown timer widget on my Webflow site?
How can I make both the category and subcategory links have an active status on the catalog page in Webflow's CMS collections?
What is the simplest method to separate the scrolling action of a section and its content in Webflow for the purpose of creating a two-level scrolling system, where users can navigate between sections and scroll within them?
How do I properly paste my Universal Tracking ID in Webflow for analytics?
How can I display a div that will only be visible to Internet Explorer users, including IE 11, on my Webflow site? The purpose of this div is to display a message saying "For the best experience, please open using Chrome, Firefox, or Safari. Thanks!"
How can I recreate a webpage layout in Webflow that includes a 3 x 3 grid of images with the original aspect ratio, along with a column on the right containing links and contact information?
How can I fix the issue with the multi-select dropdown not working when selecting multiple options in Webflow after integrating Memberstack?
How can I create a Webflow button with a white stroke that fills left to right with color upon hover using timed actions or transition easing?
How can I round the corners of a link block in Webflow in a way that also rounds the corners of the image inside it?
Can webpages be transferred from Wix to Webflow during website migration?
How can I combine (formerly FoxyCart) with Webflow Collections to test the flexibility and implementation of different types of products, variants, and add-ons in a store, while utilizing CMS custom fields for images, categories, pricing, cart, and product info?
Is it possible to link a Webflow CMS collection list to another CMS collection?
What is your process for hosting client websites outside of Webflow to increase revenue and make your agency more profitable, especially for non-CMS websites? Can you please provide information on where you host it, the disadvantages of doing this, and any other considerations to keep in mind? Additionally, if you recommend using another CMS for external hosting, what CMS would you suggest for someone who has only worked with Webflow?
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!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?