如何在GTM中为Brightcove视频自定义事件标签并获取视频标题

你之前使用的通用HTML5视频监听脚本无法生效，是因为Brightcove播放器采用独立封装的API体系，媒体元数据未存储在原生video元素的公开属性中，需要通过Brightcove官方播放器接口获取标题参数。

步骤1：确认Brightcove嵌入配置 #

• 嵌入Brightcove播放器时，确保代码中包含data-embed="default"属性，且未关闭JavaScript API权限
• 若使用iframe嵌入方式，需额外开启iframe postMessage API权限才能获取元数据（推荐使用JS嵌入方式降低配置复杂度）

步骤2：创建GTM自定义HTML监听标签 #

触发条件选择「DOM 就绪」，标签优先级设置为高于100，填入以下代码：

// 监听Brightcove播放器实例初始化事件
if (window.brightcove) {
  // 遍历页面所有Brightcove播放器
  brightcove.getPlayers().forEach(function(player) {
    // 监听媒体资源加载完成事件
    player.on('loadedmetadata', function() {
      // 推送视频元数据到数据层
      window.dataLayer.push({
        event: 'brightcove_video_play',
        video_title: player.mediainfo.title,
        video_duration: player.mediainfo.duration,
        video_id: player.mediainfo.id
      });
    });
    // 可选：监听播放、暂停、完成等其他事件，按需扩展
    player.on('play', function() {
      window.dataLayer.push({
        event: 'brightcove_video_interaction',
        interaction_type: 'play',
        video_title: player.mediainfo.title
      });
    });
  });
}
// 适配动态加载的Brightcove播放器
else {
  const observer = new MutationObserver(function(mutations) {
    if (window.brightcove) {
      observer.disconnect();
      // 重复上述播放器监听逻辑
      brightcove.getPlayers().forEach(function(player) {
        player.on('loadedmetadata', function() {
          window.dataLayer.push({
            event: 'brightcove_video_play',
            video_title: player.mediainfo.title
          });
        });
      });
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

部分旧版本Brightcove播放器可尝试将player.mediainfo.title替换为player.media.title获取视频标题

步骤3：创建GTM数据层变量 #

• 进入GTM后台「变量」-「用户定义变量」- 新建
• 变量类型选择「数据层变量」，变量名称填入video_title，版本选择「版本2」，保存变量

步骤4：配置事件标签 #

• 新建GA事件（或其他分析平台事件）标签
• 事件标签字段直接选择上述创建的video_title变量
• 触发条件选择对应Brightcove自定义事件（如brightcove_video_interaction、brightcove_video_play等）

内容的提问来源于stack exchange，提问作者Justine