![javascript html5 video player javascript html5 video player](https://i0.wp.com/www.cssscript.com/wp-content/uploads/2018/09/Dynamic-Video-Playlist-Player-In-JavaScript.png)
![javascript html5 video player javascript html5 video player](https://i2.wp.com/www.cssscript.com/wp-content/uploads/2018/04/vLite.js.png)
Every time a “video” event is pushed to the data layer (and we see it in the preview mode), we want to fire a GA4 tag (that we will create later). In our case, we are going to use:įor each one of them, we need to create a separate Data Layer Variable. Let’s go to Variables > New > Data Layer Variable and enter the following settings:ĭo the same thing for the rest of the data points you want to use (video_provider, video_percent, video_title). If you are seeing all of this as I am, then we can continue.ĭata Layer Variables, Custom Event TriggerĮven though we have that video data in the Data Layer, we cannot use it until we create variables for each data point that we plan to use. You will see some information about the interaction. You should see a bunch of video events there.Ĭlick one of them and expand the dataLayer.push. Play it, watch for a bit (at least 25% of the video length), pause. Then go to your website and interact with the HTML5 video player. Save all changes in your GTM container and then click the Preview button in the top-right corner of the GTM interface and enable the preview mode.įirst of all, in the preview mode, you should see that your Custom HTML tag has fired once the page loaded. In Google Tag Manager, go to Variables > New > Custom JavaScript and paste the following code: function () Īdd the previously created Window Loaded trigger to this tag. That can be done with the Custom JavaScript variable. Instead of firing the listener on every page, we will be firing it only on those pages where the HTML5 player is actually present.
![javascript html5 video player javascript html5 video player](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/simple-video.png)
#Javascript html5 video player code
The listener that we are going to use consists of 100+ lines of code and if you are working with GTM, you should always try to optimize the setup so that it affects the page loading/performance as little as possible. But before we create this tag, we need to create a Custom JavaScript variable. Originally, this solution was created by David Vallejo but I have added some modifications to make the tracking more convenient with Google Analytics 4. The most important part of this setup is a custom code that is designed to keep looking for HTML5 video interactions. If you are in a hurry, I have prepared a GTM container template that you can import, configure and then it will start tracking embedded HTML5 video players + send the data to GA4.Ĭustom JavaScript variable + Auto-event listener