如何使用多个像素跟踪VAST广告事件？

针对你使用video.js@6.8 + videojs-ima时遇到的同一个广告事件需要触发多个跟踪像素的问题，这里提供两种可靠的解决方案：

方案一：遵循VAST规范添加多个<Tracking>标签 #

VAST 4.0规范本身允许为同一个事件定义多个<Tracking>元素，每个元素对应一个跟踪URL。你之前尝试的多标签写法是正确的，可能是之前的VAST结构存在语法问题或者插件解析异常，以下是修正后的VAST示例：

<?xml version="1.0" encoding="utf-8"?>
<VAST version="4.0">
<Ad id="7897490" conditionalAd="false" sequence="1">
<InLine>
<!-- 其他内容省略 -->
<Creatives>
<Creative id="21719385">
<Linear>
<!-- 其他内容省略 -->
<TrackingEvents>
  <!-- 为start事件添加两个跟踪像素 -->
  <Tracking event="start"><![CDATA[http://example.com/start1.jpg]]></Tracking>
  <Tracking event="start"><![CDATA[http://example.com/start2.jpg]]></Tracking>
  
  <!-- 为skip事件添加两个跟踪像素 -->
  <Tracking event="skip"><![CDATA[http://example.com/skip1.jpg]]></Tracking>
  <Tracking event="skip"><![CDATA[http://example.com/skip2.jpg]]></Tracking>
  
  <Tracking event="firstQuartile"><![CDATA[http://example.com/firstQuartile.jpg]]></Tracking>
  <Tracking event="midpoint"><![CDATA[http://example.com/midpoint.jpg]]></Tracking>
  <Tracking event="thirdQuartile"><![CDATA[http://example.com/thirdQuartile.jpg]]></Tracking>
  <Tracking event="complete"><![CDATA[http://example.com/complete.jpg]]></Tracking>
</TrackingEvents>
<!-- 其他内容省略 -->
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>

注意事项： #

• 确保你的videojs-ima版本与video.js@6.8兼容（建议使用videojs-ima@2.x系列，对应video.js 6.x）
• 验证VAST文件的语法正确性，避免标签嵌套错误或字符编码问题

方案二：通过JavaScript事件监听手动触发跟踪像素 #

如果VAST解析的方式无法生效，你可以直接通过监听video.js和videojs-ima的广告事件，手动创建图片元素来发送跟踪请求。这种方式更灵活，不受VAST解析逻辑的限制：

// 初始化video.js播放器
const player = videojs('your-player-id');

// 配置videojs-ima插件
player.ima({
  // 你的IMA配置项，例如广告请求URL等
  adTagUrl: 'your-ad-tag-url'
});

// 监听广告开始事件，触发两个跟踪像素
player.on('ads-ad-started', () => {
  // 自身需求的跟踪像素
  new Image().src = 'http://x.pl/start1.jpg';
  // 客户提供的跟踪像素
  new Image().src = 'http://x.pl/start3.jpg';
});

// 监听广告跳过事件
player.on('ads-ad-skipped', () => {
  new Image().src = 'http://x.pl/skip1.jpg';
  new Image().src = 'http://x.pl/skip3.jpg';
});

// 监听其他广告事件
player.on('ads-ad-first-quartile', () => {
  // 对应firstQuartile事件的跟踪请求
});

player.on('ads-ad-midpoint', () => {
  // 对应midpoint事件的跟踪请求
});

player.on('ads-ad-third-quartile', () => {
  // 对应thirdQuartile事件的跟踪请求
});

player.on('ads-ad-completed', () => {
  // 对应complete事件的跟踪请求
});

优势： #

• 完全控制跟踪触发时机，不受VAST插件解析逻辑影响
• 可以灵活添加额外的业务逻辑（比如日志记录、参数拼接等）

内容的提问来源于stack exchange，提问作者Piotr Ma'niak