{"id":28133,"date":"2022-05-04T07:01:29","date_gmt":"2022-05-04T07:01:29","guid":{"rendered":"http:\/\/add-google-analytics-to-a-cloudinary-video"},"modified":"2022-05-04T07:01:29","modified_gmt":"2022-05-04T07:01:29","slug":"add-google-analytics-to-a-cloudinary-video","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/add-google-analytics-to-a-cloudinary-video\/","title":{"rendered":"Add Google Analytics to Your Cloudinary Video"},"content":{"rendered":"

Google Analytics is a free tracking tool provided by Google that shows how visitors interact with your website. This post will discuss how to track user engagements and events on a specific section or a component in our website using a Cloudinary video player. We will also learn more about google analytics and how to use it to track user activities.<\/p>\n

Here is a link to the demo CodeSandbox.<\/p>\n<\/div>\n \n

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

Prerequisites<\/h2>\n

First, sign up for a free Cloudinary account<\/a> if you don\u2019t have one already and upload a video<\/a> to your account. Displayed on your account\u2019s Management Console (aka Dashboard) are important details: your cloud name, API key, etc.<\/p>\n

Project Setup<\/h2>\n

Run this command in your terminal to create a React app in a folder called video-analytics<\/code>:<\/p>\n

    npx create-react-app video-analytics\n<\/code><\/span><\/pre>\n
Next, run this command to install the dependencies we need for this project:<\/p>\n
    npm install cloudinary-core cloudinary-video-player\n<\/code><\/span><\/pre>\n
Video Player Component<\/h2>\n
In your src<\/code> directory, create a folder called components<\/code>, then create a file called videoPlayer.js<\/code> inside the components<\/code> folder and add the following to it:<\/p>\n
import<\/span> { Cloudinary } from<\/span> \"cloudinary-core\"<\/span>;\nimport<\/span> \"cloudinary-video-player\"<\/span>;\nconst<\/span> cld = new<\/span> Cloudinary({ cloud_name<\/span>: \"ifeomaimoh\"<\/span>, secure<\/span>: true<\/span> });\nfunction<\/span> MyPlayer<\/span>(<\/span>) <\/span>{\n  const<\/span> myVid = cld.videoPlayer(\"player\"<\/span>, {\n    bigPlatButton<\/span>: \"true\"<\/span>,\n    controls<\/span>: \"true\"<\/span>,\n  });\n  myVid.source(\"production_ID_3741671_nknpda\"<\/span>);\n  return<\/span>;\n}\nexport<\/span> default<\/span> MyPlayer;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code above, we created an instance of Cloudinary and passed our cloud name. We also created an instance of a video player using the videoPlayer<\/code> method, and it returns a player object. The method accepts an id<\/code> (id of the video element), which tells Cloudinary where to embed the video player. It also accepts some configurations. Next, we call the source<\/code> method and pass the public id of a video uploaded to Cloudinary as an argument.<\/p>\n
Next, let\u2019s use the MyPlayer<\/code> component in our App.js<\/code> file.<\/p>\n
import<\/span> \".\/App.css\"<\/span>;\nimport<\/span> { useEffect } from<\/span> \"react\"<\/span>;\nimport<\/span> \"cloudinary-video-player\/dist\/cld-video-player.min.css\"<\/span>;\nimport<\/span> MyPlayer from<\/span> \".\/Components\/VideoPlayer\"<\/span>;\nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  useEffect(()<\/span> =><\/span> {\n    MyPlayer();\n  }, []);\n  return<\/span> (\n    <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n      <h2<\/span>><\/span>Tracking user activities on a cloudinary video<\/h2<\/span>><\/span>\n      <div<\/span> className<\/span>=\"vid-container\"<\/span>><\/span>\n        <video<\/span>\n          controls<\/span>\n          muted<\/span>\n          className<\/span>=\"cld-video-player cld-fluid\"<\/span>\n          id<\/span>=\"player\"<\/span>\n        \/><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We imported our MyPlayer<\/code> component and called it inside a useEffect<\/code> hook. We then embedded the video player by adding an HTML video<\/code> element and passed the id referenced in the videoPlayer<\/code> method.<\/p>\n
If we go over to the browser, we would see a functional video player.<\/p>\n
Setting up Google Analytics<\/h2>\n
We need to host our project and get a URL that will be used to set up the data stream. See here<\/a> for how to deploy your site on Netlify<\/a>.<\/p>\n
Now, create a free account here<\/a>. After creating the account:<\/p>\n