I am working with the amp-audio component for a project, and need to be able to set up tags and triggers in Google Tag Manager track when the user plays/pauses the audio, and when the audio completes. From the documentation for amp-audio, it claims that I can utilize the Audio Play and Pause triggers to track the events via amp-analytics. However, this does not work to trigger any analytics. Further, the amp-analytics documentation only lists video-* for media-related triggers, with no reference whatsoever anywhere on the page to anything related to amp-audio. This conflict of documentation is not only confusing, but frustrating since there's no way to tell which is accurate, if either.
Code snippets and trigger configuration (taken straight from the amp-audio documentation, updated with my own ids), which does not work:
<amp-audio id="my-amp-audio-player" controlsList="nodownload" height="50" width="auto">
...
</amp-audio>
...and...
"triggers": {
"audioPlay": {
"on": "audio-play",
"request": "event",
"selector": "#my-amp-audio-player"
},
"audioPause": {
"on": "audio-pause",
"request": "event",
"selector": "#my-amp-audio-player"
}
}
As a workaround, I've also tried to include and use custom JS via the amp-script component. Using this with amp-audio has proven fruitless, and I've also tried to use a straight-up audio tag in place of amp-audio. Using the pure audio tag gives me the ability to target the audio player and capture play, pause, and ended events...however, trying to do anything that would result in a successful AMP trigger ends up throwing the "terminated due to illegal mutation" error as documented in the amp-script documentation.
Code snippets for a click event trigger set up in Google Tag Manager:
Markup:
<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
})
Current Status:
No matter which implementation or combination of uses I implement, nothing I've tried has been able to successfully trigger and catch an amp-audio or audio event that Tag Manager can catch and log. Any advice, insight, or direction is appreciated!