使用 Google Analytics 4 和 Google Tag Man 跟踪 Html5 视频

主页文章 SEO 使用 Google Analytics 4 和 Google Tag Manager 跟踪 HTML5 视频 使用 Google Analytics 4 和 Google Tag Manager 跟踪 HTML5 视频发布时间:2021-08-16 如果您的网站使用未命名的视频播放器,那么它很可能是通用的 HTML5 视频播放器。如果您想跟踪他们与 Google 跟踪代码管理器的互动情况,则需要进行一些额外的设置。在这篇博文中,我将演示如何使用 Google Analytics 4 和 Google Tag Manager 跟踪 HTML5 视频播放器。内容 – 隐藏目录 – GTM 配方 自定义 JavaScript 变量 + 自动事件监听器测试监听器 数据层变量、自定义事件触发器 GA4 事件标签 测试配置 保存自定义维度 最多等待 24 小时 我在哪里可以看到 GA4 报告中的数据?遗言 GTM 秘诀 如果你赶时间,我准备了一个 GTM 容器模板,你可以导入、配置,然后它将开始跟踪嵌入式 HTML5 视频播放器 + 将数据发送到 GA4。自定义 JavaScript 变量 + 自动事件侦听器此设置中最重要的部分是自定义代码,旨在不断寻找 HTML5 视

频交互。最初,这个解决方案是由 David Vallejo

创建的,但我添加了一些更改 捷克共和国电话号码  以便使用 Google Analytics 4 进行更方便的跟踪。但是在创建这个标签之前,我们需要创建一个自定义 JavaScript 变量。我们将使用的侦听器包含超过 100 行代码,如果您使用 GTM,则应始终尝试优化配置,以使其对页面加载/性能的影响尽可能小。我们不会在每个页面上触发侦听器,而是仅在实际存在 HTML5 播放器的页面上触发它。这可以通过自定义 JavaScript 变量来完成。在 Google 跟踪代码管理器中,导航到变量 > 新建 > 自定义 JavaScript 并粘贴以下代码:a function () { var video = document.getElementsByTagName(‘video’).length;if (video > 0) { return true; } 其他 { 返回 false; } } 将此变量命名为:cjs – 是 .接下来,转到 Triggers > New > Window Loaded 并输入以下参数:当页面完全加载并且 HTML5 视频

播放器出现在页面上时,此触发器将触发。

捷克共和国电话号码

我们如何知道玩家是否在页面上?如果播放器在页面上实际可用,则此自定义 JavaScript 变量将返回 true。现在是时候创建一个包含侦听器代码的自定义 HTML 标记了。提醒一下,这个标签会寻找 HTML5 视频交互,如果它发现了,我们可以在 GTM 预览模式下看到它,从而触发 GA4 事件标签。在 GTM 中,转到标签 > 新建 > 自定义 HTML 并粘贴以下代码:<script> // 让我们将所有内容包装在一个函数中,这样变量就不会被定义为 global(a function() { // 这是我们的桶百分比( 25%-75%)divisor var = 25; // 我们将在这个对象上保存播放器的状态 var videos_status = {}; // 这是处理播放器监听器发送的事件的函数eventHandler(e) { switch (e.type) { // 每次播放器更新当前时间时都会发送这种类型的事件,// 我们用于播放视频的百分比。’timeupdate’ case: // 让我们设置录制当前播放器的视频在我们的状态中的时间

Leave a comment

Your email address will not be published.