User insights are interpretations of quantitative and qualitative data collected via feedback and other sources, then evaluated to make choices.
They are among the most effective tools used to discover behavioral trends, increase marketing effectiveness, provide rich user experiences, and support service activities.
This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js. We’ll utilize the Cloudinary video player to render videos and handle analytics on them.
The complete project is on CodeSandbox. Fork it to get started quickly.
The source code is on GitHub.
For this project, the following requirements apply:
- A basic understanding of React.js and Gatsby.js
- A Google account (create one here)
- A Cloudinary account (create one here)
Gatsby is a lightweight and adaptable framework based on Node.js with React and GraphQL that allows us to create and deploy headless websites that drive more traffic, convert better, and generate more income. It also supports Server-Side Rendering and Deferred Static Generation for rendering dynamic websites on a Node.js server.
To create a Gatsby.js app, we run the following command in our terminal:
npm init gatsby
It will request a project title and the directory name for the app. Continue to follow the prompts to select a preferred language (JavaScript or TypeScript), CMS, styling tools, and other features. Then Gatsby.js will ask to create a Gatsby app in the directory of the project:
Create a new Gatsby site in the folder <project-name>
Shall we do this? <Y/n> : Yes
Code language: JavaScript (javascript)With our Gatsby app fully built, we proceed to install the required dependencies.
Navigate into the project directory and install gatsby-plugin-google-analytics, Cloudinary React SDK, and Cloudinary URL-Gen SDK.
cd <project-name>
npm install --save gatsby-plugin-google-analytics @cloudinary/react @cloudinary/url-gen
Code language: HTML, XML (xml)@cloudinary/react and @cloudinary/url-gen are required dependencies to render the video player. Also, the gatsby-plugin-google-analytics dependency adds the Google Analytics tracking script to our app by default.
Running npm run develop starts the project on the local development server at https://localhost:8000 in our browser.
Cloudinary is a cloud-based picture and video management service that includes uploads, storage, manipulations, optimizations, and distribution. It also enables developers to include video players in their apps that properly handle video events.
After successfully creating an account, Cloudinary will redirect us to our account’s dashboard page, where we can upload the demo video.
Click on the “Upload” button as shown above and select the video file to be uploaded.
To use Cloudinary features in our Gatsby.js app, import the required components from Cloudinary in the video-player.js file.
//src/components/video-player.js
import "cloudinary-video-player/dist/cld-video-player.js";
import "cloudinary-video-player/dist/cld-video-player.min.css";
import { AdvancedVideo } from "@cloudinary/react";
import { Cloudinary } from "@cloudinary/url-gen";
Code language: JavaScript (javascript)Then, embed the Cloudinary video player using the AdvancedVideo element.
//src/components/video-player.js
const VideoPlayer = () => {
return(
<div className="container">
<AdvancedVideo
cldVid={myVideo}
controls
width="640"
height="480"
/>
</div>
)};
export default VideoPlayer;
Code language: JavaScript (javascript)As shown above, we’ll also apply some configuration parameters to the video. The parameters do the following:
-
cldVid– Video player attribute to hold the video’s Id -
widthandheight– Displays the video with a width of 640px and a height of 480px -
controls– Gives the video a set of controls such as play, pause, skip, fullscreen, etc.
After configuring the video player, the demo application will look like this:
In the VideoPlayer component, we create a Cloudinary instance once the page loads.
const cld = new Cloudinary({
cloud: {
cloudName: "OUR-CLOUD-NAME",
analytics: {
events: ["play", "pause", "ended", "error", "mute", "unmute"],
},
},
});
const myVideo = cld.video("OUR-DEMO-VIDEO");
Code language: JavaScript (javascript)The variables and parameters in the data object above do the following:
-
cld: Holds the new Cloudinary instance we’ll create -
cloudName: Gives us access to Cloudinary. To get the cloud name, go to Cloudinary’s Account Details section -
analytics: Shows how many times users played, paused, or watched the video -
cld.video: Serves as a source to access the video
To send data to Google Analytics, we need to deploy the app and specify its URL in Google Analytics. We’ll make use of Netlify to deploy the application.
Netlify is a cloud computing company that provides web hosting and serverless backend services for static websites and web apps. It is simple, quick, and automatically allows continuous deployment for projects launched from Git repositories.
The URL of the deployed app is located here. Check out this article to learn how to host a website on Netlify. Next, we’ll send real-time data from the application to Google analytics.
Google Analytics is a web analytics service that offers statistics and essential analytical tools for SEO and marketing purposes. The service is a component of the Google Marketing Platform and is accessible to anyone with a Google account. Google Analytics is used to monitor website performance and gather visitor data.
To get real-time data from the app, we’ll need to create a Google Analytics account. Create a free one here and check out this article to set up the Google Analytics account.
After setting up the account, copy the Tracking ID of the account’s property.
Then, we’ll add a gatsby-plugin-google-analytics configuration to the gatsby-config.js file located in the project’s root directory.
module.exports = {
siteMetadata: {
siteUrl: `https://www.domain.tld`,
},
plugins: [
// other plugin configurations go in here
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: "GOOGLE-ANALYTICS-TRACKING-ID",
head: true,
},
},
],
};
Code language: JavaScript (javascript)The gatsby-plugin-google-analytics configuration consists of the Tracking ID we got from our Google Analytics property settings. In addition, we inserted the head property, which places the analytics tracking code into the HTML code’s head tags by default.
Another configuration requirement is the excluding of the Cloudinary video player module during the Gatsby build process. The module requires the window API, which is not available during the construction of our app’s optimal build.
Using the setWebpackConfig API, we omit the module from the gatsby-node.js file we will create in the project’s root directory.
const path = require("path");
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
actions.setWebpackConfig({
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
});
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /cld-video-player/,
use: loaders.null(),
},
],
},
});
}
};
Code language: JavaScript (javascript)First, we added the src directory to the list of directories. Then, Webpack will check for modules to resolve. We’ll check the build process stage to see if it was in the ‘build-html’ stage before applying a rule to the cld-video-player module. This rule excludes the module during the build using a null loader.
We have successfully integrated Google Analytics into our project. To test this, go to the Google Analytics sidebar on the left and choose “Home” to see how many users interacted with our app.
As shown above, the sidebar displays the number of active users in the last 5 minutes. To view the Events stream in real-time, navigate to the Events option in Google Analytics’ Realtime sidebar.
At the bottom, we can see the user triggered certain events like when the video starts or ends during a given period.
This article discusses integrating Google Analytics into web applications to track user engagements, what actions users take, and what events users trigger.
We may find these resources useful: