Menu
Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
Integrating analytics hooks into JavaScript video players enables the collection of valuable data about video interactions and user behavior. This data can be used to improve the user experience, optimize content delivery, and gather insights on engagement and performance. Video player analytics commonly include tracking events like play, pause, seek, and end, and collecting data such as watch time, playback errors, and audience retention. Key Analytics Events in Video Players To track meaningful interactions, various video player events need to be captured. These include: Play : Triggered when a video starts or resumes playing. Tracking the play event helps to measure engagement levels. Pause : Fired when the video playback is paused. Knowing when users pause the video can help determine points where users lose interest. Seek : Activated when users skip forward or backward in the video. Tracking seeks allow you to understand where users interact with specific sections of the content. Ended : This event occurs when the video finishes playing. It helps measure content completion rates. Error : Captures when playback errors occur. Error events are critical for debugging and ensuring smooth playback. Example: Implementing Play, Pause, and End Events in Video.js
Explanation : The addEventListener method is used to attach event listeners to the video element. Each listener captures specific events (play, pause, ended) and logs or sends data to an analytics system for further analysis. Event data can be customized to include additional metrics, such as time played or the specific video segment viewed. Tracking User Interaction Data In addition to basic player events, you can track more granular data, such as how long users watch the video, their interactions with controls, and any skipped sections. To collect these analytics, you need to calculate the total time watched and capture the time at which a user pauses, seeks, or skips. Example: Tracking Watch Time let startTime = 0; const videoPlayer = document.getElementById('myVideo'); // Track when video starts videoPlayer.addEventListener('play', function() { startTime = videoPlayer.currentTime; }); // Calculate watch time when video is paused or ended videoPlayer.addEventListener('pause', function() { const watchTime = videoPlayer.currentTime - startTime; console.log('Watch time:', watchTime); // Send watch time data to analytics system }); videoPlayer.addEventListener('ended', function() { const watchTime = videoPlayer.currentTime - startTime; console.log('Total watch time:', watchTime); // Send watch time data to analytics system }); Explanation : When the pla y event occurs, the startTime is recorded. The pause and ended events calculate the difference between the current playback time and startTime, providing the total watch time for that session. The watch time data is then sent to the analytics system for storage and analysis. Implementing Analytics in Custom Video Players Custom video players that use JavaScript can also capture more advanced analytics events like full-screen mode, quality switches, and buffer times. Implementing analytics hooks for these events helps identify user preferences and track performance issues such as buffering delays or low-quality streams. Example: Tracking Full-Screen Mode const videoPlayer = document.getElementById('myVideo'); // Track full-screen mode videoPlayer.addEventListener('fullscreenchange', function() { if (document.fullscreenElement) { console.log('Entered full-screen mode'); // Send full-screen data to analytics system } else { console.log('Exited full-screen mode'); // Send full-screen data to analytics system } }); Explanation : The fullscreenchange event is triggered when the player enters or exits full-screen mode. This allows tracking of how often users switch to full-screen mode, which can provide insights into how users prefer to consume video content. Integrating with External Analytics Tools For more advanced analytics, integrate your video player with external tools such as Google Analytics, Mixpanel, or custom tracking systems. These tools can help aggregate data from multiple video sessions and generate insights about user behavior, content performance, and engagement trends. Example: Sending Analytics Data to Google Analytics videoPlayer.addEventListener('play', function() { // Track play event in Google Analytics ga('send', 'event', 'Video', 'Play', 'Video Title'); }); Explanation : The ga() function is used to send data to Google Analytics when the play event is triggered. This method allows you to track video interactions across your entire platform. Tracking Video Quality Changes Monitoring video quality changes can provide insight into how well the video content is being delivered, particularly in adaptive bitrate streaming scenarios. Quality changes often occur in response to network conditions, and tracking these changes allows developers to understand the impact of varying video quality on user experience. Example: Tracking Quality Changes in Adaptive Bitrate Streaming: const videoPlayer = document.getElementById('myVideo'); // Assume the player has multiple quality levels videoPlayer.addEventListener('qualitychange', function() { console.log('Quality changed to: ', videoPlayer.videoQuality); // Send quality change data to analytics system }); Explanation: qualitychange: This event is hypothetical, as video players don't inherently provide this event. In practice, you can create custom events or hooks in your player to track these changes. The videoQuality attribute can be a custom property representing the current quality level. By tracking quality changes, you can understand how often the video switches between different resolutions and how network conditions affect playback. Implementing User Engagement Tracking User engagement tracking is crucial for understanding how viewers interact with content. This includes how long users watch videos, whether they skip parts of the video, or if they interact with additional features like comments or shares. These metrics help evaluate content performance and the overall user experience. Example: Tracking Video Skip Events: const videoPlayer = document.getElementById('myVideo'); let skipStart = 0; videoPlayer.addEventListener('seeked', function() { const skippedTime = videoPlayer.currentTime - skipStart; if (skippedTime > 5) { console.log('User skipped ' + skippedTime + ' seconds'); // Send skip event data to analytics system } }); videoPlayer.addEventListener('seek', function() { skipStart = videoPlayer.currentTime; }); Explanation: The seek event is triggered when the user skips to a different part of the video, and the seeked is triggered when the user finishes seeking. By tracking the amount of time skipped, developers can identify parts of the video that users tend to skip, indicating sections that may need optimization or improvement. Buffering Time Tracking Buffering time can significantly affect the user experience, especially in live streaming or on-demand content. Tracking when and how often the player buffers provides valuable data on potential performance bottlenecks. By logging buffering events, you can optimize the content delivery system to minimize interruptions. Example: Tracking Buffering Time: const videoPlayer = document.getElementById('myVideo'); let bufferStart = 0; let bufferEnd = 0; videoPlayer.addEventListener('waiting', function() { bufferStart = videoPlayer.currentTime; console.log('Buffering started at time: ' + bufferStart); }); videoPlayer.addEventListener('playing', function() { bufferEnd = videoPlayer.currentTime; let bufferDuration = bufferEnd - bufferStart; console.log('Buffering duration: ' + bufferDuration + ' seconds'); // Send buffering data to analytics system }); Explanation: The waiting event triggers when the video pauses for buffering, while the playing event signals when the video resumes after buffering. The buffer duration is calculated by measuring the difference between bufferEnd and bufferStart . Buffering data helps developers identify areas for performance improvement, such as reducing startup time or optimizing CDN configurations. Best Practices for Analytics in Video Players Use Throttling : Minimize the performance impact by throttling analytics events, especially for high-frequency events like timeupdate . Data Privacy : Ensure that any user data captured through analytics hooks complies with data privacy laws such as GDPR. Asynchronous Data Sending : Send analytics data asynchronously to avoid affecting the video playback experience. Custom Metrics : Track custom metrics, such as skip rates, video buffering times, and quality changes, to gain deeper insights into user behavior.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
