Google Analytics Video Tracking Made Simple

Most web analytics only look at page interactions. But what happens when the major content on your page is a video. You want to know when and how long your users are interacting with your media, when they paused to take a closer look at your media content and when they skipped some content because it wasn’t relevant to them. These - along with a lot of other reasons - are why you should not only analyze open/visits rates, but also drill down in the media content.

Still on media, with every post on the internet - whether image or video, low quality or high quality - one thing is constant: the ability to track certain data points related to these media assets is priceless because they make up a huge percentage of web content these days. For images, it could be the number of clicks on a linked image or the number of times it is seen on the platform. For videos, views are the most widely tracked data points.

Are these videos’ views metrics sufficient, and efficient, to track user engagement? Obviously not. We need more details on how people interact with our videos.

Take video playback to the next level using the Cloudinary Video Player. Possessing features such as adaptive bitrate for various end users, recommended content, video playlist, and an event analytics feature, the Cloudinary Video Player gives us sheer control and optimal delivery from the Cloudinary CDN
The Cloudinary Video Player enables us to integrate analysis.js through Google Analytics to track various metrics and events during video playback. These events include - but are not limited to - pause, play, video load, player load and percentage of video played.

In this article, we will show how to integrate Google Analytics into a Node app featuring the video player.

First, you will need to create a Cloudinary account and obtain your cloud_name from your dashboard. Do that here. This account is the only one we need to create for now as this is all we need to get our app running, later on, we will create a google analytics account to manage events and analytics.

Since this is a Node app, you must have installed Node.js and NPM globally on your machine. If not install them from here. Verify if you have Node and NPM installed by running the following on your command line:

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

The version numbers of both tools will be displayed on your console when you run those.

For the sake of this demo, this app can be built as a front-end project without a Node server, but we choose to host our app online on a free ngrok server, which resulted in building a little a backend server for our app.

Once we have Node and NPM installed, create a new project folder with any name of your choice. In the project folder, create a new Node project with:

npm init

This creates a new project a package.json file. Next up is to install required dependencies. For our app, the dependencies required are:

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

Note

The Cloudinary Video Player can be installed in multiple ways, but we choose the server-side installation. You can equally reference the required JavaScript and CSS files from a CDN and it would work properly. See other installation methods here.

Once these dependencies are installed, a node_modules folder is automatically created to house the dependencies. For our app, we simply require four config files which we will set up next.

For this app, we will require an HTML file, CSS file for styling, a JavaScript file containing our front-end scripts and a server file which we call server.js. In the root directory, create the files index.html, index.css, index.js, and server.js. We will get to configuring these next.

Index.html
This is the HTML script of our page and since it’s a single page this single file will suffice. A simple HTML script is set up with a <video> tag in the body element. This will house our media player.

Note the inclusion of the external stylesheet and the JavaScript file in our HTML.

We currently have our HTML page setup. However to have Cloudinary functional on our page, we will include it with script tags on our page. Since we are not importing from a CDN but rather installing it via NPM, we will import our script files from the node_modules folder in our root folder.

First, a new Cloudinary instance is created and instantiated with the cloud_name obtained from your Cloudinary dashboard. Next, we call the videoPlayer method on our Cloudinary instance. The video player is mounted on the dom element with the id of cl-vp which we created and assigned to the video element in our HTML script earlier. Video parameters are passed to an object as a second parameter to the method. Native video controls are also available to the Cloudinary Video Player.

The analytics property is included and assigned a value of true. This tracks all events. But you can specify which particular events to track in the analytics property. See events you can track here.

We specify the source of the video next using the .source() method. The first parameter is the public ID of any video you uploaded to your Cloudinary account. A second parameter is an object containing video details which can be title, subtitle, and description. See more parameters here. Once we have our JavaScript configured, configure styling in the index.css file with:

Now we have all files ready, but we can’t serve our files yet. We need a node server to serve this. Optionally to see what was built beforehand, let’s open the HTML in our browser from our local folder.

Our video is playing, very good. But we want to create our Node server so we can expose our local server to the internet using a tool called ngrok.

Create an account on Google Analytics with the temporary web address obtained from ngrok. You are issued a tracking code unique to the created account. If you are having a hard time finding the tracking code, it can be found on the admin panel, under the property tab of your account.

In the head tag of your HTML script, include the Google Analytics tracking script just after the opening head tag with:

Replace tracking-code with the tracking code obtained on account creation.

Now refresh your browser, you should see Google Analytics gather data immediately from the video, navigate to the events tab under the Real-Time menu to see tracked data from the video played. All events are tracked immediately upon setup.

In this tutorial we showed the importance of properly understanding user engagement with media assets with the focus on videos, whether it is for marketing purposes or just to understand certain trends. This further demonstrates the power of the Cloudinary video player. Furthermore, we created the video player in an HTML page and integrated Google Analytics video tracking. The opportunities are endless once you have the right data. Feel free to make contributions to the repository here and leave your feedback. Be sure to create your FREE Cloudinary account!

Use Cloudinary to transform, optimize
and manage your images and videos
sign up for free

Recent Blog Posts

ClickMechanic, a London-based, online marketplace for automobile mechanics, has chosen Cloudinary as its media-asset manager for over five years. James Wozniak, ClickMechanic’s full-stack software developer, recently talked with us about the company’s experience with Cloudinary.

These days, clean and sleek e-Commerce web sites are the way to go. And that almost always includes high quality product photos with a flat white, transparent, or solid background. This is not just a passing fad. There are many practical and well-validated reasons for this choice. The graphic below summarizes a few of these:

ImageCon, the ultimate event for digital media is back and promises to be better than ever. Hundreds of developers, creatives, and marketing professionals will gather May 1-2 at the Palace Hotel in San Francisco.

Amy Balliett is the founder and CEO of Killer Infographics, a visual-content marketing and communication agency. Today, Killer Infographics is the industry leader with Amy at the helm, devising visual strategy and running campaigns for global organizations. You can follow Amy on Twitter at @AmyBalliett and @killervizcomm.

Aaron Gustafson is a senior program manager at Microsoft and former manager of the Web Standards Project, collaborates closely with partners on Progressive Web Apps (PWAs) with a focus on cross-platform compatibility. As the author of the groundbreaking book Adaptive Web Design, Aaron regularly posts on aaron-gustafson.com.

The future of marketing depends on dynamic visual experiences. Marketers must connect with customers across multiple channels – the web, mobile, kiosks, email, search, and social as well as print and real time events. They must build brand awareness in increasingly noisy (and competitive) marketplaces. To rise above the noise, marketers must become well-versed in all things rich media -- using images, short and long form videos, and interactive contents in new ways to raise awareness, deliver powerful experiences, and boost engagement.