Tracking YouTube clicks on embedded video

JavaScript
#1 
 <script>
     function loadXMLDoc(elementId, endpoint) {
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function () {
             if (this.readyState == 4 && this.status == 200) {
                 document.getElementById(elementId).innerHTML =
      this.responseText;
             }
         };
         xhttp.open("GET", endpoint, true);
         xhttp.send();
     }
</script>

Is there a way to track clicking on an iframe YouTube video? I tried wrapping in the example below, but that doesn’t work. Works great if using normal hyperlinked text, but not here.

I appreciate your help.


<a href="#" onclick="loadXMLDoc('first-element', 'onclick.asp?id=1')"><iframe width="640" height="360" src="https://www.youtube.com/embed/....." frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></a>
#2

Hi @javascript7, I don’t think that this is possible. Clicking inside the iframe will dispatch an event only there, it won’t “leave” the iframe as an event would normally bubble up the DOM tree. And since a youtube iframe will have a different origin that the page you’re embedding it into, you can’t listen to events on the iframe window either (as it would otherwise be possible via its contentWindow property).

I suppose would you might do as a workaround is not include the actual iframe but just a placeholder, which would be replaced be the actual iframe on click. However the user would then have to click the iframe again to start the video once it got loaded…

<a 
  href="#" 
  data-iframe-src="https://www.youtube.com/embed/ZPcz5qHCPO4"
  data-anchor-id="first-element"
  data-endpoint="onclick.asp?id=1"
>iframe placeholder here</a>

var iframeAnchors = document.querySelectorAll('[data-iframe]')

iframeAnchors.forEach(function (anchor) {
  anchor.addEventListener('click', function (event) {
    var iframe = document.createElement('iframe')

    event.preventDefault()

    // Tracking...
    loadXMLDoc(anchor.dataset.anchorId, anchor.dataset.endpoint)

    // Set required attributes...
    iframe.setAttribute('frameborder', '0')

    iframe.src = anchor.dataset.iframeSrc
    anchor.replaceWith(iframe)
  })
})
1 Like
#3

I was pretty sure that was the case, but wanted to check it out with an expert.

Thank you for the workaround example. I will give that a try and report back.

I appreciate your response. Thanks again!

1 Like
#4

Since the iframe video can’t be tracked as is, it’s probably easier to just put it in a modal and then track the clicking activity that way. Thanks for your input, I appreciate it.

#5

Yeah true, that would be nicer than just replacing a placeholder. :-)

#6

Although… thinking about it, as it’s specifically a YT iframe you want to track you might actually use the YT iframe API for this, which allows communication between the player and the embedding page via events; for example:

<script src="https://www.youtube.com/iframe_api"></script>

...

<iframe
  class="youtube-player"
  data-anchor-id="first-element"
  data-endpoint="onclick.asp?id=1"
  width="560"
  height="315"
  src="https://www.youtube.com/embed/ppQFdPO7w50?enablejsapi=1"
  frameborder="0"
></iframe>

/* global YT */
function onPlayerStateChange (event) {
  var iframe = event.target.getIframe()
  var state = event.data

  if (state === YT.PlayerState.PLAYING) {
    loadXMLDoc(iframe.dataset.anchorId, iframe.dataset.endpoint)
  }
}

window.onYouTubeIframeAPIReady = function () {
  var players = document.querySelectorAll('.youtube-player')

  players.forEach(function (element) {
    var player = new YT.Player(element)
    player.addEventListener('onStateChange', onPlayerStateChange)
  })
}

Of course this won’t work for tracking any iframe interaction, for others you’d have to look if there’s a similar API available.

2 Likes
#7

Thanks for that - I will give that a try and let you know. Thanks!

#8

I am looking at the API Youtube code but then how do you apply that to track per post number 1 where it send to my onclick.asp page?

#9

My apology! I see where the onclick.asp code is. And it works!!! Thank you so much - amazing how you figured how to do that after at first thinking you couldn’t. Nice job!!!

1 Like
#10

Glad I could help. :-)

#12