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.
- 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.