Well, you have two separate problems here:
- A race condition between Google's YouTube Player DataLayer JS (which you're loading via GTM) and the custom Munchkin tracking JS.
- Even if you solve the race condition by ensuring one of them always loads first, you still have a problem, because the second one will overwrite the event listeners set by the first.
See, the YT IFRAME API has a very primitive event model.
Rather than using a standard event stack like
// could be in remote file1.js
window.addEventListener("youTubeIframeAPIReady", function doSomething(){
// do something
})
// could be in another remote file2.js
window.addEventListener("youTubeIframeAPIReady", function doSomethingElse(){
// do something else (after doing something)
})
instead it supports only a single function to kick off event handling:
function onYouTubeIframeAPIReady {
// do all things
}
Therefore every time a script contains a global onYouTubeIframeAPIReady function, it overwrites any previous event listeners.
When you have scripts loading in a non-deterministic order (as happens w/GTM unless you use Tag Sequencing -- a good thing to learn) then this means you don't know which event listener will be created last, so you don't know which one will be the active one. But even if you can make sure the scripts load in order 1-2-3 that still means only 3's copy of onYouTubeIframeAPIReady will run.
This is all actually quite solvable -- you have to use a wrapper event stack on top of onYouTubeIframeAPIReady and make sure your scripts all cooperate by adding to that stack. But it won't be solved unless you change your scripts accordingly, and right now they do the overwrite thing.
.png)