UXWizz
WebsitePricingDemoTwitter (X)
  • Introduction
  • 🛠️ Installation
    • Requirements
      • Limitations
      • Server specs (CPU, RAM)
    • Installation guide
      • Uploading the script
      • Creating a MySQL database
      • Running the installer
    • Install on a new server
      • Ubuntu 20.04 (or higher)
      • DigitalOcean
    • Docker
      • Via Docker Compose
      • Standalone Docker image
    • Adding the tracking code
      • Automatic SPA pageview tracking
      • Add tracker to Next.js App
      • Add tracker to React Router App
    • Optimization tips
      • MySQL/MariaDB
      • Auto-delete old data (cron jobs)
      • Apache
    • Frequently Asked Questions
  • 🔧JavaScript API
    • Tags
    • Events
    • Hooks/callbacks
    • Other API functions
    • Session Recording
      • Ignore specific elements
  • 📖Guides and features
    • Goals (NEW!)
    • Ask AI (NEW!)
    • Basic usage
    • A/B testing
    • Usage tips
    • Dashboard user access level
    • Resetting the admin password
    • Database querying
    • Technical details
      • IP Geolocation
    • Troubleshooting
      • Agency
        • MultiDB
      • Dashboard
        • Refreshing dashboard sub-page leads to 404 error
        • Website iframe not loading (x-frame-options)
        • License says "invalid"
        • Updating Fails
      • Tracking
        • No data is being recorded
        • Can't include tracker via Google Tag Manager
        • The A/B test JS file is missing
      • WordPress
        • Cloudways 403 Forbidden screen on WordPress
        • NGINX 403 Forbidden screen on WordPress
    • Extending the dashboard
    • Support
    • Migrating to a new server
  • 🎓Useful Examples
    • Feedback form (polls)
    • Tracking 404 Pages
    • Tracking UTM parameters
    • Tracking Google Ads GCLID
    • Storing user device types
    • Track video playback
  • 📜About
    • Changelog
    • Personal Data Information
    • Privacy Policy (uxwizz.com)
    • Licenses and pricing
    • [Deprecated] License Subscriptions
Powered by GitBook
On this page
  • HTML5 <video> playback tracking example
  • Creating a re-usable video playback tracking function

Was this helpful?

  1. Useful Examples

Track video playback

PreviousStoring user device typesNextChangelog

Last updated 8 months ago

Was this helpful?

Let's say you have a video on your landing page, and you want to know if people watched it. We could track the following actions:

  • User started playing the video

  • User paused playing the video (we want to know how far they watched before pausing)

  • User reached the end of the video

We can use a combination of and for tracking those actions:

HTML5 <video> playback tracking example

<video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
    <script>
       (() => {
            var vid = document.currentScript.parentElement;
            // Track video paused as both a Tag and an Event
            vid.addEventListener('pause', function() {
                UST.addTag('video_paused');

                UST.addEvent({
                    category: 'INTERACTION', // required
                    action: 'VIDEO_PAUSED', // required
                    label: 'my hero video',
                    value: Math.round(vid.currentTime),
                });
            });

            // Track video play started and ended as Tags
            vid.addEventListener('play', () => UST.addTag('video_play'));
            vid.addEventListener('ended', () => UST.addTag('video_end'));
        })();
    </script>
</video>

This code works well if you have only one video, if you want to track many different video elements, see below 👇

Creating a re-usable video playback tracking function

To track multiple videos, you could also add this code to your JS scripts:

UST.trackVideo = (vid) => {
    // Track video paused as both a Tag and an Event
    vid.addEventListener('pause', function() {
        UST.addTag('video_paused');

        UST.addEvent({
            category: 'INTERACTION', // required
            action: 'VIDEO_PAUSED', // required
            label: 'my hero video',
            value: Math.round(vid.currentTime),
        });
    });

    // Track video play started and ended as Tags
    vid.addEventListener('play', () => UST.addTag('video_play'));
    vid.addEventListener('ended', () => UST.addTag('video_end'));
}

After this, to use it, you could do:

document.querySelectorAll('video').forEach(UST.trackVideo);
🎓
Tags
Events