Tracking YouTube Embeds

Tracking YouTube videos requires adding a small script to your website. It can be implemented through Google Tag Manager (GTM) or directly in your codebase.

Track engagement events when visitors interact with embedded YouTube videos on your website. This integration captures video started, paused, resumed, and completed events, allowing you to understand how your video content contributes to the customer journey.

Prerequisites

For the tracking script to work, your YouTube embeds must include the enablejsapi=1 parameter in the iframe URL:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1"
  title="Product Demo Video"
></iframe>

Important

Adding a title attribute to your iframes is recommended. This provides a human-readable name in your analytics. If no title is set, the script will use "Video on [page path]" as a fallback (e.g., "Video on /pricing").

Installation

Add the following script to your website. It will automatically detect all YouTube embeds and track video engagement events.

<script>
  (function () {
    try {
      var seen = new WeakSet();

      function isYouTubeIframe(iframe) {
        return iframe.src && iframe.src.indexOf("youtube.com/embed") !== -1;
      }

      function ensureId(iframe) {
        if (iframe.id) {
          return iframe.id;
        }

        var id = "yt-" + Math.random().toString(36).slice(2);
        iframe.id = id;

        return id;
      }

      function getTitle(iframe) {
        return iframe.title || "Video on " + location.pathname;
      }

      function attachPlayer(iframe) {
        if (seen.has(iframe)) {
          return;
        }

        seen.add(iframe);

        var id = ensureId(iframe);
        var title = getTitle(iframe);
        var started = false;

        new YT.Player(id, {
          events: {
            onStateChange: function (e) {
              try {
                if (!window.dreamdata) {
                  return;
                }

                switch (e.data) {
                  case YT.PlayerState.PLAYING:
                    if (!started) {
                      started = true;
                      dreamdata.track("YouTube Video Started: " + title);
                    } else {
                      dreamdata.track("YouTube Video Resumed: " + title);
                    }

                    break;

                  case YT.PlayerState.PAUSED:
                    dreamdata.track("YouTube Video Paused: " + title);
                    break;

                  case YT.PlayerState.ENDED:
                    dreamdata.track("YouTube Video Completed: " + title);
                    break;
                }
              } catch (err) {}
            },
          },
        });
      }

      function scan() {
        var iframes = document.querySelectorAll("iframe");
        for (var i = 0; i < iframes.length; i++) {
          if (isYouTubeIframe(iframes[i])) {
            attachPlayer(iframes[i]);
          }
        }
      }

      function init() {
        if (window.YT && window.YT.Player) {
          scan();
        } else {
          var prev = window.onYouTubeIframeAPIReady;
          window.onYouTubeIframeAPIReady = function () {
            if (typeof prev === "function") prev();
            scan();
          };

          var tag = document.createElement("script");
          tag.src = "https://www.youtube.com/iframe_api";
          document.head.appendChild(tag);
        }
      }

      if (window.dreamdata) {
        dreamdata.ready(init);
      } else {
        init();
      }
    } catch (err) {}
  })();
</script>

How It Works

1. The script loads the YouTube IFrame API if not already present
2. It scans the page for YouTube embed iframes with enablejsapi=1
3. For each iframe, it attaches event listeners for player state changes
4. When video events occur, it sends tracking calls to Dreamdata

Tracked Events

Event	Description	Example
YouTube Video Started: [title]	Fires the first time a video plays	YouTube Video Started: Product Demo
YouTube Video Paused: [title]	Fires when a video is paused	YouTube Video Paused: Product Demo
YouTube Video Resumed: [title]	Fires when a paused video resumes	YouTube Video Resumed: Product Demo
YouTube Video Completed: [title]	Fires when a video finishes	YouTube Video Completed: Product Demo

Troubleshooting

Videos not being tracked?

• Ensure your iframe URL includes ?enablejsapi=1
• Check that the Dreamdata script is loaded on the page
• Verify there are no JavaScript errors in the console

Title showing as "Video on /path"?

• Add a title attribute to your iframe for a descriptive name