Track Video Impressions in NuxtJS with Supabase

Idris Olubisi

The number of times our video has shown up in search results, social media, or a website determines the number of video impressions.

On the other hand, views indicate how many times our video has been viewed.

This article will show us how to track video impressions in Nuxtjs and save the count in Supabase.

Sandbox

The completed project is on Codesandbox. Fork it to get started quickly.

1<CodeSandbox id="romantic-pare-o73tcy" title="Track Video Impressions in Nuxtjs with Supabase"/>

GitHub Repository

https://github.com/Olanetsoft/video-impression-in-nuxtjs-and-supabase

Prerequisite

  • Knowledge of JavaScript and Vue.js.
  • The knowledge of Nuxt.js is not required but preferred.

Getting Started with Nuxtjs

Nuxt.js provides the bedrock of our Vue.js project, providing structure and flexibility while allowing us to confidently scale the application.

Nuxt.js is extensible, with a robust module ecosystem and hooks engine. This makes it simple to integrate our REST or GraphQL endpoints, favorite CMS, CSS frameworks, and other third-party applications.

Supabase is an open-source alternative to firebase, providing tools to scaffold a back-end server quickly. Supabase offers a PostgreSQL database which we’ll use in this project.

Project Setup and Installation

To create a new project, we use the command below to scaffold a new project:

1npx create-nuxt-app <project-name>

A series of prompts will appear, and we recommend the following defaults:

Next, we need to navigate the project directory and start the development server using the command below.

1cd <project name> && yarn dev

Nuxt.js will start a hot-reloading development environment accessible by default at http://localhost:3000

Next, we install the @supabase/supabase-js Javascript SDK with

1yarn add @supabase/supabase-js

Setting up a Supabase project

Let's start by creating a Supabase account here. We'll need a GitHub account to continue. We can quickly create and set up a GitHub account.

After logging into our Supabase account, we will be redirected to the dashboard, as shown below.

Next, we can now click on the New Project Button to create a new project for our demo application.

Then we'll get the screen below, which indicates that the project is currently in build.

Using the database icon in the sidebar, we'll build our database. In addition, we must click the + New button in the top right corner of the screen to create each column we require, as illustrated below.

We will create a table called Video Impression and one column ImpressionCount for this project.

We've created our database table and the required fields. In the next section, we'll set up our video player.

Cloudinary Video Player Installation

We need to be able to detect and respond when the status of a video player changes. Thus we will be relying on the Cloudinary Video Player for customization and integration.

Cloudinary video player is a JavaScript-based HTML5 video player with a slew of helpful customization and integration features, monetization, and analytics support.

The video player's assets will be added to our nuxt.config.js in the link and script section of the file using the following snippet:

1// nuxt.config.js
2
3 export default {
4 head: {
5 ...
6 link: [
7 ...
8 {
9 rel: 'stylesheet',
10 href: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css'
11 }
12 ],
13 script: [
14 {
15 src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js'
16 },
17 {
18 src: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js'
19 },
20 ],
21 },
22 };

We need to save our Cloudinary cloud name so that we may refer to it from any file. In the next step, It will be saved as an environmental variable in the global .env file at the project’s root.

We can get our cloud name from our Cloudinary dashboard by signing up for a Cloudinary Account.

Create a .env file at the root of the project with the command touch .env and update it with the following snippet:

1NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>

Configuring @supabase/supabase-js as a plugin in Nuxtjs

We’ll proceed to make a custom plugin for Supabase in our project.

We'll create a plugins folder and a file titled supabase.client.js in the root directory.

To utilize the plugin, we paste the code below.

1/* plugins/supabase.client.js */
2 import { createClient } from "@supabase/supabase-js";
3
4 const supabase = createClient("https://oururl.supabase.co", "our-api-key");
5 export default (_, inject) => {
6 inject("supabase", supabase);
7 };

Now we can update the plugins array in nuxt.config.js with the new plugin:

1export default {
2 //...
3 plugins: ["~plugins/supabase.client.js"],
4 }

Building our project

Proceeding to build the project interface, we'll create a new Video.vue file in the component folder and update it with the code snippet below.

1<template>
2 <div class="flex justify-center items-center h-screen space-x-10">
3 <h1 class="font-bold text-4xl mb-3">
4 Track Video Impressions in Nuxtjs with Supabase
5 </h1>
6 </div>
7 </template>
8
9 <script>
10 export default {
11 name: "VideoPage",
12 };
13 </script>

Next, we will import the Video component inside our pages/index.vue file with the code snippet below.

1<template>
2 <Video/>
3 </template>
4
5 <script>
6 export default {
7 name: 'IndexPage'
8 }
9 </script>

We should have a page similar to the image below in our browser.

We can now create our video player by updating components/Video.vue with the following code snippet:

1<template>
2 <div class="flex justify-center items-center h-screen space-x-10">
3 <h1 class="font-bold text-4xl mb-3">
4 Track Video Impressions in Nuxtjs with Supabase
5 </h1>
6 <div>
7 <div class="rounded overflow-hidden shadow-lg mb-4 content-center">
8 <div class="px-6 py-4 pb-2">
9 <video
10 id="video-player"
11 controls
12 width="500px"
13 class="width-full"
14 ></video>
15 </div>
16 </div>
17 </div>
18 </div>
19 </template>
20
21 <script>
22 export default {
23
24 data() {
25 return {
26 cld: null,
27 player: null,
28 video: "samples/sea-turtle",
29 };
30 },
31
32 mounted() {
33 this.cld = cloudinary.Cloudinary.new({
34 cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
35 secure: true,
36 });
37
38 this.player = this.cld.videoPlayer("video-player", {
39 analytics: {
40 events: ["play"],
41 },
42 });
43
44 this.player.source(this.video);
45 },
46 name: "VideoPage",
47 };
48 </script>

In the code snippet above, we established a Cloudinary instance, used it to initialize the video player, and set up the video source in our mounted lifecycle hook.

We should have something similar to the image below:

Next, we will track and save video impressions in the database we created earlier using the code snippet below.

https://gist.github.com/Olanetsoft/65237f7cb0dcf8de6bf9a7326fc7908f

https://gist.github.com/Olanetsoft/65237f7cb0dcf8de6bf9a7326fc7908f

In the snippet above we:

  • Declared two functions, saveImpression and fetchCount, which save the video impression into our database and retrieve all our saved count, respectively.
  • Assigned the fetchCount function to a count state variable
  • Called the saveImpression function that keeps track and saves the impression count whenever our video is played
  • Validate that if the fetchCount is loading, we return a loading text or return the count retrieved from our database.

After testing our application, we should get something similar to what we have below.

https://www.loom.com/share/9414eebf45f54c22b9f3264b82175388

Conclusion

This article discussed how to track video impressions in Nuxtjs with Supabase. You can track and store various data points in Supabase using this pattern.

Resources

We may find these resources helpful.

Idris Olubisi

Software Engineer & Technical Writer

A Software Engineer & Technical Writer with immense knowledge and a passionate speaker about open source, blockchain, software products, and serverless technologies.