Video Tracking With Google Analytics Made Simple

Most web analytics only consider page interactions. But what if the main content on your page is a video? You’d want to know when and for how long your viewers are interacting with it, when they paused to take a closer look, and when they skipped content because it wasn’t relevant to them. All those and many other reasons account for why you must not only analyze open and visit rates, but also drill down into the video content.

Nowadays, images and videos make up a large percentage of web content. The ability to track certain data points related to those media assets, whether low quality or high quality, is priceless. For images, it could be the number of clicks on a linked image or the number of views. For videos, the number of views is the most widely tracked data point.

So, would the view count alone reveal enough intelligence on user engagement? Obviously not. You need more details on how people interact with your videos.

This is part of a series of articles about Marketing videos.

In this article:

• Cloudinary Video Player
• Installation
• Creation and Configuration of the Build Files
• Setup of Google Analytics

Cloudinary Video Player

Take video playback to the next level with the Cloudinary Video Player. Replete with features like adaptive bitrate for various end-users, recommended content, video playlist, and event analytics, the Cloudinary Video Player accords you sheer control over media and optimal delivery through a multi-CDN approach.

With the Cloudinary Video Player, you can track metrics and events during playback by integrating analysis.js through Google Analytics. Examples of those events are pause, play, load, player load, and percentage played.

This article shows you how to integrate Google Analytics into a Node app that features the Cloudinary Video Player.

Prerequisites

To understand the procedures that follow, you must know HTML, CSS, and JavaScript. You need not be adept with Google Analytics, but a basic grasp of its interface is an advantage.

Installation

First, register for a Cloudinary account and obtain your cloud name (cloud_name) from the account dashboard. That’s all you need to get the demo app running. You’ll create a Google Analytics account later to manage events and analytics.

Since the demo is a Node app, you must have Node.js and NPM globally on your machine. If not, install them. To verify if both tools are in place, type:

#Verify Node
node -v
#Verify NPM
npm -v

The Node.js and NPM version numbers are displayed on your console when you run the tools.

You can build the demo app as a front end without a Node server. However, this demo will have you build a back-end server for the app and host it online on a free ngrok server.

Follow these steps:

1. Create a project folder with a name of your choice. Afterwards, create a Node project (a package.json file) in that folder by typing:

npm init

2. Install the required dependencies, which are—

• Body-parser: for parsing requests. This dependency is available on req.body.
• cors: for enablings cross-origin requests.
• express: for building servers. This is a Node.js framework.
• cloudinary-core: for leveraging Cloudinary capabilities.
• cloudinary-video-player: for taking advantage of the Cloudinary Video Player capabilities.
• lodash: for serving as a JavaScript utility library, as required by the Cloudinary Video Player.

Type this command line to install all the dependencies:

npm install express body-parser cors cloudinary-core cloudinary-video-player lodash --save

The --save flag saves the dependencies to your local project and creates them in your package.json file.

When installation is complete, NPM automatically creates a node_modules folder to house the dependencies. This demo requires four configuration files, which you will set up next.

Creation and Configuration of the Build Files

First, in the root directory, create the four build files: index.html (for housing the Cloudinary Video Player), index.js (for holding the front-end scripts), index.css (for styling), and server.js (for exposing your local server online).

index.html

This is a simple HTML script of your page with a <video> tag in the body element. Since it’s a single page, this single file will suffice:

<html>
<body>
    <div class="container">
        <header>
            <h1>Introducing the Cloudinary Video Player With Analytics</h1>
        </header>
        <main>
            <div class="video-box">
                <video
                class="cld-video-player"
                id="cl-vp">
                </video>
            </div>
            <div class="video-caption">
                <h2>Google Analytics</h2>
                <p>Once  setup is complete, check out Google Analytics to see the captured events.</p>
            </div>
        </main>
    </div>
    <!-- External Stylesheet -->
    <script src="index.js"></script>
</body>
</html>

Note the inclusion of the external stylesheet and the JavaScript file in the code above.

To have Cloudinary functional on your page, add Cloudinary with script tags there. Since you’re installing a CDN through NPM instead of importing a CDN, import your script files from the node_modules folder in your root folder.

Add Cloudinary with this code in the <head> tag of the HTML script:

