Google analytics 如何获得GTM'；内置YouTube触发器，通过JS点击功能在modal中播放视频

我有一个页面设置，显示了几个图像，点击后在一个模式中播放各自的YouTube视频。这很好，但我现在想实现一些跟踪（谷歌分析），以提供对播放、暂停、跳过、观看百分比等的洞察。我已经通过GTM容器加载GA，所以我试图利用GTM内置的YouTube触发器触发GA事件标记。到目前为止，我还无法启动YouTube触发器

您可以在此处查看live页面：

此页面使用引导并依赖引导模式显示视频。我正在使用GTM的预览模式来确定触发的标签。我已尝试选中触发器配置复选框，将JavaScript API支持添加到所有YouTube视频中，但这似乎对GTM触发器的触发没有任何影响

我在GTM中配置了以下各项：

变量：

• 所有内置视频数据层变量均已激活

• 用户定义的{Video Actions}变量，是一个查找表，其输入（开始、暂停、进度、查找、缓冲、完成）与输出（开始播放、暂停、观看的{Video Percent}}%、向前跳过（或向后跳过）、缓冲、结束）匹配

触发器：

• YouTube视频触发器设置为捕获开始、完成、暂停、搜索和缓冲、进度（百分比25、50、75），向所有YouTube视频添加JS API支持，对所有视频开火

标签：

• GA Universal Analytics标签，跟踪类型：YouTube，类别：YouTube，操作：{{Video Actions}}，标签：{{Video Title}}-{{Video URL}，GA设置：{{GA Tracking ID}在YouTube视频触发器上触发

以下是生成模式的代码：

<a class="video-btn video-modal" data-toggle="modal" data-video="https://www.youtube.com/embed/xxqEcA7p-pE" data-target="#YTmodal">
  <div class="card-img-top" style="background: #f7f7f7 url('img/cards/cathy-and-donnie.jpg'); background-size: cover; height: 225px; width: 100%; position: relative;">
    <div class="overlay"></div>
  </div>
  <div class="card-body text-center">
    <p class="intro">Meet Donny Coursey<br /> and his wife, <span class="pink-text">Cathy</span></p>
    <p class="quote">"Our love is<br />stronger than cancer"</p>
  </div>
</a>

认识唐尼·库西和他的妻子凯西

“我们的爱比癌症更强烈”

以下是模式代码（激活前隐藏）：

&时代；

以下是创建模态的JS：

<!-- YOUTUBE VIDEO MODALS -->
<script>
$(".video-modal").click(function () {
  var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-video"),
      videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1&enablejsapi=1";
  $(theModal + ' iframe').attr('src', videoSRCauto);
  $(theModal).on('hidden.bs.modal', function () {
    $(theModal + ' iframe').attr('src', videoSRC);
  });
});
</script>
<!-- END YOUTUBE VIDEO MODALS -->

$（“.video modal”）。单击（函数（）{
var theModal=$（this）.data（“目标”），
videoSRC=$（this.attr（“数据视频”），
videoSRCauto=videoSRC+“？虚拟品牌=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1&enablejsapi=1”；
$（模态+iframe'）.attr（'src'，videoSRCauto）；
$（theModal.on（'hidden.bs.modal'，function（）{
$（模态+iframe'）.attr（'src'，videoSRC）；
});
});

我想这就是你想要的：

---

基本上，如“跟踪延迟加载/动态插入的视频”一节所述，如果您将

添加到页面中，它将起作用。

我认为这就是您要寻找的：

基本上，在“跟踪延迟加载/动态插入的视频”一节中指出，如果您将

添加到页面中，它将起作用

<!-- YOUTUBE VIDEO MODALS -->
<script>
$(".video-modal").click(function () {
  var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-video"),
      videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1&enablejsapi=1";
  $(theModal + ' iframe').attr('src', videoSRCauto);
  $(theModal).on('hidden.bs.modal', function () {
    $(theModal + ' iframe').attr('src', videoSRC);
  });
});
</script>
<!-- END YOUTUBE VIDEO MODALS -->