But to keep things tidy and to have the proper naming convention, I changed more words (for example, I’ve replaced all other “video” words in the code and changed it to “audio”). That is the minimum you need to do in order to adapt the listener to HTML5 audio. So that one word that we need to change is video. If we go back to the MDN’s documentation about media events, you’ll see that those interactions are supported by and elements. It means that the code is looking for elements that are using the HTML tag and will start listening to their events. Spot this line: var videos = document.getElementsByTagName('video') Since there are no numbers of code lines, you should be looking somewhere at 60% mark of his code. Let’s take a quick look at David’s listener code. However, to fully understand the concept of audio tracking, I recommend doing both: reading this article and watching the tutorial. If you prefer video tutorials instead, you can watch a video here. How to track HTML5 audio player with Google Tag Manager: Final words.Custom Event Trigger and Data Layer Variables Create a trigger that activates the listener only when the audio player is present So how do we actually track HTML5 audio player with GTM?.If you want to get familiar with event tracking in Google Analytics 4, you can also refer to this blog post. Note: this blog post teaches how to track events with Universal Analytics. You can also find a GTM recipe here.īut today’s blog post is not about the video. Yes, I’m talking about David Vallejo’s HTML5 video listener that is used to track almost any other video player that is not Youtube or Vimeo (or anything else in the iFrame). Even this Twitter (that I saw today in my feed) confirmed this: Var audioElement = document.getElementById('audio1') ĭocument.getElementById('play').Updated: November 15th. I guess that the majority of the GTM community is familiar with a custom event listener that probably already has the status of legendary. The goal is to start play the sound when the user click on the play button, and pause the button when the user click on the Stop button. 4.1 Basic Play / Pause exampleįor the beginning, we will simply add an audio file in a page and manage the Play / Pause buttons in JavaScript. Now we’ll see how to manipulate audio with JavaScript. We used the Tag to display the player on the page, and to play the audio file. In this example the browser will request the server only when the user click on the play button. This can be use to minimize server trafic.
0 Comments
Leave a Reply. |