How to Track Click Events for Embedded Media

Introduction: Why Track Clicks on Embedded Media?

Did you know, a shocking number of website owners are totally blind to how users interact with their embedded content (Ensuring Website Accessibility for the Blind: A Comprehensive Guide)? It's kinda like throwing a party and not knowing if anyone's actually dancing! Tracking clicks on embedded media can change that.

Here's why it's important:

• It shows you what content really grabs attention. Like, is that youtube video of your ceo actually getting watched, or is it just taking up space? Knowing this helps refine your content strategy.

• It directly impacts conversion rates. If people are clicking on embedded calls to action, that's awesome. If not, you know where to focus your optimization efforts. For instance, a healthcare provider embedding explainer videos on their site, they can track which video sections leads to the most appointment bookings.

• It gives you deeper insight beyond basic page views. Page views tells you people saw the page, but click tracking tells you what they did on it.

One of the biggest problem is that embedded media often lives in iframes - which makes tracking a pain. According to infotrust.com, iframes come from another domain, like youtube.com, so you need extra steps.

Now, let's get into how we can actually track clicks on different types of embedded media.

Setting Up Google Tag Manager (GTM) for Click Tracking

Okay, so you've got your GTM account all set up? Awesome. Now, let's get those click variables firing--it's way easier than it sounds, promise!

• First things first, head over to the "Variables" section in your gtm workspace. It's where all the magic happens, kinda.
• Next, find the "Built-In Variables" section and click "Configure." A whole bunch of options pops up, right?
• Enable those click variables--Click URL, Click Text, Click ID, and Click Classes are usually a good starting point.

Enabling these lets you see where users are clicking. For example, if a non-profit embeds a donation link within a video, Click URL tracks if they're actually clicking through. Click Text captures the visible text of the clicked element, and Click Classes and Click ID help you pinpoint specific elements if you need to get more granular. Up next, we'll create triggers.

Tracking YouTube Video Clicks with GTM

Okay, so you wanna track those sweet youtube video clicks? It's more involved than just slapping on a tag, but trust me, it's worth it. We're gonna get down and dirty with some custom code, but don't worry, I'll guide you through it.

First, you'll need to enable the YouTube Built-In Variable in GTM. Go to Variables -> Configure and enable "Video Tracking." This gives you access to variables like "Video Title," "Video Status," and "Video Percent."

Next, you're gonna need to create a Custom HTML tag in gtm. This is where the magic starts. This tag will contain JavaScript that interacts with the YouTube iframe api.

Here's a basic example of the JavaScript you'd put in your Custom HTML tag. This code loads the YouTube iframe api and sets up listeners for video events:

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    // Find all YouTube embeds on the page
    var youtubeIframes = document.querySelectorAll('iframe[src*="youtube.com/embed"]');
    youtubeIframes.forEach(function(iframe) {
      var videoId = iframe.src.split('/embed/')[1].split('?')[0];
      player = new YT.Player(iframe, {
        events: {
          'onStateChange': onPlayerStateChange,
          'onReady': onPlayerReady // Optional: useful for initial setup
        }
      });
    });
  }
  function onPlayerReady(event) {
    // You can do something when the player is ready, e.g., get video title
    var videoTitle = event.target.getVideoData().title;
    console.log("Player ready for video: " + videoTitle);
  }
  function onPlayerStateChange(event) {
    var videoTitle = event.target.getVideoData().title;
    var videoStatus = event.data; // 0: ended, 1: playing, 2: paused, etc.
if (videoStatus == YT.PlayerState.PLAYING) {
  // Push to dataLayer when video starts playing
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    &#39;event&#39;: &#39;youtubeVideoPlay&#39;,
    &#39;videoTitle&#39;: videoTitle,
    &#39;videoStatus&#39;: &#39;Playing&#39;
  });
} else if (videoStatus == YT.PlayerState.ENDED) {
  // Push to dataLayer when video ends
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    &#39;event&#39;: &#39;youtubeVideoEnd&#39;,
    &#39;videoTitle&#39;: videoTitle,
    &#39;videoStatus&#39;: &#39;Ended&#39;
  });
}
// You can add more states like PAUSED, BUFFERING, CUED

  }
</script>

When one of these events happens, you'll push data into the dataLayer. Think of it like a secret message being passed to gtm. The dataLayer is an array that GTM uses to receive information about user interactions. When you dataLayer.push(), you're sending an object containing details about the event. For example, a media company might track when users click the "play" button on an embedded video to understand user engagement. Getting this data into the dataLayer is key. Next up, we'll set up the triggers that listen for these dataLayer events.

Tracking Slideshow Clicks (e.g., SlideShare, Prezi)

