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 improve my page speed in Webflow, specifically regarding render-blocking resources and unused JS? My site's mobile speed is slow due to Webflow sending one large JS file instead of splitting it into smaller packages.
Can I integrate Hubspot to a Webflow form and still have a redirect to a thank you page after submitting the form?
Can a Vue.js application be inserted within the custom code block on a Webflow page? Has anyone successfully done this yet?
How can I prevent 404 errors in Google Search Console for CMS Collection Pages in Webflow that only contain a photo, name, and external links, without creating a layout or using redirects?
Can Yoast be used as an SEO plugin on Webflow like it can be on Wordpress?
How can I add user input to the end of the redirect URL in Webflow?
Is there a way to add an automatic "click to download" option for resumes in Webflow, or do I need to send people to my Dropbox via a link?
Can a Webflow website be used to create a full ecommerce site with user registration and support for multiple vendors, similar to Amazon? What are the next steps for exporting code if needed?
Is it possible to trigger different hover effects on each child element when hovering over a parent element in Webflow or CSS?
What is happening with Webflow? Has it lost its magic and stability over the years?
How can I add confetti to my Webflow site using CodePen and CSS?
Can I make at least one checkbox in a group required in Webflow? If users don't select at least one checkbox, can I show an error message?
Can Webflow allow the use of a URL as an image? I imported an image URL as text via a CSV but couldn't figure out how to display it as an image. Is there a solution for this?
What are the required fields and completion URL in Webflow for enabling Google Analytics e-commerce sales tracking with Tag Manager?
How can I change properties of elements in Webflow that are not supported by interactions?
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?