add google web-vitals

itsGKRam · Dec 26, 2020 · a59c291 · a59c291
1 parent 3c202d3
commit a59c291
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "scroll": "^3.0.1",
     "scroll-doc": "^0.2.1",
     "style-object-to-css-string": "^1.0.1",
-    "svg-filter": "^1.2.1"
+    "svg-filter": "^1.2.1",
+    "web-vitals": "^1.0.1"
   },
   "repository": {
     "type": "git",

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { getCLS, getFID, getLCP } from "web-vitals";
 import App from "./App";
 
 const rootElement = document.getElementById("root");
@@ -10,3 +11,17 @@ ReactDOM.render(
   </React.StrictMode>,
   rootElement
 );
+
+function sendToGoogleAnalytics({ name, delta, id }) {
+  // eslint-disable-next-line no-undef
+  gtag("event", name, {
+    event_category: "Web Vitals",
+    value: Math.round(name === "CLS" ? delta * 1000 : delta),
+    event_label: id,
+    non_interaction: true,
+  });
+}
+
+getCLS(sendToGoogleAnalytics);
+getFID(sendToGoogleAnalytics);
+getLCP(sendToGoogleAnalytics);
diff --git a/yarn.lock b/yarn.lock
@@ -12518,6 +12518,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-vitals@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-1.0.1.tgz#025a7ffd9d8f5e4a030e3aee6061dcb38a4b6654"
+  integrity sha512-io/H/D18edTL1D2lcaUTLNLFEVZIPhNd4IdXDB9bEb+uDv2m/6NfyHiXKLFjbmI1ubeYpoQpR1gl9nlcWdI0vA==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"