{"id":28484,"date":"2022-04-06T02:43:58","date_gmt":"2022-04-06T02:43:58","guid":{"rendered":"http:\/\/track-video-impressions-in-nuxtjs-with-supabase"},"modified":"2025-09-26T14:02:07","modified_gmt":"2025-09-26T21:02:07","slug":"track-video-impressions-in-nuxtjs-with-supabase","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/","title":{"rendered":"Track Video Impressions in NuxtJS with Supabase"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>The number of times our video has shown up in search results, social media, or a website determines the number of video impressions.<\/p>\n<p>On the other hand, views indicate how many times our video has been viewed.<\/p>\n<p>This article will show us how to track video impressions in Nuxtjs and save the count in Supabase.<\/p>\n<h2>Sandbox<\/h2>\n<p>The completed project is on <a href=\"https:\/\/codesandbox.io\/s\/romantic-pare-o73tcy\">Codesandbox<\/a>. Fork it to get started quickly.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/romantic-pare-o73tcy?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Track Video Impressions in Nuxtjs with Supabase\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><p>GitHub Repository<\/p>\n<p><a href=\"https:\/\/github.com\/Olanetsoft\/video-impression-in-nuxtjs-and-supabase\">https:\/\/github.com\/Olanetsoft\/video-impression-in-nuxtjs-and-supabase<\/a><\/p>\n<h1>Prerequisite<\/h1>\n<ul>\n<li>Knowledge of JavaScript and Vue.js.<\/li>\n<li>The knowledge of Nuxt.js is not required but preferred.<\/li>\n<\/ul>\n<h1>Getting Started with Nuxtjs<\/h1>\n<p><a href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> provides the bedrock of our Vue.js project, providing structure and flexibility while allowing us to confidently scale the application.<\/p>\n<p>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.<\/p>\n<p><a href=\"https:\/\/supabase.io\/\">Supabase<\/a> is an open-source alternative to firebase, providing tools to scaffold a back-end server quickly. Supabase offers a <a href=\"https:\/\/www.postgresql.org\/\">PostgreSQL<\/a> database which we\u2019ll use in this project.<\/p>\n<h1>Project Setup and Installation<\/h1>\n<p>To create a new project, we use the command below to scaffold a new project:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    npx create-nuxt-app <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project-name<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>A series of prompts will appear, and we recommend the following defaults:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C16B0B70DC818C581BE85AC6F4146D2C0D56F8F9AD5146EB2FEFB71BC8865825_1648210300941_Screenshot+2022-03-18+at+22.48.51.png\" alt=\"Create-nuxt-app\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1329\" height=\"411\"\/><\/p>\n<p>Next, we need to navigate the project directory and start the development server using the command below.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project<\/span> <span class=\"hljs-attr\">name<\/span>&gt;<\/span> &amp;&amp; yarn dev\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Nuxt.js will start a hot-reloading development environment accessible by default at <code>http:\/\/localhost:3000<\/code><\/p>\n<p>Next, we install the <a href=\"https:\/\/www.npmjs.com\/package\/@supabase\/supabase-js\">@supabase\/supabase-js<\/a> Javascript SDK with<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-selector-tag\">yarn<\/span> <span class=\"hljs-selector-tag\">add<\/span> <span class=\"hljs-keyword\">@supabase<\/span>\/supabase-js\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h1>Setting up a Supabase project<\/h1>\n<p>Let\u2019s start by creating a Supabase account <a href=\"https:\/\/api.supabase.io\/platform\/login\">here<\/a>. We\u2019ll need a GitHub account to continue. We can quickly create and set up a <a href=\"https:\/\/github.com\/signup\">GitHub<\/a> account.<\/p>\n<p>After logging into our Supabase account, we will be redirected to the dashboard, as shown below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C16B0B70DC818C581BE85AC6F4146D2C0D56F8F9AD5146EB2FEFB71BC8865825_1648243424307_Screenshot+2022-03-25+at+22.22.14.png\" alt=\"Video Impressions in Nuxtjs with Supabase\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1159\"\/><\/p>\n<p>Next, we can now click on the <code>New Project<\/code> Button to create a new project for our demo application.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C16B0B70DC818C581BE85AC6F4146D2C0D56F8F9AD5146EB2FEFB71BC8865825_1648243746571_Screenshot+2022-03-25+at+22.26.48.png\" alt=\"Video Impressions in Nuxtjs with Supabase\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1150\"\/><\/p>\n<p>Then we\u2019ll get the screen below, which indicates that the project is currently in build.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C16B0B70DC818C581BE85AC6F4146D2C0D56F8F9AD5146EB2FEFB71BC8865825_1648244014554_Screenshot+2022-03-25+at+22.30.16.png\" alt=\"Track Video Impressions in Nuxtjs with Supabase\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1155\"\/><\/p>\n<p>Using the database icon in the sidebar, we\u2019ll build our database. In addition, we must click the <code>+ New<\/code> button in the top right corner of the screen to create each column we require, as illustrated below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C16B0B70DC818C581BE85AC6F4146D2C0D56F8F9AD5146EB2FEFB71BC8865825_1648244342263_Screenshot+2022-03-25+at+22.36.42.png\" alt=\"Track Video Impressions in Nuxtjs with Supabase\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1157\"\/><\/p>\n<p>We will create a table called <code>Video Impression<\/code> and one column <code>ImpressionCount<\/code> for this project.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C16B0B70DC818C581BE85AC6F4146D2C0D56F8F9AD5146EB2FEFB71BC8865825_1648245323984_Screenshot+2022-03-25+at+22.53.08.png\" alt=\"Track Video Impressions in Nuxtjs with Supabase\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1158\"\/><\/p>\n<p>We\u2019ve created our database table and the required fields. In the next section, we\u2019ll set up our video player.<\/p>\n<h1>Cloudinary Video Player Installation<\/h1>\n<p>We need to be able to detect and respond when the status of a video player changes. Thus we will be relying on the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\">Cloudinary Video Player<\/a> for customization and integration.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\">Cloudinary video player<\/a> is a JavaScript-based HTML5 video player with a slew of helpful customization and integration features, monetization, and analytics support.<\/p>\n<p>The video player\u2019s assets will be added to our <code>nuxt.config.js<\/code> in the <code>link<\/code> and <code>script<\/code> section of the file using the following snippet:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-comment\">\/\/ nuxt.config.js<\/span>\n    \n    <span class=\"hljs-keyword\">export<\/span>  <span class=\"hljs-keyword\">default<\/span>  {\n      <span class=\"hljs-attr\">head<\/span>:  {\n          ...\n      link: &#91;\n          ...\n      {\n        <span class=\"hljs-attr\">rel<\/span>:  <span class=\"hljs-string\">'stylesheet'<\/span>, \n        <span class=\"hljs-attr\">href<\/span>:  <span class=\"hljs-string\">'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.css'<\/span>  \n      }\n            ],\n      <span class=\"hljs-attr\">script<\/span>:  &#91;\n      { \n      <span class=\"hljs-attr\">src<\/span>:  <span class=\"hljs-string\">'https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js'<\/span> \n      },\n      { \n      <span class=\"hljs-attr\">src<\/span>:  <span class=\"hljs-string\">'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.js'<\/span>\n      },\n              ],\n      },\n    };\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>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 <code>.env<\/code> file at the project\u2019s root.<\/p>\n<p>We can get our cloud name from our <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">Cloudinary dashboard<\/a> by signing up for a Cloudinary Account.<\/p>\n<p>Create a <code>.env<\/code> file at the root of the project with the command <code>touch .env<\/code> and update it with the following snippet:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    NUXT_ENV_CLOUDINARY_CLOUD_NAME=<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cloudinary-cloud-name<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h1>Configuring @supabase\/supabase-js as a plugin in Nuxtjs<\/h1>\n<p>We\u2019ll proceed to make a custom plugin for Supabase in our project.<\/p>\n<p>We\u2019ll create a <code>plugins<\/code> folder and a file titled <code>supabase.client.js<\/code> in the root directory.<\/p>\n<p>To utilize the plugin, we paste the code below.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-comment\">\/* plugins\/supabase.client.js *\/<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { createClient } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@supabase\/supabase-js\"<\/span>;\n    \n    <span class=\"hljs-keyword\">const<\/span> supabase = createClient(<span class=\"hljs-string\">\"https:\/\/oururl.supabase.co\"<\/span>, <span class=\"hljs-string\">\"our-api-key\"<\/span>);\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> (_, inject) =&gt; {\n      inject(<span class=\"hljs-string\">\"supabase\"<\/span>, supabase);\n    };\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now we can update the <code>plugins<\/code> array in <code>nuxt.config.js<\/code> with the new plugin:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      <span class=\"hljs-comment\">\/\/...<\/span>\n      <span class=\"hljs-attr\">plugins<\/span>: &#91;<span class=\"hljs-string\">\"~plugins\/supabase.client.js\"<\/span>],\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h1>Building our project<\/h1>\n<p>Proceeding to build the project interface, we\u2019ll create a new <code>Video.vue<\/code> file in the <code>component<\/code> folder and update it with the code snippet below.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex justify-center items-center h-screen space-x-10\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"font-bold text-4xl mb-3\"<\/span>&gt;<\/span>\n          Track Video Impressions in Nuxtjs with Supabase\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"VideoPage\"<\/span>,\n    };\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, we will import the <code>Video<\/code> component inside our <code>pages\/index.vue<\/code> file with the code snippet below.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Video<\/span>\/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'IndexPage'<\/span>\n    }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We should have a page similar to the image below in our browser.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C16B0B70DC818C581BE85AC6F4146D2C0D56F8F9AD5146EB2FEFB71BC8865825_1648247605935_Screenshot+2022-03-25+at+23.33.05.png\" alt=\"Track Video Impressions in Nuxtjs with Supabase\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1117\"\/><\/p>\n<p>We can now create our video player by updating <code>components\/Video.vue<\/code> with the following code snippet:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex justify-center items-center h-screen space-x-10\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"font-bold text-4xl mb-3\"<\/span>&gt;<\/span>\n          Track Video Impressions in Nuxtjs with Supabase\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"rounded overflow-hidden shadow-lg mb-4 content-center\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"px-6 py-4 pb-2\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span>\n                <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"video-player\"<\/span>\n                <span class=\"hljs-attr\">controls<\/span>\n                <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"500px\"<\/span>\n                <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"width-full\"<\/span>\n              &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">video<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    \n      data() {\n        <span class=\"hljs-keyword\">return<\/span> {\n          <span class=\"hljs-attr\">cld<\/span>: <span class=\"hljs-literal\">null<\/span>,\n          <span class=\"hljs-attr\">player<\/span>: <span class=\"hljs-literal\">null<\/span>,\n          <span class=\"hljs-attr\">video<\/span>: <span class=\"hljs-string\">\"samples\/sea-turtle\"<\/span>,\n        };\n      },\n    \n      mounted() {\n        <span class=\"hljs-keyword\">this<\/span>.cld = cloudinary.Cloudinary.new({\n          <span class=\"hljs-attr\">cloud_name<\/span>: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,\n          <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>,\n        });\n    \n        <span class=\"hljs-keyword\">this<\/span>.player = <span class=\"hljs-keyword\">this<\/span>.cld.videoPlayer(<span class=\"hljs-string\">\"video-player\"<\/span>, {\n          <span class=\"hljs-attr\">analytics<\/span>: {\n            <span class=\"hljs-attr\">events<\/span>: &#91;<span class=\"hljs-string\">\"play\"<\/span>],\n          },\n        });\n    \n        <span class=\"hljs-keyword\">this<\/span>.player.source(<span class=\"hljs-keyword\">this<\/span>.video);\n      },\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"VideoPage\"<\/span>,\n    };\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>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.<\/p>\n<p>We should have something similar to the image below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C16B0B70DC818C581BE85AC6F4146D2C0D56F8F9AD5146EB2FEFB71BC8865825_1648247990081_Screenshot+2022-03-25+at+23.39.33.png\" alt=\"Track Video Impressions in Nuxtjs with Supabase\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1120\"\/><\/p>\n<p>Next, we will track and save video impressions in the database we created earlier using the code snippet below.<\/p>\n<p><a href=\"https:\/\/gist.github.com\/Olanetsoft\/65237f7cb0dcf8de6bf9a7326fc7908f\">https:\/\/gist.github.com\/Olanetsoft\/65237f7cb0dcf8de6bf9a7326fc7908f<\/a><\/p>\n<p><a href=\"https:\/\/gist.github.com\/Olanetsoft\/65237f7cb0dcf8de6bf9a7326fc7908f\">https:\/\/gist.github.com\/Olanetsoft\/65237f7cb0dcf8de6bf9a7326fc7908f<\/a><\/p>\n<p>In the snippet above we:<\/p>\n<ul>\n<li>Declared two functions, <code>saveImpression<\/code> and <code>fetchCount<\/code>, which save the video impression into our database and retrieve all our saved count, respectively.<\/li>\n<li>Assigned the <code>fetchCount<\/code> function to a count state variable<\/li>\n<li>Called the <code>saveImpression<\/code> function that keeps track and saves the impression count whenever our video is played<\/li>\n<li>Validate that if the <code>fetchCount<\/code> is loading, we return a <code>loading<\/code> text or return the count retrieved from our database.<\/li>\n<\/ul>\n<p>After testing our application, we should get something similar to what we have below.<\/p>\n<p><a href=\"https:\/\/www.loom.com\/share\/9414eebf45f54c22b9f3264b82175388\">https:\/\/www.loom.com\/share\/9414eebf45f54c22b9f3264b82175388<\/a><\/p>\n<h1>Conclusion<\/h1>\n<p>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.<\/p>\n<h1>Resources<\/h1>\n<p>We may find these resources helpful.<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/nuxtjs.org\/\">Nuxtjs<\/a>\n<\/li>\n<li>\n<a href=\"http:\/\/supabase.io\">Supabase<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.w3schools.com\/tags\/ref_av_dom.asp\">HTML Audio\/Video DOM Reference<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\">Cloudinary Video Player<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28485,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,372,371,303],"class_list":["post-28484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-nuxtjs","tag-under-review","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Track Video Impressions in NuxtJS with Supabase<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Track Video Impressions in NuxtJS with Supabase\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:43:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T21:02:07+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Track Video Impressions in NuxtJS with Supabase\",\"datePublished\":\"2022-04-06T02:43:58+00:00\",\"dateModified\":\"2025-09-26T21:02:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"NuxtJS\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/\",\"name\":\"Track Video Impressions in NuxtJS with Supabase\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA\",\"datePublished\":\"2022-04-06T02:43:58+00:00\",\"dateModified\":\"2025-09-26T21:02:07+00:00\",\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA\",\"width\":5472,\"height\":3648},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Track Video Impressions in NuxtJS with Supabase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Track Video Impressions in NuxtJS with Supabase","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/","og_locale":"en_US","og_type":"article","og_title":"Track Video Impressions in NuxtJS with Supabase","og_description":"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.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:43:58+00:00","article_modified_time":"2025-09-26T21:02:07+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/"},"author":{"name":"","@id":""},"headline":"Track Video Impressions in NuxtJS with Supabase","datePublished":"2022-04-06T02:43:58+00:00","dateModified":"2025-09-26T21:02:07+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA","keywords":["Guest Post","Javascript","NuxtJS","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/","name":"Track Video Impressions in NuxtJS with Supabase","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA","datePublished":"2022-04-06T02:43:58+00:00","dateModified":"2025-09-26T21:02:07+00:00","description":"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.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA","width":5472,"height":3648},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-video-impressions-in-nuxtjs-with-supabase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Track Video Impressions in NuxtJS with Supabase"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924331\/Web_Assets\/blog\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07\/36f11f8e56ce65aecd2ac2675fd416343d3cf513-5472x3648-1_284852fa07.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28484"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28484\/revisions"}],"predecessor-version":[{"id":38623,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28484\/revisions\/38623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28485"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}