Question

我在一个网站上打开了覆盖图，并为Google跟踪代码管理器加载了javascript，但还没有任何Youtube Video。当用户单击按钮（类= .flower-leaf或.list-leaf）时，我们要使用GTM跟踪的youtube视频通过iframe出现在页面上。

上周我偶然发现了这个问题，当时我想使用YouTubeAPI在视频停止播放时给我一个事件：YouTube API Target (multiple) existing iframe(s)

现在，我需要类似但不完全相同的东西，因为我不想为onReady和onStateChange事件启动自定义函数，而是希望GTM脚本能够响应这些事件。现在，我的JavaScript知识不是很熟练，所以这里可能缺少明显的东西，但是如何确保在这些事件上将触发GTM脚本功能？使用我当前的代码，我得到一个错误，提示未定义onPlayerReady。显然，它只是在我自己的脚本范围内，但是我想触发GTM函数。我将如何处理？

// 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,
      }
    });
  });
}

我认为提到我在GTM设置（在tagmanager.google.com上）使用标准的YouTube视频触发器很重要

（多个）现有iframe中的Google Tag Manager API目标Youtube视频

0 个答案: