Add Google Analytics to Your Cloudinary Video

Ifeoma Imoh

Google Analytics is a free tracking tool provided by Google that shows how visitors interact with your website. This post will discuss how to track user engagements and events on a specific section or a component in our website using a Cloudinary video player. We will also learn more about google analytics and how to use it to track user activities.

Here is a link to the demo CodeSandbox.

Prerequisites

First, sign up for a free Cloudinary account if you don’t have one already and upload a video to your account. Displayed on your account’s Management Console (aka Dashboard) are important details: your cloud name, API key, etc.

Project Setup

Run this command in your terminal to create a React app in a folder called video-analytics:

1npx create-react-app video-analytics

Next, run this command to install the dependencies we need for this project:

1npm install cloudinary-core cloudinary-video-player

Video Player Component

In your src directory, create a folder called components, then create a file called videoPlayer.js inside the components folder and add the following to it:

1import { Cloudinary } from "cloudinary-core";
2import "cloudinary-video-player";
3const cld = new Cloudinary({ cloud_name: "ifeomaimoh", secure: true });
4function MyPlayer() {
5 const myVid = cld.videoPlayer("player", {
6 bigPlatButton: "true",
7 controls: "true",
8 });
9 myVid.source("production_ID_3741671_nknpda");
10 return;
11}
12export default MyPlayer;

In the code above, we created an instance of Cloudinary and passed our cloud name. We also created an instance of a video player using the videoPlayer method, and it returns a player object. The method accepts an id (id of the video element), which tells Cloudinary where to embed the video player. It also accepts some configurations. Next, we call the source method and pass the public id of a video uploaded to Cloudinary as an argument.

Next, let's use the MyPlayer component in our App.js file.

1import "./App.css";
2import { useEffect } from "react";
3import "cloudinary-video-player/dist/cld-video-player.min.css";
4import MyPlayer from "./Components/VideoPlayer";
5export default function App() {
6 useEffect(() => {
7 MyPlayer();
8 }, []);
9 return (
10 <div className="App">
11 <h2>Tracking user activities on a cloudinary video</h2>
12 <div className="vid-container">
13 <video
14 controls
15 muted
16 className="cld-video-player cld-fluid"
17 id="player"
18 />
19 </div>
20 </div>
21 );
22}

We imported our MyPlayer component and called it inside a useEffect hook. We then embedded the video player by adding an HTML video element and passed the id referenced in the videoPlayer method.

If we go over to the browser, we would see a functional video player.

Setting up Google Analytics

We need to host our project and get a URL that will be used to set up the data stream. See here for how to deploy your site on Netlify.

Now, create a free account here. After creating the account:

  • Click on the Start measuring button.

  • Add an account name, and click the Next button.

  • Add a property name and click the show advanced options link.

  • Enable the toggle button for the Create a Universal Analytics property and provide the URL for your deployed project.

  • Check your related business information from the list provided and click the Create button.

Add Google Analytics

First, let’s specify the events we want to monitor, including additional sub-settings, like timesplayed and percentsplayed in the videoPlayer function.

Update your VideoPlayer.js file with the following:

1import { Cloudinary } from "cloudinary-core";
2import "cloudinary-video-player";
3const cld = new Cloudinary({ cloud_name: "ifeomaimoh", secure: true });
4function MyPlayer() {
5 const player = cld.videoPlayer("player", {
6 bigPlatButton: "true",
7 controls: "true",
8 analytics: {
9 events: ["play", "pause", "ended", "error"],
10 },
11 });
12 player.source("8ba64b04-f0e6-43af-a6a0-d7815646332b_jdh3ty");
13 return;
14}
15export default MyPlayer;

In the code above, we added the analytics prop with an array of events.

Now we need to include the google analytics tracking snippets with our tracking ID in the head tag of our index.html file. Let's get the tracking ID from our google analytics dashboard. Click on the Admin link on your dashboard, click on Property Setting and copy the tracking Id.

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <meta name="theme-color" content="#000000" />
7 <meta
8 name="description"
9 content="Web site created using create-react-app"
10 />
11 <script>
12 (function (i, s, o, g, r, a, m) {
13 i["GoogleAnalyticsObject"] = r;
14 (i[r] =
15 i[r] ||
16 function () {
17 (i[r].q = i[r].q || []).push(arguments);
18 }),
19 (i[r].l = 1 * new Date());
20 (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
21 a.async = 1;
22 a.src = g;
23 m.parentNode.insertBefore(a, m);
24 })(
25 window,
26 document,
27 "script",
28 "https://www.google-analytics.com/analytics.js",
29 "ga"
30 );
31
32 // Add your tracking ID here.
33 ga("create", "UA-224784778-1", "auto");
34 ga("send", "pageview");
35 </script>
36 <title>React App</title>
37 </head>
38 <body>
39 <noscript>You need to enable JavaScript to run this app.</noscript>
40 <div id="root"></div>
41 </body>
42</html>

With this, we've successfully added google analytics to our project. We can now watch and monitor user engagements and events in our project from our google analytics dashboard.

We can see active users from the real-time report.

In the real-time event, we can see that our user-triggered different events; the Event Category is Video, and the actions are play and Pause.

Find the project here on GitHub.

Conclusion

In this article, we learned how to add google analytics to our application to provide valuable insights about our website's visitors, like track critical data about how and when customers watch our videos.

Resources you may find helpful:

Ifeoma Imoh

Software Developer

Ifeoma is a software developer and technical content creator in love with all things JavaScript.