...
<!-- Dependencies -->
<link href="node_modules/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
<script src="node_modules/lodash/lodash.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>
...

Your HTML file is now all set.

index.js

Create a Cloudinary Video Player instance by adding the code below to the index.js file:

var cl = cloudinary.Cloudinary.new({cloud_name:'xxxxx', secure:true})
//Instantiate the video player
 var myPlayer = cl.videoPlayer('cl-vp',{
     loop:true,
     controls:true,
     autoplay:true,
     analytics:true
 })
 myPlayer.source('merry-christmas', {info:{ title: 'Little Drummer Boy', subtitle:'Pentatonix'}})

The code does the following:

1. Create a new Cloudinary instance and instantiate it with the cloud_name variable from your Cloudinary dashboard.

2. Call the videoPlayer method on your Cloudinary instance.

3. Mount the Cloudinary Video Player on the dom element with the ID of cl-vp, which you created and assigned to the video element in your HTML script earlier.

4. Pass video parameters to an object as a second parameter to the method. Native video controls are also available for the Cloudinary Video Player.

5. Add the analytics property with a value of true to track events.

You can specify which events to track under analytics. For the events you can track, see the related documentation.

6. Specify the source of the video with the .source() method with two parameters: the public ID of any video you’ve uploaded to your Cloudinary account and an object that contains the details of the video: title, subtitle, description, etc. For details on the parameters, see the related documentation.

index.css

Populate the index.css file with the code below:

body, main, header{
    margin: 0px;
    padding: 0px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
h1{
    margin: 0px auto;
    padding: 70px 0px;
    width: 50%;
    text-align: center;
}
header{
    height: 200px;
    width: 100%;
    text-align: center;
    color: white;
    background-color: black;
    border-bottom: 2px solid grey;
}
main{
    width: 80%;
    margin: 20px auto;
}

Your build files are now ready, but you can’t serve files yet. For that you need a node server.

The video is playing well. However, to expose your local server to the internet with the remarkable ngrok tool, you must create a Node server of your own. See the section below.

server.js

1. In the server.js file, import the installed dependencies, after which the following occurs:

• Configuration of the express server.
• Creation of a REST endpoint for your home route in which the index.html file is served.

2. Create the server with this code:

var express = require('express')
var cors = require('cors')
var bodyParser = require('body-parser')
var cloudinary = require('cloudinary-core')
var path = require('path');
var app = express()
var port = 1995;
app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))
app.use(express.static(__dirname + '/'))

//Create an endpoint for the home route.
app.get('/', (req,res) => {
    res.sendFile(path.join(__dirname + '/index.html'))
})
app.listen(port, (err) =>{
    if(err) throw err;
    console.log('The app is booming on the legendary port 1995!')
})

1. Serve your app on the legendary port 1995, hehehe, by typing:

node server.js

2. Open localhost:1995 in the browser to view the webpage—same as the one that was served from your local directory.

3. Deliver your webpage online with ngrok, which exposes your local host to the internet through a specified address. Do the following:

Download ngrok. With your local server running, have ngrok expose it by typing:

./ngrok http 1995

That command line creates a forwarding address, e.g., http://1c69969f.ngrok.io/, at which your app is available.

Setup of Google Analytics

To track videos with Google Analytics, perform these steps:

1. Create an account on Google Analytics with the temporary web address from ngrok (see step 5 in the preceding section).

Google Analytics then issues a unique tracking code, which is displayed in your account’s Admin panel under the Property tab.

2. Add this tracking script for Google Analytics below the head tag of your HTML script:

...
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
    ga('create', 'tracking-code', 'auto');
    ga('send', 'pageview');
</script>
...

Afterwards, Google Analytics starts tracking data immediately. Have a look: Refresh your browser and click Events under Real-Time.

Conclusion

You’ve now learned the importance of understanding user engagement with media assets, especially videos, whether for marketing or for insight into certain trends. The Cloudinary Video Player enables you to monitor user interactions seamlessly and efficiently.

Furthermore, you now know how to embed the Cloudinary Video Player in an HTML page and integrate Google Analytics for video tracking. The data promises to open up opportunities galore.

Feel free to contribute to the code in the repository or leave feedback. And don’t forget to sign up for a free Cloudinary account.