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.
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.
Run this command in your terminal to create a React app in a folder called
npx create-react-app video-analytics
Next, run this command to install the dependencies we need for this project:
npm install cloudinary-core cloudinary-video-player
src directory, create a folder called
components, then create a file called
videoPlayer.js inside the
components folder and add the following to it:
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
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
If we go over to the browser, we would see a functional video player.
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.
First, let’s specify the events we want to monitor, including additional sub-settings, like
percentsplayed in the videoPlayer function.
VideoPlayer.js file with the following:
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.
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.
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: