How can you use Google Tag Manager to track user interactions with embedded content? A Step by Step Guide

Tracking user interactions with embedded content, such as iframes or widgets, can provide valuable insights into user engagement with your site. Google Tag Manager (GTM) can help you track these interactions using custom JavaScript and event listeners. This guide will use YouTube video embeds as an example, but the process can be adapted for other types of embedded content.

Step-by-step guide for tracking user interactions with embedded content using GTM:

1. Log in to Google Tag Manager: Sign in to your GTM account at https://tagmanager.google.com/ and select the container associated with your website.
2. Enable built-in variables: Click “Variables” in the left-hand menu, then scroll down to “Built-In Variables” and click “Configure.” Enable all the necessary variables, such as “Click URL,” “Page URL,” and “Video Title.”
3. Create a new tag: Click “Tags” in the left-hand menu, then click the “New” button. Give your tag a descriptive name, such as “YouTube Video Tracking.”
4. Choose a tag type: Click on “Tag Configuration” and select the “Custom HTML” tag type.
5. Add your custom JavaScript code: In the “HTML” field, insert your custom JavaScript code to track user interactions with your embedded content. For YouTube video embeds, you can use the YouTube iframe API to listen for events like play, pause, and end. A basic example would look like this:
   <script>
   // Load the YouTube iframe API
   function loadYoutubeAPI() {
   var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
   }

   // Listen for YouTube events and send data to GTM
   function onYouTubeIframeAPIReady() {
   var videoElements = document.querySelectorAll('iframe[src*="youtube.com"]');

   videoElements.forEach(function(video) {
   var player = new YT.Player(video, {
   events: {
   'onStateChange': function(event) {
   var action;

   switch (event.data) {
   case YT.PlayerState.PLAYING:
   action = 'play';
   break;
   case YT.PlayerState.PAUSED:
   action = 'pause';
   break;
   case YT.PlayerState.ENDED:
   action = 'end';
   break;
   default:
   return;
   }

   window.dataLayer.push({
   'event': 'youtube_interaction',
   'videoAction': action,
   'videoUrl': video.src,
   });
   }
   }
   });
   });
   }

   // Load the YouTube iframe API when the page is loaded
window.addEventListener('load', loadYoutubeAPI);
</script>


6. Choose the trigger: Click on “Triggering” and select the “All Pages” trigger to ensure your custom JavaScript code runs on every page.
7. Save your tag: Click “Save” to finish creating your custom JavaScript tag.
8. Create a new tag for sending event data to Google Analytics: Follow the steps in previous answers to create a new Universal Analytics or GA4 event tag that listens for the “youtube_interaction” event in the dataLayer. Configure the event category, action, and label using the appropriate dataLayer variables.
9. Test your setup: Before publishing your changes, use the “Preview” mode in GTM to test your embedded content interaction tracking on your website. Make sure the tag fires correctly and the events are sent to Google Analytics.
10. Publish your changes: If your embedded content interaction tracking works correctly in Preview mode, click “Submit” in the top right corner of the GT