Slideshows, like those from SlideShare or Prezi, can be goldmines of info, but are you tracking if anyone's actually clicking through them? It's a missed opportunity if you aren't.

While both YouTube and slideshows are embedded media, they require different approaches to tracking. Now, let's look at tracking clicks within slideshows.

Here's how to get started:

• First, identify the clickable elements. Are they buttons, links, or specific areas of the slide? Inspect the slideshow's html, that's key. Look for common HTML structures like <a> tags for links, <button> elements, or elements with specific classes like slide-nav-button or cta-link.

• Then, use GTM triggers based on those click classes or IDs. Configure a "Click Element" trigger to fire when specific CSS classes or IDs are clicked. For example, you might set up a trigger to fire when an element with the class next-slide-arrow is clicked.

• Finally, send that click data to google analytics as events. You'll wanna set up a GA event tag in gtm with category, action, and label. For instance, you could set the category to "Slideshow," the action to "Click," and the label to the Click Text or Click URL of the element.

Next, we'll tackle some more advanced techniques.

Advanced Techniques and Considerations

Ever feel like you're playing detective with your website? Advanced click tracking can feel like that. But, it's essential if you want a real grasp on user behavior on your embedded media.

• Consider custom javascript listeners. Sometimes, GTM's built-in stuff just doesn't cut it, y'know? These are custom scripts you write to listen for specific events that GTM might not natively support. For example, if you have a custom-built carousel that doesn't use standard HTML elements for navigation, you'd write a JavaScript listener to detect clicks on its unique navigation buttons and then push that data to the dataLayer.

• Don't forget cross-domain tracking. If that video is hosted somewhere else, you'll need to configure gtm to follow users across domains. This is important because cookies and session data are typically domain-specific. If your embedded media is on a subdomain or a completely different domain (like a separate e-commerce platform), GTM needs to be configured to pass user identifiers between these domains so you can track a user's journey consistently. In GTM, this often involves enabling "Allow Link Decoration" and "Decorate Forms" in your Google Analytics settings. It can be a pain.

• And, of course, gdpr compliance. Gotta get that consent before you start tracking everything!

Next, let's look at debugging...

Analyzing and Optimizing Based on Click Data

Alright, so you've been tracking all these clicks on your embedded stuff -- now what? Time to make sense of it all, right? It's not just about collecting data, it's about turning it into actionable insights.

• Start by creating custom reports in google analytics. Don't just stare at the default dashboards! Tailor reports to visualize exactly what you wanna see, like, which video is getting the most clicks on it's call-to-action button.

  Here are a couple of examples of custom reports you might create:

  Report 1: YouTube Video Engagement

  • Type: Event
  • Dimensions:
    • Event Category (e.g., "YouTube Video")
    • Event Action (e.g., "Play", "End", "Seek")
    • Event Label (e.g., the "Video Title" pushed from GTM)
    • Page Path (to see which pages have the most engaged videos)
  • Metrics:
    • Total Events
    • Unique Events
    • Event Value (if you're assigning values to certain actions)

  Report 2: Slideshow Click Analysis

  • Type: Event
  • Dimensions:
    • Event Category (e.g., "Slideshow")
    • Event Action (e.g., "Click")
    • Event Label (e.g., the Click Text or a descriptive identifier of the clicked element)
    • Page Path
  • Metrics:
    • Total Events
    • Unique Events

• Segment your data. Look at user demographics, device types, or even traffic sources. A retail company, for example, might segment video engagement by mobile vs. desktop users to see if one group is more responsive, or a healthcare provider might segment by the source of the traffic if it is social media or search engines. This helps you understand who is interacting with your content.

• Spot the trends. Are users dropping off at a specific point in a slideshow? Is a particular video thumbnail getting way more clicks? Pinpointing these patterns helps you understand what's working and what isn't.

By turning raw clicks into insights, you're ready to tweak content and improve user experiences. Let's wrap this up.

Conclusion

So, you've made it this far! Give yourself a pat on the back. Understanding user interaction with embedded media isn't just a cool trick, it's kinda essential for knowing what's actually resonating.

Here's a quick recap:

• Remember setting up GTM? It's the foundation for tracking, making sure those clicks are actually recorded. We enabled built-in variables and learned how to use custom HTML tags for more complex scenarios like YouTube embeds.
• Don't forget about tailoring those triggers! What works for youtube might need some tweaking for a slideshow, and custom javascript listeners can help with unique embedded elements.
• And, most importantly, keep analyzing the data. What are users really clicking on? Use custom reports in Google Analytics to understand engagement with your YouTube videos and slideshows, and leverage segmentation to get deeper insights.

Keep tweaking and testing – it's a never ending process, y'know?