{"id":28455,"date":"2021-04-14T17:26:58","date_gmt":"2021-04-14T17:26:58","guid":{"rendered":"http:\/\/Capture-Video-Analytics-in-Gatsby.js-Sites"},"modified":"2023-11-24T08:41:40","modified_gmt":"2023-11-24T16:41:40","slug":"capture-video-analytics-in-gatsby-js-sites","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/capture-video-analytics-in-gatsby-js-sites\/","title":{"rendered":"Capture Video Analytics in Gatsby.js Sites"},"content":{"rendered":"

Video presentations currently deliver robust user experiences on different platforms. Because of this, it\u2019s often chosen as a go-to medium for sharing presentations, including product, educational, and entertainment content, among others.<\/p>\n

How do you track the data from engagements on your video content?<\/p>\n

This post discusses how to implement and collect video analytics data from a video on a website built with Gatsby.js. We\u2019ll utilize the Cloudinary video player to render remote videos and handle analytics on them.<\/p>\n

Gatsby.js is a Reactjs-based technology for building fast static sites and single-page applications.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a Codesandbox<\/a>, and you can fork it to get running.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Prerequisites and Installation<\/h2>\n

For this project, knowledge of JavaScript and React.js is required. The knowledge of Gatsby.js is pleasant to have, but isn\u2019t needed.<\/p>\n

To get started, we install the gatsby-cli globally and create a new Gatsby project using NPM – a command line package manager. You can also use Yarn. Gatsby ships starters, which we use to scaffold projects quickly, and in this project, we\u2019ll use the default starter.<\/p>\n

If you already have a Gatsby project running, you can skip this Gatsby installation step. In the desired directory for our project, we run:<\/p>\n

    npm install -g gatsby-cli && gatsby new<\/span> video-site\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This command creates a Gatsby project called video-site<\/code>, using the default starter.<\/p>\n
We proceed to install the required dependencies with:<\/p>\n
    npm install --save gatsby-plugin-google-analytics cloudinary-core cloudinary-video-player\n<\/code><\/span><\/pre>\n
cloudinary-core<\/code> and cloudinary-video-player<\/code> are required dependencies to render the video player. Also, gatsby-plugin-google-analytics<\/code> adds the google analytics tracking script to our pages.<\/p>\n
\n
Gatsby-plugin-google-analytics uses the universal analytics tracking code from Google Analytics. This plugin isn\u2019t compatible with the latest gtag.js tracking code and ID. Also, the cloudinary-video-player module isn\u2019t compatible (as of the time of writing) with the current gtag analytics system.<\/p>\n<\/blockquote>\n
We\u2019ll proceed to add the gatsby-plugin-google-analytics configuration to the gatsby-config.js file located in the project\u2019s root directory.<\/p>\n
We include the plugin configuration with<\/p>\n
    module<\/span>.exports = {\n      siteMetadata<\/span>: {\n        title<\/span>: `Gatsby Default Starter`<\/span>,\n        description<\/span>: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`<\/span>,\n        author<\/span>: `@gatsbyjs`<\/span>,\n      },\n      plugins<\/span>: [\n       \/\/ other plugin configurations go in here<\/span>\n        {\n          resolve<\/span>: `gatsby-plugin-google-analytics`<\/span>,\n          options<\/span>: {\n            trackingId<\/span>: \"UA-111204936-2\"<\/span>,\n            head<\/span>: true<\/span>\n          }\n        }\n      ],\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We specified the Google Analytics tracking ID obtained from our Google Analytics property settings. Also, we included the head<\/code> property that adds the analytics tracking code within the head tags of our HTML code.<\/p>\n
One more required configuration is the exclusion of the cloudinary-video-player module during Gatsby\u2019s build process. The module requires the window<\/code> API, which isn\u2019t available during our site\u2019s optimized build creation.<\/p>\n
We exclude the module in the gatsby-node.js file in the project\u2019s root directory using the setWebpackConfig<\/code> API.<\/p>\n
    \/\/ gatsby-node.js<\/span>\n    const<\/span> path = require<\/span>('path'<\/span>)\n    exports.onCreateWebpackConfig = ({ stage, loaders, actions }<\/span>) =><\/span> {\n      actions.setWebpackConfig({\n        resolve<\/span>: {\n          modules<\/span>: [path.resolve(__dirname, 'src'<\/span>), 'node_modules'<\/span>],\n        },\n      })\n      if<\/span>(stage === \"build-html\"<\/span>){\n        actions.setWebpackConfig({\n          module<\/span>:{\n            rules<\/span>: [\n              {\n                test<\/span>: \/cld-video-player\/<\/span>,\n                use<\/span>: loaders.null()\n              }\n            ]\n          }\n        })\n      }\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we added the src<\/code> directory to the list of directories. Webpack will check for modules to resolve. Then, we checked the build process stage if it\u2019s in the \u2018build-html\u2019 stage before applying a rule to the cld-video-player<\/code> module. This rule excludes the module during the build using a null<\/em> loader.<\/p>\n
Video player creation<\/h2>\n
In src\/components,<\/em> we create a file named video-player.js, which would house the video player component. First, we import all required dependencies with:<\/p>\n
    import<\/span> React, { useEffect } from<\/span> \"react\"<\/span>\n    import<\/span> cloudinary from<\/span> \"cloudinary-core\"<\/span>\n    import<\/span> \"cloudinary-video-player\/dist\/cld-video-player.js\"<\/span>\n    import<\/span> \"cloudinary-video-player\/dist\/cld-video-player.min.css\"<\/span> \n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we create a function component for the video player, which returns an HTML <video\/><\/code> element with an id.<\/p>\n
    export<\/span> const<\/span> VideoPlayer = ({ publicId }<\/span>) =><\/span> {\n    \n      return<\/span> (\n        <div<\/span> style<\/span>={{<\/span> maxWidth:<\/span> \"500px<\/span>\" }}><\/span>\n          <video<\/span> id<\/span>={<\/span>\"cl-vp<\/span>\"} \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      )\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component accepts a prop of publicId<\/code>, which will eventually be passed the publicId of a video, stored on Cloudinary.<\/p>\n
In the VideoPlayer component, we create and configure a new Cloudinary instance. Then create a video player instance mounted on the DOM element with an ID of \u201ccl-vp\u201d which is already rendered by the component.<\/p>\n
    let<\/span> cld = cloudinary.Cloudinary.new({ cloud_name<\/span>: \"chuloo\"<\/span>, secure<\/span>: true<\/span> })\n      useEffect(()<\/span> =><\/span> {\n        \/\/ create a new cloudinary instance with config<\/span>\n        let<\/span> vidPlayer = cld.videoPlayer(\"cl-vp\"<\/span>, {\n          loop<\/span>: true<\/span>,\n          controls<\/span>: true<\/span>,\n          autoPlay<\/span>: true<\/span>,\n          width<\/span>: 500<\/span>,\n          playedEventPercents<\/span>: [10<\/span>, 50<\/span>, 90<\/span>],\n          analytics<\/span>: {\n            events<\/span>: [\n              \"play\"<\/span>,\n              \"pause\"<\/span>,\n              \"ended\"<\/span>,\n              \"percentsplayed\"<\/span>,\n              \"error\"<\/span>,\n              \"volumechange\"<\/span>,\n              \"mute\"<\/span>,\n              \"unmute\"<\/span>,\n              \"qualitychanged\"<\/span>,\n              \"seek\"<\/span>,\n              \"fullscreenchange\"<\/span>\n            ]\n          }\n        })\n      }, [publicId, cld])\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the snippet above, we specified multiple video player and analytics options. You can find all options on Cloudinary<\/a>. Cloudinary-video-player sends all events triggered, along with event parameters, to our Google Analytics dashboard. You can also find the list of trackable events on Cloudinary<\/a>.<\/p>\n
Lastly, in the  VideoPlayer<\/code> component\u2019s useEffect<\/code> function, we specify the video source, which is the publicId of the video on Cloudinary.<\/p>\n
    vidPlayer<\/span>.source<\/span>(publicId<\/span>)\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
In the site\u2019s home page, we render the component in the IndexPage<\/code> component located in src\/pages.index.js<\/code> by updating it with:<\/p>\n
    import<\/span> { VideoPlayer } from<\/span> \"..\/components\/video-player\"<\/span>\n    \n    const<\/span> IndexPage = ()<\/span> =><\/span> (\n      <Layout<\/span>><\/span>\n        <SEO<\/span> title<\/span>=\"Home\"<\/span> \/><\/span>\n        <h1<\/span>><\/span>Hi people<\/h1<\/span>><\/span>\n        <p<\/span>><\/span>Welcome to your new Gatsby site.<\/p<\/span>><\/span>\n        <p<\/span>><\/span>Now go build something great.<\/p<\/span>><\/span>\n        <VideoPlayer<\/span> publicId<\/span>={<\/span>\"video-blog<\/span>\/cockerels<\/span>\"} \/><\/span>\n        <p<\/span>><\/span>\n          <Link<\/span> to<\/span>=\"\/page-2\/\"<\/span>><\/span>Go to page 2<\/Link<\/span>><\/span> <br<\/span> \/><\/span>\n          <Link<\/span> to<\/span>=\"\/using-typescript\/\"<\/span>><\/span>Go to \"Using TypeScript\"<\/Link<\/span>><\/span>\n        <\/p<\/span>><\/span>\n      <\/Layout<\/span>><\/span><\/span>\n    )\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this, the home page looks like this:<\/p>\n
\"\"<\/p>\n
Data Visualization on Google Analytics<\/h2>\n
To send the data to Google Analytics, we need to deploy the site and specify the URL in Google Analytics. We deployed our sample site to Netlify<\/a> from GitHub in a few clicks, and you can find the URL here.<\/p>\n
\n
The gatsby-plugin-google-analytics plugin doesn\u2019t send data to Google analytics in development. A production build is required. You can also create a production build using the gatsby build<\/code> command and run it locally using gatsby serve<\/code>.<\/p>\n<\/blockquote>\n
On Google Analytics, we go to the Events<\/em> menu under the Realtime<\/em> side-menu to see the data stream in real-time.<\/p>\n
\"\"<\/p>\n
On the site, we can use event handlers to manage the events triggered by the video, using the on()<\/code> method. For example, suppose we want to call a function once a user pauses a video. In the VideoPlayer component, we can watch for the \u2018pause\u2019 event, and trigger a function once emitted.<\/p>\n
    vidPlayer.on('pause'<\/span>, console<\/span>.log(\"Why did you pause me\"<\/span>)) \n    vidPlayer.on('mute'<\/span>, sendLightMessage())\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
These events will also be sent to Google Analytics regardless.<\/p>\n
Summary<\/h2>\n
In this post, we created a sample Gatsby.js site, and added Google Analytics to it, with which we track page views and events. Also, we made a video player using the Cloudinary Video player and specified events sent to Google Analytics from the video player. You can explore extending the functionality of your app using events from your videos.<\/p>\n
Check out the following valuable resources<\/p>\n
To obtain your cloud_name, you need to create an account on Cloudinary<\/a> and get the cloud name value from your Cloudinary dashboard.<\/p>\n
We will utilize the Cloudinary video player to render video<\/a> from a remote content delivery network on Cloudinary. The video player is efficient as we can apply multiple optimization and transformation features to the resulting video.<\/p>\n