Qfyilyi

I have a site where an overlay opens and loads a javascript for the Google Tag Manager, without there being any Youtube Video's present yet. When the user clicks on a button (class = .flower-leaf or .list-leaf), the youtube video that we want to track with GTM appears on the page via an iframe.

Last week I stumbled upon this issue, when I wanted to use the YouTubeAPI to give me an event when the video stopped playing: YouTube API Target (multiple) existing iframe(s)

Now, I want something similar, but not quite, because instead of kicking off custom functions for onReady and onStateChange events, I just want the GTM script to respond to these events. Now, my JavaScript knowledge isn't expert, so I might be missing something obvious here, but how do I make sure that the GTM script functions are going to be triggered on those events? With my current code, I get an error saying that onPlayerReady is not defined. It's obviously only looking in the scope of my own script, but I want to trigger a GTM function. How would I go about that?

// This code loads the IFrame Player API code asynchronously.

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);



function onYouTubePlayerAPIReady() {

  $(".flower-leaf").click(function () {

    interval = setInterval(myTimer, 1000);

  });

  $(".list-leaf").click(function () {

    interval = setInterval(myTimer, 1000);

  });

}



var interval;

var player;



function myTimer() {

  myStopFunction();

  addEventListeners();

}



function myStopFunction() {

  clearInterval(interval);

}



function addEventListeners() {

  $(".flower-leaf").each(function () {

    var identifier = 'youtubeplayer';

    player = new YT.Player(identifier, {

      events: {

        "onReady": onPlayerReady,

        "onStateChange": onPlayerStateChange,

      }

    });

  });

  $(".list-leaf").each(function () {

    var identifier = 'youtubeplayer';

    player = new YT.Player(identifier, {

      events: {

        "onReady": onPlayerReady,

        "onStateChange": onPlayerStateChange,

      }

    });

  });

}

I think it's important to mention I'm using the standard YouTube-video trigger in my GTM setup (on tagmanager.google.com)