Streaming Video Analytics with Mux Data
If you've seen our article on How to stream videos efficiently: Raw MP4 Downloads vs HLS Streaming , you know that serving HLS (HTTP Live Streaming) video can provide your visitors with a good streaming experience and help you control costs at the same time. These HLS videos are served through our video CDN partner, Mux.
Mux provides a detailed frontend analytics service for your streaming videos: Mux Data.
Some quick setup on your frontend is required before analytics data will be available. This page details how to send analytics to Mux Data using our <VideoPlayer/> component for React, Vue, and Svelte. Our component is just a thin wrapper around mux-player, making it easier to use with our Content Delivery API output while still using largely the same parameters as the original.
What is Mux Data and how is it different from the DatoCMS Project Usages screen?
In your Project Usages section, DatoCMS provides basic information about your HLS streams. We show you the # of streamed minutes per file:
If you want more detailed video analytics, you'll have to use a third-party solution. Luckily, Mux already provides such a service, Mux Data.
Once set up, Mux Data provides you detailed information on your video views:
What metrics are tracked by Mux Data?
Mux Data tracks technical device details (user agents, OS and player details, codecs, etc.), visitor engagement metrics (unique viewers, play times, percentage completions, etc.) and much more.
For the full, updated list of metrics tracked by Mux Data, please see Mux Data: Technical Specs
How much does Mux Data cost? How am I billed for it?
Mux Data is a separate service offered by Mux directly. It is not a part of your DatoCMS subscription and does not affect your billing here in any way.
As of September 2025, Mux Data is free up to 100k views/month. No credit card is needed to sign up.
You can see more pricing details at https://www.mux.com/pricing/data.
If you choose to subscribe to a Mux Data paid plan, you will be paying Mux directly, under your separate account with them.
How to use Mux Data with DatoCMS
It's a simple process: Sign up for a Mux Data account (it's free and easy), then add your Mux Data env key as a parameter to your DatoCMS <VideoPlayer/> or the official <mux-player/> component.
Here is the step-by-step:
Use HLS Streaming
Ensure that you're serving videos using HLS (HTTP Live Streaming), not the raw .MP4s. We have a guide about this: How to stream videos efficiently: Raw MP4 Downloads vs HLS Streaming
Set up <VideoPlayer/> Component
If you're not yet using our <VideoPlayer/> component, follow one of these guides to set it up on your frontend:
If you prefer, you can also use the official mux-player instead: https://www.mux.com/docs/guides/mux-player-web
Our <VideoPlayer/> components are just a thin wrapper over the official player, sharing most of the same parameters.
Sign up for Mux Data
Then, sign up for a Mux Data account. This happens outside of DatoCMS, on the Mux Data site itself. This is completely separate from your DatoCMS account.
Copy your Mux Data env key
After you've signed up, log in with your credentials. In the Mux dashboard, hover over your team name and go to the "All Environments" screen:
You should see one or more environments with their env keys in the bottom right. Click to copy one of them (for the environment you want to monitor, probably "Production"):
Please note that these Mux environments are not related to your DatoCMS project environments. They are just internal names used by Mux Data, which you can assign to your different frontend environments if you have them.
Add your Mux Data env key to the <VideoPlayer/> component
Now that you have your env key (it should be an 8-digit alphanumeric key like abcd1234), you can simply supply it to your <VideoPlayer/> component:
<VideoPlayer envKey={myOwnMuxDataEnvKey} // Your own env key from your Mux Data dashboard at https://dashboard.mux.com/environments disableTracking={false} // We normally default it to true, so you have to explicitly enable it data={yourVideoData} // The video object you get back from our CDA. Must include `muxPlaybackId`. // debug={true} // (Optional) Shows you analytics events in the browser console // {...rest} // Anything else you needed to add. See https://www.mux.com/docs/guides/player-api-reference/>For an example, please see this Stackblitz demo.
See also: Mux Player API Reference for a list of all accepted parameters
Viewing your Mux Data Analytics
If the setup succeeded, try viewing your video for a few seconds. Analytics should start trickling into Mux Data. Now, just return to the Mux dashboard (dashboard.mux.com) and choose your environment again. You should start seeing analytics!
If you enabled debug={true}, you'll also see these logging attempts in the browser console as they're sent, which can be especially useful if the analytics aren't showing up as expected (probably because of adblock; see the troubleshooting section below).
Documentation and Troubleshooting
Official Documentation
Mux Data: Because Mux Data is a service offered by our partner and not DatoCMS directly, please see the official Mux Data documentation for detailed usage information: Introduction to Mux Data.
Our<VideoPlayer/> component: Please see the readmes for the React, Vue, or Svelte packages.
The original mux-player that our component wraps: Mux Player for Web documentation and API reference. Note that the React version has similar but slightly different parameters compared to the web component version.
Not seeing anything in your Mux Data? It may be ad-blocked
If you're sure you've followed the above setup steps and still aren't seeing any analytics in Mux Data after a few minutes, the most likely cause is ad-blocking. Mux Data is an entirely clientside script that runs in the user's browser, and many adblockers (like uBlock Origin) will block it by default.
For testing, please disable any browser extensions and/or watch the video in an Incognito/Private window.
For production usage, you should also keep in mind that your own visitors may also be using ad blockers. Thus, they may not send you any Mux Data events at all, and the metrics you do see may be skewed towards users who aren't blocking ads. (The same would apply to any other clientside user analytics tracking).
Seeing different numbers in Mux Data vs your DatoCMS Project Usages?
Because Mux Data is clientside and runs in your users' browsers, it may be affected by ad blocking, network policies, etc. These can all prevent analytics events from being successfully collected.
In comparison, the streaming minutes measured in your DatoCMS Project Usages is an authoritative serverside log tracked directly by Mux's CDN.
Thus, for billing purposes, the DatoCMS Project Usages section is considered the authoritative source of truth for accurately counting streamed minutes.
Still, Mux Data — even though it only tracks some percentage of your viewers and not all — can provide many additional insights into your viewership and engagement. Using both together can help you optimize your technical delivery and editorial engagement. Our serverside records tell you exactly how much time each video was watched, while Mux Data gives you much more fine-grained metrics on their delivery and engagement.
Need help?
Although Mux Data is offered by our partner Mux, we here at DatoCMS still very much value you as our shared customer 🙂
As such, if you run into issues with any of this, please feel free to reach out to our support team or check our forum and we'll do our best to help!
Or if you're sure it's something out of our control, you can also reach out to Mux directly: Open a ticket with Mux