AMP Audio: отслеживание воспроизведения / паузы / завершения и захвата в диспетчере тегов Google - PullRequest
Новая
       43

AMP Audio: отслеживание воспроизведения / паузы / завершения и захвата в диспетчере тегов Google

1 голос
/ 17 февраля 2020

Я работаю с компонентом amp-audio для проекта, и мне нужно иметь возможность устанавливать теги и триггеры в треке Google Tag Manager, когда пользователь воспроизводит / приостанавливает звук и когда звук завершается. В документации для amp-audio утверждается, что я могу использовать триггеры Audio Play и Pause для отслеживания событий через amp-analytics. Однако это не работает, чтобы вызвать любую аналитику. Кроме того, в документации amp-analytics перечислены только video-* для триггеров, связанных со СМИ, с no , указывающими на что-либо на странице, что-либо, связанное с amp-audio. Этот конфликт документации не только сбивает с толку, но и расстраивает, так как невозможно определить, какой из них точный, если либо.

Фрагменты кода и конфигурация триггера (взяты прямо из документации amp-audio, дополненной моей собственной *) 1016 * 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"
  }
}

В качестве обходного пути я также попытался включить и использовать пользовательский JS через компонент amp-script. Использование этого с 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, которое может поймать менеджер тегов и журнал. Любой совет, понимание или направление приветствуется!

...