{"id":28530,"date":"2022-06-10T07:56:52","date_gmt":"2022-06-10T07:56:52","guid":{"rendered":"http:\/\/add-google-analytics-to-a-video-in-gatsby.js"},"modified":"2022-06-10T07:56:52","modified_gmt":"2022-06-10T07:56:52","slug":"add-google-analytics-to-a-video-in-gatsby-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/","title":{"rendered":"Add Google Analytics to a Video in GatsbyJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>User insights are interpretations of quantitative and qualitative data collected via feedback and other sources, then evaluated to make choices.<\/p>\n<p>They are among the most effective tools used to discover behavioral trends, increase marketing effectiveness, provide rich user experiences, and support service activities.<\/p>\n<p>This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js. We\u2019ll utilize the Cloudinary video player to render videos and handle analytics on them.<\/p>\n<h3>CodeSandbox and GitHub<\/h3>\n<p>The complete project is on <a href=\"https:\/\/codesandbox.io\/s\/jolly-dhawan-l7butb\">CodeSandbox<\/a>. Fork it to get started quickly.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/jolly-dhawan-l7butb?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=\"Add Google Analytics to a Video in Gatsby.js\"\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  <div class=\"wp-block-cloudinary-markdown \"><p>The source code is on <a href=\"https:\/\/github.com\/ugwutotheeshoes\/gatsby-google-analytics\">GitHub<\/a>.<\/p>\n<h3>Prerequisites<\/h3>\n<p>For this project, the following requirements apply:<\/p>\n<ul>\n<li>A basic understanding of <a href=\"https:\/\/reactjs.org\/\">React.js<\/a> and <a href=\"https:\/\/www.gatsbyjs.com\/\">Gatsby.js<\/a>\n<\/li>\n<li>A Google account (create one <a href=\"https:\/\/accounts.google.com\/signup\">here<\/a>)<\/li>\n<li>A Cloudinary account (create one <a href=\"https:\/\/cloudinary.com\/homepage-2\">here<\/a>)<\/li>\n<\/ul>\n<h3>Setting up the Gatsby.js app<\/h3>\n<p><a href=\"https:\/\/www.gatsbyjs.com\/\">Gatsby <\/a>is a lightweight and adaptable framework based on Node.js with React and GraphQL that allows us to create and deploy headless websites that drive more traffic, convert better, and generate more income. It also supports Server-Side Rendering and Deferred Static Generation for rendering dynamic websites on a Node.js server.<\/p>\n<p>To create a Gatsby.js app, we run the following command in our terminal:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm init gatsby\n<\/code><\/span><\/pre>\n<p>It will request a project title and the directory name for the app. Continue to follow the prompts to select a preferred language (JavaScript or TypeScript), CMS, styling tools, and other features.\nThen Gatsby.js will ask to create a Gatsby app in the directory of the project:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    Create a <span class=\"hljs-keyword\">new<\/span> Gatsby site <span class=\"hljs-keyword\">in<\/span> the folder &lt;project-name&gt;\n    Shall we <span class=\"hljs-keyword\">do<\/span> <span class=\"hljs-keyword\">this<\/span>? <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Y<\/span>\/<span class=\"hljs-attr\">n<\/span>&gt;<\/span><\/span> : Yes\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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>With our Gatsby app fully built, we proceed to install the required dependencies.\nNavigate into the project directory and install <code>gatsby-plugin-google-analytics<\/code>, Cloudinary React SDK, and Cloudinary URL-Gen SDK.<\/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-name<\/span>&gt;<\/span>\n    npm install --save gatsby-plugin-google-analytics @cloudinary\/react @cloudinary\/url-gen\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><code>@cloudinary\/react<\/code> and <code>@cloudinary\/url-gen<\/code> are required dependencies to render the video player.  Also, the <code>gatsby-plugin-google-analytics<\/code> dependency adds the Google Analytics tracking script to our app by default.<\/p>\n<p>Running <code>npm run develop<\/code> starts the project on the local development server at <a href=\"https:\/\/localhost:8000\">https:\/\/localhost:8000<\/a> in our browser.<\/p>\n<h3>Setting up a Video in Cloudinary<\/h3>\n<p>Cloudinary is a cloud-based picture and video management service that includes uploads, storage, manipulations, optimizations, and distribution. It also enables developers to include video players in their apps that properly handle video events.<\/p>\n<p>After successfully creating an account, Cloudinary will redirect us to our account\u2019s dashboard page, where we can upload the demo video.<\/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_sanity\/ca12e2566505bca21a1ca28b447c266bfcd06f6e-1366x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"663\"\/><\/p>\n<p>Click on the \u201cUpload\u201d button as shown above and select the video file to be uploaded.<\/p>\n<h3>Creating the Video Player<\/h3>\n<p>To use Cloudinary features in our Gatsby.js app, import the required components from Cloudinary in the <code>video-player.js<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-comment\">\/\/src\/components\/video-player.js<\/span>\n    \n    <span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\"cloudinary-video-player\/dist\/cld-video-player.js\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\"cloudinary-video-player\/dist\/cld-video-player.min.css\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { AdvancedVideo } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/react\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { Cloudinary } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\"<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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>Then, embed the Cloudinary video player using the <code>AdvancedVideo<\/code> element.<\/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\">\n    <span class=\"hljs-comment\">\/\/src\/components\/video-player.js<\/span>\n    \n    <span class=\"hljs-keyword\">const<\/span> VideoPlayer = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span>(\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">AdvancedVideo<\/span>\n            <span class=\"hljs-attr\">cldVid<\/span>=<span class=\"hljs-string\">{myVideo}<\/span>\n            <span class=\"hljs-attr\">controls<\/span>\n            <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"640\"<\/span>\n            <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"480\"<\/span>\n        \/&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    )};\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> VideoPlayer;\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>As shown above, we\u2019ll also apply some configuration parameters to the video. The parameters do the following:<\/p>\n<ul>\n<li>\n<code>cldVid<\/code> &#8211; Video player attribute to hold the video\u2019s Id<\/li>\n<li>\n<code>width<\/code> and <code>height<\/code> &#8211; Displays the video with a width of 640px and a height of 480px<\/li>\n<li>\n<code>controls<\/code> &#8211; Gives the video a set of controls such as play, pause, skip, fullscreen, etc.<\/li>\n<\/ul>\n<p>After configuring the video player, the demo application will look like this:<\/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_sanity\/e2f631dce2362c16a6fc5274280c33100aa1cbdb-1366x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"663\"\/><\/p>\n<p>In the <code>VideoPlayer<\/code> component, we create a Cloudinary instance once the page loads.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">const<\/span> cld = <span class=\"hljs-keyword\">new<\/span> Cloudinary({\n    <span class=\"hljs-attr\">cloud<\/span>: {\n          <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"OUR-CLOUD-NAME\"<\/span>,\n          <span class=\"hljs-attr\">analytics<\/span>: {\n            <span class=\"hljs-attr\">events<\/span>: &#91;<span class=\"hljs-string\">\"play\"<\/span>, <span class=\"hljs-string\">\"pause\"<\/span>, <span class=\"hljs-string\">\"ended\"<\/span>, <span class=\"hljs-string\">\"error\"<\/span>, <span class=\"hljs-string\">\"mute\"<\/span>, <span class=\"hljs-string\">\"unmute\"<\/span>],\n          },\n        },\n      });\n      <span class=\"hljs-keyword\">const<\/span> myVideo = cld.video(<span class=\"hljs-string\">\"OUR-DEMO-VIDEO\"<\/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\">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>The variables and parameters in the data object above do the following:<\/p>\n<ul>\n<li>\n<code>cld<\/code>: Holds the new Cloudinary instance we\u2019ll create<\/li>\n<li>\n<code>cloudName<\/code>: Gives us access to Cloudinary. To get the cloud name, go to Cloudinary\u2019s Account Details section<\/li>\n<li>\n<code>analytics<\/code>: Shows how many times users played, paused, or watched the video<\/li>\n<li>\n<code>cld.video<\/code>: Serves as a source to access the video<\/li>\n<\/ul>\n<h3>Linking the Project to Google Analytics<\/h3>\n<h3>Hosting the Application<\/h3>\n<p>To send data to Google Analytics, we need to deploy the app and specify its URL in Google Analytics. We\u2019ll make use of Netlify to deploy the application.<\/p>\n<p><a href=\"https:\/\/www.netlify.com\/\">Netlify <\/a>is a cloud computing company that provides web hosting and serverless backend services for static websites and web apps. It is simple, quick, and automatically allows continuous deployment for projects launched from Git repositories.<\/p>\n<p>The URL of the deployed app is located <a href=\"https:\/\/gatsby-google-analytics-ug.netlify.app\/\">here<\/a>. Check out this <a href=\"https:\/\/www.netlify.com\/blog\/2016\/09\/29\/a-step-by-step-guide-deploying-on-netlify\/\">article <\/a>to learn how to host a website on Netlify. Next, we\u2019ll send real-time data from the application to Google analytics.<\/p>\n<h3>What is Google Analytics?<\/h3>\n<p><a href=\"https:\/\/analytics.google.com\/analytics\/web\/\">Google Analytics<\/a> is a web analytics service that offers statistics and essential analytical tools for SEO and marketing purposes. The service is a component of the Google Marketing Platform and is accessible to anyone with a Google account. Google Analytics is used to monitor website performance and gather visitor data.<\/p>\n<h3>Google Analytics Account Setup<\/h3>\n<p>To get real-time data from the app, we\u2019ll need to create a Google Analytics account. Create a free one <a href=\"https:\/\/analytics.google.com\/analytics\/web\/\">here <\/a>and check out this <a href=\"https:\/\/support.google.com\/analytics\/answer\/10269537?hl=en\">article <\/a>to set up the Google Analytics account.<\/p>\n<p>After setting up the account, copy the Tracking ID of the account\u2019s property.<\/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_sanity\/eead9107e096ed5bc1a409935a881f2cb588de65-409x350.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"409\" height=\"350\"\/><\/p>\n<p>Then, we\u2019ll add a <code>gatsby-plugin-google-analytics<\/code> configuration to the <code>gatsby-config.js<\/code> file located in the project\u2019s root directory.<\/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-built_in\">module<\/span>.exports = {\n      <span class=\"hljs-attr\">siteMetadata<\/span>: {\n        <span class=\"hljs-attr\">siteUrl<\/span>: <span class=\"hljs-string\">`https:\/\/www.domain.tld`<\/span>,\n      },\n      <span class=\"hljs-attr\">plugins<\/span>: &#91;\n        <span class=\"hljs-comment\">\/\/ other plugin configurations go in here<\/span>\n        {\n          <span class=\"hljs-attr\">resolve<\/span>: <span class=\"hljs-string\">`gatsby-plugin-google-analytics`<\/span>,\n          <span class=\"hljs-attr\">options<\/span>: {\n            <span class=\"hljs-attr\">trackingId<\/span>: <span class=\"hljs-string\">\"GOOGLE-ANALYTICS-TRACKING-ID\"<\/span>,\n            <span class=\"hljs-attr\">head<\/span>: <span class=\"hljs-literal\">true<\/span>,\n          },\n        },\n      ],\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>The <code>gatsby-plugin-google-analytics<\/code> configuration consists of the Tracking ID we got from our Google Analytics property settings. In addition, we inserted the head property, which places the analytics tracking code into the HTML code\u2019s head tags by default.<\/p>\n<p>Another configuration requirement is the excluding of the Cloudinary video player module during the Gatsby build process. The module requires the window API, which is not available during the construction of our app\u2019s optimal build.<\/p>\n<p>Using the <code>setWebpackConfig<\/code> API, we omit the module from the <code>gatsby-node.js<\/code> file we will create in the project\u2019s root directory.<\/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\">const<\/span> path = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">\"path\"<\/span>);\n    exports.onCreateWebpackConfig = <span class=\"hljs-function\">(<span class=\"hljs-params\">{ stage, loaders, actions }<\/span>) =&gt;<\/span> {\n      actions.setWebpackConfig({\n        <span class=\"hljs-attr\">resolve<\/span>: {\n          <span class=\"hljs-attr\">modules<\/span>: &#91;path.resolve(__dirname, <span class=\"hljs-string\">\"src\"<\/span>), <span class=\"hljs-string\">\"node_modules\"<\/span>],\n        },\n      });\n      <span class=\"hljs-keyword\">if<\/span> (stage === <span class=\"hljs-string\">\"build-html\"<\/span>) {\n        actions.setWebpackConfig({\n          <span class=\"hljs-attr\">module<\/span>: {\n            <span class=\"hljs-attr\">rules<\/span>: &#91;\n              {\n                <span class=\"hljs-attr\">test<\/span>: <span class=\"hljs-regexp\">\/cld-video-player\/<\/span>,\n                <span class=\"hljs-attr\">use<\/span>: loaders.null(),\n              },\n            ],\n          },\n        });\n      }\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<p>First, we added the src directory to the list of directories. Then, Webpack will check for modules to resolve. We\u2019ll check the build process stage to see if it was in the \u2018build-html\u2019 stage before applying a rule to the <code>cld-video-player<\/code> module. This rule excludes the module during the build using a null loader.<\/p>\n<h3>Real-time Data Events<\/h3>\n<p>We have successfully integrated Google Analytics into our project. To test this, go to the Google Analytics sidebar on the left and choose \u201cHome\u201d to see how many users interacted with our app.<\/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_sanity\/55f07bc680c4a5eb6160f861e9e32d37b038381e-1366x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"663\"\/><\/p>\n<p>As shown above, the sidebar displays the number of active users in the last 5 minutes. To view the Events stream in real-time, navigate to the Events option in Google Analytics\u2019 Realtime sidebar.<\/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_sanity\/f1216445befc5434f4707f0bdb44b5ac4a25b21b-1366x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"663\"\/><\/p>\n<p>At the bottom, we can see the user triggered certain events like when the video starts or ends during a given period.<\/p>\n<h3>Conclusion<\/h3>\n<p>This article discusses integrating Google Analytics into web applications to track user engagements, what actions users take, and what events users trigger.<\/p>\n<h3>Resources<\/h3>\n<p>We may find these resources useful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/react_video_transformations#html_video_attributes\">Cloudinary React SDK Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/video_player_events_analytics\">Cloudinary video player and analytics<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-google-analytics\/\"><code>gatsby-plugin-google-analytics<\/code> Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.netlify.com\/blog\/2016\/09\/29\/a-step-by-step-guide-deploying-on-netlify\/\">A Step to Step guide: Deploying applications on Netlify<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28531,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,378,379,134,382,371],"class_list":["post-28530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-gatsbyjs","tag-graphql","tag-guest-post","tag-player-video","tag-under-review"],"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>Add Google Analytics to a Video in GatsbyJS<\/title>\n<meta name=\"description\" content=\"This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js.\" \/>\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\/add-google-analytics-to-a-video-in-gatsby-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Google Analytics to a Video in GatsbyJS\" \/>\n<meta property=\"og:description\" content=\"This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-10T07:56:52+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\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.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\/add-google-analytics-to-a-video-in-gatsby-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Add Google Analytics to a Video in GatsbyJS\",\"datePublished\":\"2022-06-10T07:56:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA\",\"keywords\":[\"API\",\"GatsbyJS\",\"GraphQL\",\"Guest Post\",\"Player Video\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/\",\"name\":\"Add Google Analytics to a Video in GatsbyJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA\",\"datePublished\":\"2022-06-10T07:56:52+00:00\",\"description\":\"This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA\",\"width\":6646,\"height\":4430},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Google Analytics to a Video in GatsbyJS\"}]},{\"@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":"Add Google Analytics to a Video in GatsbyJS","description":"This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js.","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\/add-google-analytics-to-a-video-in-gatsby-js\/","og_locale":"en_US","og_type":"article","og_title":"Add Google Analytics to a Video in GatsbyJS","og_description":"This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-10T07:56:52+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/"},"author":{"name":"","@id":""},"headline":"Add Google Analytics to a Video in GatsbyJS","datePublished":"2022-06-10T07:56:52+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA","keywords":["API","GatsbyJS","GraphQL","Guest Post","Player Video","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/","name":"Add Google Analytics to a Video in GatsbyJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA","datePublished":"2022-06-10T07:56:52+00:00","description":"This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA","width":6646,"height":4430},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-video-in-gatsby-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add Google Analytics to a Video in GatsbyJS"}]},{"@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\/v1681924295\/Web_Assets\/blog\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200\/dadc321c7c65be736c4b3748b06a307f689b4812-6646x4430-1_2853106200.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28530","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=28530"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28530\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28531"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}