Streaming Videos > 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, Svelte, and Astro (which is just a thin wrapper around mux-player).

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.

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:

• <VideoPlayer/> component for React & Next.js

• <VideoPlayer/> component for Vue & Nuxt

• <VideoPlayer/> component for Svelte & SvelteKit

• <VideoPlayer/> component for Astro

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

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), 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
/>

For an example, please see this Stackblitz demo.

Viewing your Mux Data Analytics

If the setup succeeded, try viewing your video for a few seconds. Analytics should start trickling into Mux Data. If you enabled debug={true}, you'll also see this in the browser console.

Now, just return to the Mux dashboard (dashboard.mux.com) and choose your environment again. You should start seeing analytics!

Documentation and Troubleshooting

Official Documentation

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: https://www.mux.com/docs/guides/data

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 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 still provide many useful insights into your viewership and engagement. Using both together can help you optimize both your technical delivery and your editorial 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: https://www.mux.com/support/human