{"id":2441,"date":"2020-06-03T22:20:04","date_gmt":"2020-06-04T05:20:04","guid":{"rendered":"https:\/\/www.virendrachandak.com\/techtalk\/?p=2441"},"modified":"2020-06-04T21:50:44","modified_gmt":"2020-06-05T04:50:44","slug":"how-to-track-web-vitals-in-google-analytics","status":"publish","type":"post","link":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/","title":{"rendered":"Tracking Web Vitals in Google Analytics"},"content":{"rendered":"<p>There are a few different ways to track <a href=\"https:\/\/www.virendrachandak.com\/techtalk\/web-vitals-metrics\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web Vitals<\/a>, however the easiest way is using the <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\" rel=\"noopener noreferrer\" target=\"_blank\">web-vitals JavaScript library<\/a>. In this post we will load the web-vitals directly from CDN and use that to track the Core Web Vitals (LCP, FID, CLS) and other Web Vitals (FCP, TTFB) metrics.<\/p>\n<p>&nbsp;<\/p>\n<h2>Track Web Vitals in Google Analytics using analytics.js<\/h2>\n<p>The following block of code can be used to measure and send the Core Web Vitals metrics to Google Analytics as events using analytics.js<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;https:\/\/unpkg.com\/web-vitals@0.2.2\/dist\/web-vitals.es5.umd.min.js&quot;&gt;&lt;\/script&gt;\r\n \r\n&lt;script&gt;\r\nfunction sendToGoogleAnalytics({name, delta, id}) {\r\n    \/\/ Assumes the global `ga()` function exists, see:\r\n    \/\/ https:\/\/developers.google.com\/analytics\/devguides\/collection\/analyticsjs\r\n    ga('send', 'event', {\r\n        eventCategory: 'Web Vitals',\r\n        eventAction: name,\r\n        \/\/ Google Analytics metrics must be integers, so the value is rounded.\r\n        \/\/ For CLS the value is first multiplied by 1000 for greater precision\r\n        \/\/ (note: increase the multiplier for greater precision if needed).\r\n        eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),\r\n        \/\/ The `id` value will be unique to the current page load. When sending\r\n        \/\/ multiple values from the same page (e.g. for CLS), Google Analytics can\r\n        \/\/ compute a total by grouping on this ID (note: requires `eventLabel` to\r\n        \/\/ be a dimension in your report).\r\n        eventLabel: id,\r\n        \/\/ Use a non-interaction event to avoid affecting bounce rate.\r\n        nonInteraction: true,\r\n    });\r\n}\r\naddEventListener('DOMContentLoaded', function() {\r\n    webVitals.getCLS(sendToGoogleAnalytics);\r\n    webVitals.getFID(sendToGoogleAnalytics);\r\n    webVitals.getLCP(sendToGoogleAnalytics);\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h2>Track Web Vitals in Google Analytics using gtag.js<\/h2>\n<p>The following block of code can be used to measure and send the Core Web Vitals metrics to Google Analytics as events using gtag.js<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;https:\/\/unpkg.com\/web-vitals@0.2.2\/dist\/web-vitals.es5.umd.min.js&quot;&gt;&lt;\/script&gt;\r\n \r\n&lt;script&gt;\r\nfunction sendToGoogleAnalytics({name, delta, id}) {\r\n    \/\/ Assumes the global `gtag()` function exists, see:\r\n    \/\/ https:\/\/developers.google.com\/analytics\/devguides\/collection\/gtagjs\r\n    gtag('event', name, {\r\n        event_category: 'Web Vitals',\r\n        \/\/ Google Analytics metrics must be integers, so the value is rounded.\r\n        \/\/ For CLS the value is first multiplied by 1000 for greater precision\r\n        \/\/ (note: increase the multiplier for greater precision if needed).\r\n        value: Math.round(name === 'CLS' ? delta * 1000 : delta),\r\n        \/\/ The `id` value will be unique to the current page load. When sending\r\n        \/\/ multiple values from the same page (e.g. for CLS), Google Analytics can\r\n        \/\/ compute a total by grouping on this ID (note: requires `eventLabel` to\r\n        \/\/ be a dimension in your report).\r\n        event_label: id,\r\n        \/\/ Use a non-interaction event to avoid affecting bounce rate.\r\n        non_interaction: true,\r\n    });\r\n}\r\n \r\naddEventListener('DOMContentLoaded', function() {\r\n    webVitals.getCLS(sendToGoogleAnalytics);\r\n    webVitals.getFID(sendToGoogleAnalytics);\r\n    webVitals.getLCP(sendToGoogleAnalytics);\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h2>Track Web Vitals in Google Analytics using Google Tag Manager<\/h2>\n<p>The following block of code can be used to measure and send the Core Web Vitals metrics to Google Tag Manager. After this we will also need to configure Google Tag Manager to send that data to Google Analytics (see <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\/pull\/28#discussion_r422701126\" rel=\"noopener noreferrer\" target=\"_blank\">this comment<\/a> for implementation details).<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;https:\/\/unpkg.com\/web-vitals@0.2.2\/dist\/web-vitals.es5.umd.min.js&quot;&gt;&lt;\/script&gt;\r\n \r\n&lt;script&gt;\r\nfunction sendToGTM({name, delta, id}) {\r\n    \/\/ Assumes the global `dataLayer` array exists, see:\r\n    \/\/ https:\/\/developers.google.com\/tag-manager\/devguide\r\n    dataLayer.push({\r\n        event: 'web-vitals',\r\n        event_category: 'Web Vitals',\r\n        event_action: name,\r\n        \/\/ Google Analytics metrics must be integers, so the value is rounded.\r\n        \/\/ For CLS the value is first multiplied by 1000 for greater precision\r\n        \/\/ (note: increase the multiplier for greater precision if needed).\r\n        event_value: Math.round(name === 'CLS' ? delta * 1000 : delta),\r\n        \/\/ The `id` value will be unique to the current page load. When sending\r\n        \/\/ multiple values from the same page (e.g. for CLS), Google Analytics can\r\n        \/\/ compute a total by grouping on this ID (note: requires `eventLabel` to\r\n        \/\/ be a dimension in your report).\r\n        event_label: id,\r\n    });\r\n}\r\n \r\naddEventListener('DOMContentLoaded', function() {\r\n    webVitals.getCLS(sendToGTM);\r\n    webVitals.getFID(sendToGTM);\r\n    webVitals.getLCP(sendToGTM);\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h2>Track Other Web Vitals metrics<\/h2>\n<p>In addition to the Core Web Vitals we can track other Web Vitals using the web-vitals JavaScript library. We can just use the getFCP() and getTTFB() functions to get the data. Here is code that we can use to track the all the Web Vitals metrics,<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;https:\/\/unpkg.com\/web-vitals@0.2.2\/dist\/web-vitals.es5.umd.min.js&quot;&gt;&lt;\/script&gt;\r\n \r\n&lt;script&gt;\r\nfunction sendToGoogleAnalytics({name, delta, id}) {\r\n    \/\/ Assumes the global `ga()` function exists, see:\r\n    \/\/ https:\/\/developers.google.com\/analytics\/devguides\/collection\/analyticsjs\r\n    ga('send', 'event', {\r\n        eventCategory: 'Web Vitals',\r\n        eventAction: name,\r\n        \/\/ Google Analytics metrics must be integers, so the value is rounded.\r\n        \/\/ For CLS the value is first multiplied by 1000 for greater precision\r\n        \/\/ (note: increase the multiplier for greater precision if needed).\r\n        eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),\r\n        \/\/ The `id` value will be unique to the current page load. When sending\r\n        \/\/ multiple values from the same page (e.g. for CLS), Google Analytics can\r\n        \/\/ compute a total by grouping on this ID (note: requires `eventLabel` to\r\n        \/\/ be a dimension in your report).\r\n        eventLabel: id,\r\n        \/\/ Use a non-interaction event to avoid affecting bounce rate.\r\n        nonInteraction: true,\r\n    });\r\n}\r\naddEventListener('DOMContentLoaded', function() {\r\n    webVitals.getCLS(sendToGoogleAnalytics);\r\n    webVitals.getFID(sendToGoogleAnalytics);\r\n    webVitals.getLCP(sendToGoogleAnalytics);\r\n    webVitals.getFCP(sendToGoogleAnalytics);\r\n    webVitals.getTTFB(sendToGoogleAnalytics);\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Once you send the data to Google Analytics you can easily check it under the Events report. Note: the CLS number were multiplied by 1000 when we sent to Google Analytics for better accuracy.<\/p>\n<h2>Google Analytics Web Vitals Dashboard<\/h2>\n<p>I have created a <a href=\"https:\/\/analytics.google.com\/analytics\/web\/template?uid=H4hQiuJlTvKuzvajY86Fsw\" rel=\"noopener noreferrer\" target=\"_blank\">Google Analytics Web Vitals Dashboard<\/a> that can be imported into Google Analytics to view all the Web Vitals data easily. This dashboard will display the numbers for the different Web Vitals (LCP, FID, CLS, FCP and TTFB) and also the pages with worst numbers for each of them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are a few different ways to track Web Vitals, however the easiest way is using the web-vitals JavaScript library. In this post we will load the web-vitals directly from CDN and use that to track the Core Web Vitals (LCP, FID, CLS) and other Web Vitals (FCP, TTFB) metrics. &nbsp; Track Web Vitals in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[5,138,7],"tags":[161,160,124,159],"class_list":["post-2441","post","type-post","status-publish","format-standard","hentry","category-optimization-tips","category-seo","category-tools","tag-core-web-vitals","tag-google-analytics","tag-snippets","tag-web-vitals"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tracking Web Vitals in Google Analytics - Virendra&#039;s TechTalk<\/title>\n<meta name=\"description\" content=\"There are a few different ways to track Web Vitals, however the easiest way is using the web-vitals JavaScript library. In this post we will load the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tracking Web Vitals in Google Analytics - Virendra&#039;s TechTalk\" \/>\n<meta property=\"og:description\" content=\"There are a few different ways to track Web Vitals, however the easiest way is using the web-vitals JavaScript library. In this post we will load the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/\" \/>\n<meta property=\"og:site_name\" content=\"Virendra&#039;s TechTalk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-04T05:20:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-05T04:50:44+00:00\" \/>\n<meta name=\"author\" content=\"Virendra Chandak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:site\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Virendra Chandak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/\"},\"author\":{\"name\":\"Virendra Chandak\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"headline\":\"Tracking Web Vitals in Google Analytics\",\"datePublished\":\"2020-06-04T05:20:04+00:00\",\"dateModified\":\"2020-06-05T04:50:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/\"},\"wordCount\":980,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"keywords\":[\"Core Web Vitals\",\"Google Analytics\",\"snippets\",\"Web Vitals\"],\"articleSection\":[\"Optimization Tips\",\"SEO\",\"Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/\",\"name\":\"Tracking Web Vitals in Google Analytics - Virendra&#039;s TechTalk\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\"},\"datePublished\":\"2020-06-04T05:20:04+00:00\",\"dateModified\":\"2020-06-05T04:50:44+00:00\",\"description\":\"There are a few different ways to track Web Vitals, however the easiest way is using the web-vitals JavaScript library. In this post we will load the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-track-web-vitals-in-google-analytics\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TechTalk\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimization Tips\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/category\\\/optimization-tips\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tracking Web Vitals in Google Analytics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\",\"name\":\"Virendra's TechTalk\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\",\"name\":\"Virendra Chandak\",\"logo\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.virendrachandak.com\",\"https:\\\/\\\/www.facebook.com\\\/virendrachandak\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/virendrachandak\\\/\",\"https:\\\/\\\/x.com\\\/virendrachandak\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tracking Web Vitals in Google Analytics - Virendra&#039;s TechTalk","description":"There are a few different ways to track Web Vitals, however the easiest way is using the web-vitals JavaScript library. In this post we will load the","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:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/","og_locale":"en_US","og_type":"article","og_title":"Tracking Web Vitals in Google Analytics - Virendra&#039;s TechTalk","og_description":"There are a few different ways to track Web Vitals, however the easiest way is using the web-vitals JavaScript library. In this post we will load the","og_url":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/","og_site_name":"Virendra&#039;s TechTalk","article_publisher":"https:\/\/www.facebook.com\/virendrachandak","article_author":"https:\/\/www.facebook.com\/virendrachandak","article_published_time":"2020-06-04T05:20:04+00:00","article_modified_time":"2020-06-05T04:50:44+00:00","author":"Virendra Chandak","twitter_card":"summary_large_image","twitter_creator":"@virendrachandak","twitter_site":"@virendrachandak","twitter_misc":{"Written by":"Virendra Chandak","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/#article","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/"},"author":{"name":"Virendra Chandak","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"headline":"Tracking Web Vitals in Google Analytics","datePublished":"2020-06-04T05:20:04+00:00","dateModified":"2020-06-05T04:50:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/"},"wordCount":980,"commentCount":2,"publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"keywords":["Core Web Vitals","Google Analytics","snippets","Web Vitals"],"articleSection":["Optimization Tips","SEO","Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/","url":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/","name":"Tracking Web Vitals in Google Analytics - Virendra&#039;s TechTalk","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website"},"datePublished":"2020-06-04T05:20:04+00:00","dateModified":"2020-06-05T04:50:44+00:00","description":"There are a few different ways to track Web Vitals, however the easiest way is using the web-vitals JavaScript library. In this post we will load the","breadcrumb":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-track-web-vitals-in-google-analytics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TechTalk","item":"https:\/\/www.virendrachandak.com\/techtalk\/"},{"@type":"ListItem","position":2,"name":"Optimization Tips","item":"https:\/\/www.virendrachandak.com\/techtalk\/category\/optimization-tips\/"},{"@type":"ListItem","position":3,"name":"Tracking Web Vitals in Google Analytics"}]},{"@type":"WebSite","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website","url":"https:\/\/www.virendrachandak.com\/techtalk\/","name":"Virendra's TechTalk","description":"","publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.virendrachandak.com\/techtalk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17","name":"Virendra Chandak","logo":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.virendrachandak.com","https:\/\/www.facebook.com\/virendrachandak","https:\/\/www.linkedin.com\/in\/virendrachandak\/","https:\/\/x.com\/virendrachandak"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2vTtQ-Dn","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2455,"url":"https:\/\/www.virendrachandak.com\/techtalk\/web-vitals-metrics\/","url_meta":{"origin":2441,"position":0},"title":"Web Vitals Metrics &#8211; What you should know","author":"Virendra Chandak","date":"June 4, 2020","format":false,"excerpt":"What are Web Vitals? Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. These consists of some Core Web Vitals (LCP, FID and CLS) and a few others (TTFB and FCP). What are\u2026","rel":"","context":"In &quot;Glossary\/Definitions&quot;","block_context":{"text":"Glossary\/Definitions","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/glossarydefinitions\/"},"img":{"alt_text":"Target values for Web Vitals metrics","src":"https:\/\/i0.wp.com\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2020\/06\/Web_Vitals.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2769,"url":"https:\/\/www.virendrachandak.com\/techtalk\/what-is-clickhouse\/","url_meta":{"origin":2441,"position":1},"title":"What Is ClickHouse, and When Should You Use It?","author":"Virendra Chandak","date":"July 21, 2026","format":false,"excerpt":"ClickHouse is an open-source columnar database built for analytics at massive scale: fast aggregation and filtering over very large datasets. ClickHouse may look like a relational database, but it\u2019s engineered for a fundamentally different purpose than Postgres or MySQL, and treating it as a drop-in replacement is the most common\u2026","rel":"","context":"In &quot;Clickhouse&quot;","block_context":{"text":"Clickhouse","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/clickhouse\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":699,"url":"https:\/\/www.virendrachandak.com\/techtalk\/get-search-query-string-from-search-engines-using-php\/","url_meta":{"origin":2441,"position":2},"title":"Get search query string from search engines using PHP","author":"Virendra Chandak","date":"February 4, 2012","format":false,"excerpt":"I have often come across situations when I would like to implement some functionality based on what the user searched for in a search engine like Google, Bing etc. The search query string is normally passed as GET variables 'q' or 'query'. The function below will return the search query\u2026","rel":"","context":"In &quot;PHP&quot;","block_context":{"text":"PHP","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/php\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2287,"url":"https:\/\/www.virendrachandak.com\/techtalk\/async-vs-defer\/","url_meta":{"origin":2441,"position":3},"title":"How to remove render blocking JavaScript with defer and async","author":"Virendra Chandak","date":"January 14, 2019","format":false,"excerpt":"With HTML5 there are 2 new boolean attributes for <script> tag which indicates to the browser how the script should be evaluated. The 2 attributes are defer and async. Using these attributes can help improve the page load time by downloading the script in parallel when the page is being\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":157,"url":"https:\/\/www.virendrachandak.com\/techtalk\/cachebuster-code-in-javascript\/","url_meta":{"origin":2441,"position":4},"title":"Cachebuster code in JavaScript","author":"Virendra Chandak","date":"September 25, 2011","format":false,"excerpt":"The JavaScript, CSS and other files used in a website are often cached by the browser. Sometimes we might want the browser to always fetch the file from the server instead of from the cache. To do this we can use a cachebuster code to make the browser think that\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":450,"url":"https:\/\/www.virendrachandak.com\/techtalk\/getting-real-client-ip-address-in-php-2\/","url_meta":{"origin":2441,"position":5},"title":"Getting real client IP address in PHP","author":"Virendra Chandak","date":"October 23, 2011","format":false,"excerpt":"Many times we need the visitor's ipaddress for validation, security, spam prevention, etc. Getting the Visitor's ipaddress is very easy in PHP. The simplest way to get the visitor's\/client's ipaddress is using the $_SERVER['REMOTE_ADDR'] or $_SERVER['REMOTE_HOST'] variables. The variable in the $_SERVER array are created by the web server (like\u2026","rel":"","context":"In &quot;Functionality&quot;","block_context":{"text":"Functionality","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/functionality\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/2441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/comments?post=2441"}],"version-history":[{"count":0,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/2441\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/media?parent=2441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/categories?post=2441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/tags?post=2441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}