Video data with Google Analytics

[chrispepper1989]

I want to capture video engagement data in google analytics, I know that Dato uses MUX under the hood, so I assume I need to read up on

Introduction to Mux Data | Mux

And then work out how it ties “VideoPlayer” ?

I just wanted to make sure I was heading in the right direction ?

Originally I was just going to hand roll it like so:

<VideoPlayer
              
                thumbnailTime={0}
                poster={videoThumbnail}
               onEnded={onVideoEnd}
                onPlay={onVideoPlay}
                onTimeUpdate={onVideoProgress}
                onPause={onVideoPause}
                 data={datoVideo}></VideoPlayer>

const onVideoProgress = (event: any) =>
    {


        //todo add debounce
        recordUse({name: "Video_Watched_To", attributes: {page: window.location.pathname, userGuid:getUserGuid(), video:datoVideo?.title ??"", time:event.target.currentTime}});

    }
    const onVideoPlay = (event: any) =>
    {             


        recordUse({name: "Video_Played", attributes: {page: window.location.pathname, userGuid:getUserGuid(), video:datoVideo?.title ??"", time:event.target.currentTime}});

    }
    const onVideoEnd = (event: any) =>
    {        


        recordUse({name: "Video_Watched_To_End", attributes: {page: window.location.pathname, userGuid:getUserGuid(), video:datoVideo?.title ??"", time:event.target.currentTime}});

    }

    const onVideoPause = (event: any) =>
    {
  
        recordUse({name: "Video_Paused", attributes: {page: window.location.pathname, userGuid:getUserGuid(), video:datoVideo?.title ??"", time:event.target.currentTime}});
        
    }

Any examples with VideoPlayer from “react-datocms”, would be super helpful!

-Thanks, Chris

[roger]

Hmm, sorry @chrispepper1989, I’m not sure about this one off the top of my head.

Let me talk to Mux about it to try to get you some clarity!

---

Some preliminary info (in case you want to start digging and experimenting on your own):

• react-datocms’s <VideoPlayer> is just a thin wrapper over Mux’s own player, which should already have built-in Mux Data integration: https://www.mux.com/docs/guides/player-core-functionality#mux-data-integration
• However, I don’t know if you can access that data at all. Typically it lives inside the Mux dashboard, I think, but since we’re whitelabeling/reselling them for you, I don’t think you have a specific Mux “sub dashboard” for your usage only
• They do have a way to stream this analytics data to AWS Kinesis, but I’m not familiar enough with it and I also don’t know if that would work for you as a sub-customer of ours, rather than having your own Mux account.

My hunch is that your approach (just sending events directly to GA as they occur) would be easier than trying to get the data out of Mux Data and into GA, but I’m not 100% sure on that. Let me check with Mux and see if they have any ideas.

Pinging @AdamJ_Mux in case he’s still around here… but I’ll also reach out to them via our internal comms

[roger]

Hi Chris,

Turns out you can actually just create your own Mux Data account: https://www.mux.com/data

And then provide a custom envKey property to our <VideoPlayer/> to send analytics to your own account instead:

<VideoPlayer
    disableTracking={false} // We normally default it to true
    envKey={myOwnMuxDataEnvKey} // Your own env key from your Mux Data dashboard at https://dashboard.mux.com/environments
    debug={true} // (Optional) Shows analytics events in the browser console
    data={videoData.data.upload.video} // Mock of DatoCMS CDA query response. Really just needs `muxPlaybackId`
/>

Full working example: https://stackblitz.com/~/github.com/arcataroger/mux-data-test

Then you see that in your Mux Data dashboard:

From there, you can stream it to external systems (but that part’s up to you): https://www.mux.com/docs/guides/export-monitoring-data

I don’t see a ready-built way to easily stream events to Google Analytics. The streaming they provide is to Kinesis. You can try to write your own exporter/streamer, or it might still be easier to just bypass Mux Data (which, to be clear, isn’t just settings on the Mux Player but their own analytics service) and send data directly to GA from clientside events.

Mux Data looks pretty good, though. If you don’t absolutely need data in GA, might be easier to just use that for video data?