如何让 GTM 的内置 YouTube 触发器在通过 JS 点击功能创建的模态中播放的视频上触发

Question

我有一个页面设置，可以显示几个图像，当单击这些图像时，它们会在一个模式中播放各自的YouTube视频。这很好，但我现在想实现一些跟踪(谷歌分析)，以深入了解播放、暂停、跳过、观看百分比等。我已经通过GTM容器加载GA了，所以我正试图利用GTM内置的YouTube触发器来触发GA事件标记。到目前为止，我一直无法启动YouTube的触发器。

您可以在此处查看实时页面：https://ww5.komen.org/yourone/

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

我在GTM中配置了以下内容：

变量：

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

• 用户定义的｛｛视频操作｝｝变量，是一个查找表，其输入(开始、暂停、进度、查找、缓冲、完成)与输出(开始播放、暂停、观看的｛{视频百分比｝｝%、跳过的前向(或后向)、缓冲、到达终点)匹配

触发器：

• YouTube视频触发器设置为捕获开始、完成、暂停、搜索和缓冲、进度(百分比25,50,75)，向所有YouTube视频添加JS API支持，在所有视频上启动

标签：

• GA Universal Analytics标签，带有曲目类型：YouTube，类别：YouTube，动作：｛｛视频动作｝｝，标签：｛{视频标题｝-｛{视频URL｝，GA设置：在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>

这是模式代码(隐藏直到激活)：

<!-- VIDEO MODAL HIDDEN UNTIL ACTIVATED -->
<div class="modal fade" id="YTmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="modal-body">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- END VIDEO MODAL -->

以下是创建模态的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 -->

Answer 1

我想这就是您想要的：

https://www.simoahava.com/analytics/the-youtube-video-trigger-in-google-tag-manager/

基本上，正如"跟踪延迟加载/动态插入的视频"一节所述，如果将<script src="https://www.youtube.com/iframe_api">添加到页面中，它就会起作用。