{"id":7122,"date":"2024-06-21T12:49:44","date_gmt":"2024-06-21T12:49:44","guid":{"rendered":"https:\/\/www.cueforgood.com\/blog\/?p=7122"},"modified":"2025-11-13T15:56:48","modified_gmt":"2025-11-13T10:26:48","slug":"how-to-measure-web-vitals-within-google-analytics","status":"publish","type":"post","link":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/","title":{"rendered":"How to Measure &amp; Monitor Web Vitals within Google Analytics"},"content":{"rendered":"\r\n<p>Google\u2019s Page Experience is defined as good or bad on the basis of 5 factors &#8211; Core Web Vitals(CWV) being one of them. These metrics arguably help measure how pleasant or not pleasant the page\u2019s overall experience is for a user.<\/p>\r\n\r\n\r\n\r\n<p>As per Google\u2019s documentation, there are 5 web vitals namely TTFB, FCP, CLS, FID, and LCP. When measuring page experience, it is only Core Web Vitals that are taken into account which consists of CLS, FID, and LCP.<\/p>\r\n\r\n\r\n\r\n<p>There are several ways you can <a href=\"https:\/\/www.cueforgood.com\/blog\/measuring-site-speed-the-right-way\/\">measure Core Web Vitals<\/a> for your page. The&nbsp; tools used for measuring site speed are classified in two categories &#8211; field reporting tools (or Real User Monitoring) and lab reporting tools (or Simulated tools). The Lighthouse report you run using Chrome Dev tools or Chrome Extension is a simulated tool. It tries to mimic a real world setting but it is not one truly.<\/p>\r\n\r\n\r\n\r\n<p>You could use the Core Web Vitals tracker in Google Analytics to act as a field reporting tool and provide data for real users visiting your website.<\/p>\r\n\r\n\r\n\r\n<p>This post will discuss how to set up Google Analytics for measuring Core Web Vitals and creating reports to get useful insights.<\/p>\r\n\r\n\r\n\r\n<p><strong>Note: <\/strong>In the article below, examples given also include measuring TTFB and FCP. It\u2019s not necessary to include these two vitals in your report.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Setting Up Google Analytics to Measure Core Web Vitals<\/h2>\r\n\r\n\r\n\r\n<p>Google Chrome released a <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\">web vitals library<\/a> in June 2020 that website owners can install on their website to record the core web vitals for each page load event by real users. This GA setup essentially makes use of this library to get real user numbers.<br><\/p>\r\n\r\n\r\n\r\n<p>The steps discussed below make use of Google Tag Manager(GTM) to send data to GA. So you\u2019ll need to be familiar with basic terms in GTM to follow these steps.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 1: Insert a code snippet that populates the data layer with CWV values<\/h3>\r\n\r\n\r\n\r\n<p>The purpose of this code snippet is to load the web vitals library and populate the measured metrics into the data layer. The data stored in this data layer is sent to GTM in the next steps.<\/p>\r\n\r\n\r\n\r\n<p>Remember to update the library\u2019s version in this code should the web vitals library update.<\/p>\r\n\r\n\r\n\r\n<p>Also make sure that this code is placed in the head section and above the GTM container tag.<\/p>\r\n\r\n\r\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; auto-links: false; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;https:\/\/unpkg.com\/web-vitals@2.0.1\/dist\/web-vitals.umd.js&quot;&gt;&lt;\/script&gt;   \r\n&lt;script&gt;\r\n        function sendToGTM(name, delta, id) {\r\n            ononline = dataLayer.push({\r\n                event: &#039;web-vitals&#039;,\r\n                event_category: &#039;Performance&#039;,\r\n                event_action: name.name,\r\n                event_value: Math.round(name.name === &#039;CLS&#039; ? name.delta * 1000 : name.delta),\r\n                event_label: name.id\r\n            });\r\n        }\r\n        webVitals.getCLS(sendToGTM);\r\n        webVitals.getFID(sendToGTM);\r\n        webVitals.getLCP(sendToGTM);\r\n        webVitals.getFCP(sendToGTM);\r\n        webVitals.getTTFB(sendToGTM);\r\n&lt;\/script&gt;\r\n<\/pre><\/div>\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 2: Create corresponding data layer variables in GTM<\/h3>\r\n\r\n\r\n\r\n<p>The script above stores 4 variables: event_category, event_action, event_value, and event_label. In your GTM workspace, create 4 data layer variables corresponding to these 4 variables.<\/p>\r\n\r\n\r\n\r\n<p>Make sure the Data Layer Variable Names exactly match their corresponding variable names in the data layer in the code snippet above.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 3: Set up a trigger for the GA tag<\/h3>\r\n\r\n\r\n\r\n<p>This trigger will decide when GTM should send the values recorded to GA. Set up this trigger for the custom event with the event name \u201cweb-vitals\u201d. You can use any name but make sure this event name is the same as the one you used in the code snippet above(highlighted in bold).<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 4: Create a tag that sends data layer values to GA<\/h3>\r\n\r\n\r\n\r\n<p>Create a Google Analytics tag for Event tracking. Under Event Tracking parameters, select the 4 data layer variables you created in step 2.<\/p>\r\n\r\n\r\n\r\n<p>Now, add a trigger that tells when this tag should fire. For this, add the trigger you created in Step 3.<\/p>\r\n\r\n\r\n\r\n<p>When your GA is set for measuring CWV, you\u2019ll be able to see the web vitals in Behavior &gt; Events. It can take some hours for the data to show in GA reports. Once you have sufficient data collected over time, the report will&nbsp; look something like this:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"224\" src=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-ss-1024x224.png\" alt=\"Web vitals event view in Google Analytics\" class=\"wp-image-7138\" srcset=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-ss-1024x224.png 1024w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-ss-300x66.png 300w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-ss-768x168.png 768w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-ss.png 1092w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>When you drill down on a web vital, you\u2019ll see a list of labels which doesn\u2019t help visualize the web vitals for each page. There are ways you can visualize them better, which are discussed below:<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Creating Reports in GA to Visualize Web Vitals<\/h2>\r\n\r\n\r\n\r\n<p>To see web vitals by page in default event reports in GA, you will need to add \u201cPage\u201d as the secondary dimension. This requires adding the secondary dimension each time you open the report, making it inconvenient. That\u2019s why we\u2019ll create custom reports that simplify visualizing and getting important insights quickly.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Custom Report<\/h3>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>Step 1:&nbsp;<\/strong><\/h4>\r\n\r\n\r\n\r\n<p>Head to Customization &gt; Custom Reports &gt; + New Custom Report. Give a name to your report, for example, Web Vitals.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>Step 2:&nbsp;<\/strong><\/h4>\r\n\r\n\r\n\r\n<p>Under Metric Groups, add Total Events and Avg. Value. Total Events will help sort your pages in ascending order and you will have the most visited pages on top. Second metric, Avg. Value, will give you a quick overview of vitals before you drill down.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"336\" src=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-metrics-1024x336.png\" alt=\"Web vitals custom report metrics in google analytics\" class=\"wp-image-7137\" srcset=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-metrics-1024x336.png 1024w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-metrics-300x98.png 300w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-metrics-768x252.png 768w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-metrics.png 1089w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>Step 3:&nbsp;<\/strong><\/h4>\r\n\r\n\r\n\r\n<p>Next, you need to make sure the only events being reported in the report are web vitals. For this, head to Filters and add a filter that includes Event Category with the name you used for your web vitals event category. In the code snippet we used above, this name was Performance.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"118\" src=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/screenshot-analytics.google.com-2021.06.11-16_44_00.png\" alt=\"Web vitals event category in google analytics custom report\" class=\"wp-image-7139\" srcset=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/screenshot-analytics.google.com-2021.06.11-16_44_00.png 703w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/screenshot-analytics.google.com-2021.06.11-16_44_00-300x50.png 300w\" sizes=\"auto, (max-width: 703px) 100vw, 703px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>To check which category event name to use, check the script you used to send data to GA. If you used the script shared in the <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\">web-vitals library<\/a>, the Event Category should be \u2018Web Vitals\u2019.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>Step 4:&nbsp;<\/strong><\/h4>\r\n\r\n\r\n\r\n<p>Now, set up dimension drill downs to be able to see values of each of the 3 core web vitals in detail. Set them up in the order: Page &gt; Event Action &gt; Event Label<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"573\" height=\"152\" src=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/screenshot-analytics.google.com-2021.06.11-16_49_29.png\" alt=\"\" class=\"wp-image-7140\" srcset=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/screenshot-analytics.google.com-2021.06.11-16_49_29.png 573w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/screenshot-analytics.google.com-2021.06.11-16_49_29-300x80.png 300w\" sizes=\"auto, (max-width: 573px) 100vw, 573px\" \/><\/figure>\r\n\r\n\r\n\r\n<p><strong>Reasoning behind this drilldown:<\/strong><\/p>\r\n\r\n\r\n\r\n<p>It\u2019s needless to mention Page should be the top dimension. Page speed is measured with respect to page, hence chosen as the top dimension.<\/p>\r\n\r\n\r\n\r\n<p>Event Action consists of core web vitals being measured: LCP, FID, and CLS. This arrangement will show the Total Events and Avg Value for each of these web vitals for the selected page.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>The last dimension, Event Label, is used to identify a unique web vital measurement per page load. Regardless of the number of times the page was reloaded, there will be a unique Event Label assigned to the measured metric.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Save the report and check if it was per your expectations. As per the instructions above, you should get a report like this:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"821\" height=\"714\" src=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-report-1.png\" alt=\"\" class=\"wp-image-7127\" srcset=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-report-1.png 821w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-report-1-300x261.png 300w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-report-1-768x668.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>And web vitals per page when you drill down will be as follows:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"812\" src=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-page-values-1.png\" alt=\"\" class=\"wp-image-7128\" srcset=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-page-values-1.png 884w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-page-values-1-300x276.png 300w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-page-values-1-768x705.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Drilldown further to a specific web vital and you\u2019ll see Values by Event Label, which basically means, you are seeing values for unique page load events.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>Multiple Values for CLS<\/strong><\/h4>\r\n\r\n\r\n\r\n<p>When looking at the report for CLS, the number of events per Event Label are sometimes more than 1. This is because CLS is measured multiple times as long as the page is live in the browser. GA would show you a sum total of the CLS values calculated throughout the life of that page.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong>75th Percentile of Values<\/strong><\/h4>\r\n\r\n\r\n\r\n<p>The web vitals can vary greatly for different &#8216;real users&#8217;. This means that the average value can shift by a big number due to a small number of users with poor web vitals. To classify overall performance of a page, it is <a href=\"https:\/\/web.dev\/defining-core-web-vitals-thresholds\/#refresher:-core-web-vitals-metrics-and-thresholds\">recommended<\/a> to use 75th percentile of all page views. To put it in simpler terms, if 75% of page views meet &#8220;good&#8221; web vital thresholds, the web page&#8217;s web vital performance is considered &#8220;good&#8221;.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Custom Dashboard<\/h3>\r\n\r\n\r\n\r\n<p>Use GA\u2019s custom dashboard to visualize web vitals values by browser, country and device.<\/p>\r\n\r\n\r\n\r\n<p>A common differentiator for web vitals in different simulations is device. Web vitals can vary greatly for mobile, desktop, and tablet devices.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Create a handy widget in your custom dashboard that provides a sum-up of avg web vital. To do this, click on + Add Widget in Custom Dashboard. Select Device Category as the dimension, and Avg. Value and Total Events as the metrics. Add a Filter that only shows Event Action LCP.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"432\" src=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-by-device-1.png\" alt=\"\" class=\"wp-image-7129\" srcset=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-by-device-1.png 563w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-by-device-1-300x230.png 300w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Create two more widgets for FID and CLS. You can also link these widgets to custom reports that show values for the web vital by page and compare segments for mobile and desktop users.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"815\" src=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-FID-1.png\" alt=\"\" class=\"wp-image-7130\" srcset=\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-FID-1.png 977w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-FID-1-300x250.png 300w, https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-FID-1-768x641.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>We created a <a href=\"https:\/\/analytics.google.com\/analytics\/web\/template?uid=gqjnu8uaQNCd4HMeO2W6DQ\">custom dashboard template for core web vitals<\/a> that you can simply import and make use of in your GA property.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Final Words<\/h2>\r\n\r\n\r\n\r\n<p>With access to real user data in your GA, you can organize and view this data by browser, device, location and even metrics like bounce rate and conversions. Imagine comparing conversions from users with better website experience to users with poor or discovering how many returning users are so because of good page experience on your site.<\/p>\r\n\r\n\r\n\r\n<p>Happy measuring!<br><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Google\u2019s Page Experience is defined as good or bad on the basis of 5 factors &#8211; Core Web Vitals(CWV) being &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to Measure &amp; Monitor Web Vitals within Google Analytics&#8221;<\/span><\/a><\/p>\n","protected":false},"author":82,"featured_media":7133,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,14],"tags":[],"class_list":["post-7122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-analytics","category-seo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Measure &amp; Monitor Web Vitals within Google Analytics<\/title>\n<meta name=\"description\" content=\"Complete guide to track First Color Paint, Cumulative Layout Shift, and other Web Vitals in your GA by setting up custom event in GTM.\" \/>\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.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Measure &amp; Monitor Web Vitals within Google Analytics\" \/>\n<meta property=\"og:description\" content=\"Complete guide to track First Color Paint, Cumulative Layout Shift, and other Web Vitals in your GA by setting up custom event in GTM.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/\" \/>\n<meta property=\"og:site_name\" content=\"CueBlog\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-21T12:49:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-13T10:26:48+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-analytics.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1128\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Harleen Sandhu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Harleen Sandhu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/\",\"url\":\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/\",\"name\":\"How to Measure & Monitor Web Vitals within Google Analytics\",\"isPartOf\":{\"@id\":\"https:\/\/www.cueforgood.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-analytics.png\",\"datePublished\":\"2024-06-21T12:49:44+00:00\",\"dateModified\":\"2025-11-13T10:26:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.cueforgood.com\/blog\/#\/schema\/person\/07e30f758ffdbe4e3081c6be3abf6ace\"},\"description\":\"Complete guide to track First Color Paint, Cumulative Layout Shift, and other Web Vitals in your GA by setting up custom event in GTM.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#primaryimage\",\"url\":\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-analytics.png\",\"contentUrl\":\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-analytics.png\",\"width\":1128,\"height\":525,\"caption\":\"Measuring web vitals in Google Analytics\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cueforgood.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Measure &amp; Monitor Web Vitals within Google Analytics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cueforgood.com\/blog\/#website\",\"url\":\"https:\/\/www.cueforgood.com\/blog\/\",\"name\":\"CueBlog\",\"description\":\"Leveraging eCommerce for Purpose\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cueforgood.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cueforgood.com\/blog\/#\/schema\/person\/07e30f758ffdbe4e3081c6be3abf6ace\",\"name\":\"Harleen Sandhu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.cueforgood.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/cueb-100x100.png\",\"contentUrl\":\"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/cueb-100x100.png\",\"caption\":\"Harleen Sandhu\"},\"description\":\"I'm a part of CueForGood's SEO team. I like traveling, reading, and experimenting with new ways in SEO to get the best results.\",\"url\":\"https:\/\/www.cueforgood.com\/blog\/author\/harleen-sandhu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Measure & Monitor Web Vitals within Google Analytics","description":"Complete guide to track First Color Paint, Cumulative Layout Shift, and other Web Vitals in your GA by setting up custom event in GTM.","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.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/","og_locale":"en_US","og_type":"article","og_title":"How to Measure & Monitor Web Vitals within Google Analytics","og_description":"Complete guide to track First Color Paint, Cumulative Layout Shift, and other Web Vitals in your GA by setting up custom event in GTM.","og_url":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/","og_site_name":"CueBlog","article_published_time":"2024-06-21T12:49:44+00:00","article_modified_time":"2025-11-13T10:26:48+00:00","og_image":[{"width":1128,"height":525,"url":"http:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-analytics.png","type":"image\/png"}],"author":"Harleen Sandhu","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Harleen Sandhu","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/","url":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/","name":"How to Measure & Monitor Web Vitals within Google Analytics","isPartOf":{"@id":"https:\/\/www.cueforgood.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#primaryimage"},"image":{"@id":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-analytics.png","datePublished":"2024-06-21T12:49:44+00:00","dateModified":"2025-11-13T10:26:48+00:00","author":{"@id":"https:\/\/www.cueforgood.com\/blog\/#\/schema\/person\/07e30f758ffdbe4e3081c6be3abf6ace"},"description":"Complete guide to track First Color Paint, Cumulative Layout Shift, and other Web Vitals in your GA by setting up custom event in GTM.","breadcrumb":{"@id":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#primaryimage","url":"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-analytics.png","contentUrl":"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/web-vitals-analytics.png","width":1128,"height":525,"caption":"Measuring web vitals in Google Analytics"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cueforgood.com\/blog\/how-to-measure-web-vitals-within-google-analytics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cueforgood.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Measure &amp; Monitor Web Vitals within Google Analytics"}]},{"@type":"WebSite","@id":"https:\/\/www.cueforgood.com\/blog\/#website","url":"https:\/\/www.cueforgood.com\/blog\/","name":"CueBlog","description":"Leveraging eCommerce for Purpose","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cueforgood.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.cueforgood.com\/blog\/#\/schema\/person\/07e30f758ffdbe4e3081c6be3abf6ace","name":"Harleen Sandhu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cueforgood.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/cueb-100x100.png","contentUrl":"https:\/\/www.cueforgood.com\/blog\/wp-content\/uploads\/2021\/06\/cueb-100x100.png","caption":"Harleen Sandhu"},"description":"I'm a part of CueForGood's SEO team. I like traveling, reading, and experimenting with new ways in SEO to get the best results.","url":"https:\/\/www.cueforgood.com\/blog\/author\/harleen-sandhu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/posts\/7122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/users\/82"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/comments?post=7122"}],"version-history":[{"count":14,"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/posts\/7122\/revisions"}],"predecessor-version":[{"id":7361,"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/posts\/7122\/revisions\/7361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/media\/7133"}],"wp:attachment":[{"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/media?parent=7122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/categories?post=7122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cueforgood.com\/blog\/wp-json\/wp\/v2\/tags?post=7122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}