1

我正在使用amp-audio一个项目的组件，并且需要能够在用户播放/暂停音频以及音频完成时在 Google Tag Manager 跟踪中设置标签和触发器。从 的文档中amp-audio，它声称我可以利用音频播放和暂停触发器来跟踪事件amp-analytics。但是，这不会触发任何分析。此外，该amp-analytics文档仅列出video-*了与媒体相关的触发器，在页面上的任何地方都没有提及任何与amp-audio. 这种文档冲突不仅令人困惑，而且令人沮丧，因为无法判断哪个是准确的，如果有的话。

代码片段和触发器配置（直接取自amp-audio文档，用我自己id的 s 更新），这是行不通的：

<amp-audio id="my-amp-audio-player" controlsList="nodownload" height="50" width="auto">
  ...
</amp-audio>

...和...

"triggers": {
  "audioPlay": {
    "on": "audio-play",
    "request": "event",
    "selector": "#my-amp-audio-player"
  },
  "audioPause": {
    "on": "audio-pause",
    "request": "event",
    "selector": "#my-amp-audio-player"
  }
}

作为一种解决方法，我还尝试通过amp-script组件包含和使用自定义 JS。使用它amp-audio已被证明是徒劳的，我还尝试使用直接audio标签代替amp-audio. 使用纯audio标签使我能够定位音频播放器并捕获play、pause和ended事件......但是，尝试执行任何会导致成功触发 AMP 的操作最终会抛出“因非法突变而终止”错误，如记录所示在amp-script文档中。

在 Google 跟踪代码管理器中设置的点击事件触发器的代码片段：

标记：

<amp-script layout="container" src="/static-assets/audio.js">
  <audio id="my-amp-audio-player" controls controlsList="nodownload" height="50" width="auto">
    ...
  </audio>
  <button id="btn-audio-play-trigger">Play Trigger</button>
  <button id="btn-audio-pause-trigger">Pause Trigger</button>
</amp-script>

JS：

const audioPlayer = document.getElementById('my-amp-audio-player')
audioPlayer.addEventListener('play', () => {
  // Below (and other uses of this) results in illegal mutation error (if an AMP component)
  // or something like 'TypeError: document.getElementById(...).click is not a function'
  // when using a <button> element
  document.getElementById('btn-audio-play-trigger').click()
})
audioPlayer.addEventListener('pause', () => {
  document.getElementById('btn-audio-pause-trigger').click()
})
audioPlayer.addEventListener('ended', () => {
  // TODO: Implement functionality as needed
})

当前状态：

无论我实现哪种实现或使用组合，我尝试过的任何方法都无法成功触发和捕获跟踪代码管理器可以捕获和记录的事件amp-audio。audio感谢任何建议、见解或方向！

4

0 回答 0