{"id":74610,"date":"2025-02-07T23:27:06","date_gmt":"2025-02-07T23:27:06","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/track-core-web-vitals-in-ga4-with-google-tag-manager\/"},"modified":"2025-02-07T23:27:06","modified_gmt":"2025-02-07T23:27:06","slug":"track-core-web-vitals-in-ga4-with-google-tag-manager","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=74610","title":{"rendered":"Track Core Web Vitals In GA4 With Google Tag Manager"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<blockquote>\n<p><strong>Updated 3 March 2023<\/strong>: Added a checkbox to the template to enable collecting FCP, INP, and TTFB metrics, too..<\/p>\n<\/blockquote>\n<p><strong>Core Web Vitals<\/strong> is described on the dedicated <a href=\"https:\/\/web.dev\/vitals\/\">web.dev resource<\/a> as (emphasis mine):<\/p>\n<blockquote>\n<p>\u201cCore Web Vitals are the subset of Web Vitals that apply to all pages, <strong>should be measured by all site owners<\/strong>, and will be surfaced across all Google tools.\u201d<\/p>\n<\/blockquote>\n<div style=\"aspect-ratio: 1560 \/ 514;\" class=\"figure \">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/vitals-recommendations.jpg\" title=\"Recommended Core Web Vitals thresholds - from https:\/\/web.dev\/vitals\/\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"514\" width=\"1560\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/vitals-recommendations.jpg#ZgotmplZ\" alt=\"Recommended Core Web Vitals thresholds - from https:\/\/web.dev\/vitals\/\"\/><\/p>\n<p>    <\/a><\/p>\n<p>    <span class=\"caption\">Recommended Core Web Vitals thresholds &#8211; from https:\/\/web.dev\/vitals\/<\/span><\/p>\n<\/div>\n<p>The <strong>Core<\/strong> Web Vitals measurement as suggested by Google are:<\/p>\n<ul>\n<li><a href=\"https:\/\/web.dev\/lcp\/\">Largest Contentful Paint<\/a> (LCP), which measures the time it took to load the largest image or text block in the viewport. This should optimally be below <strong>2500 milliseconds<\/strong>.<\/li>\n<li><a href=\"https:\/\/web.dev\/fid\/\">First Input Delay<\/a> (FID), which measures the time it took for the browser to react to user interaction (e.g. click or tap). This should optimally be below <strong>100 milliseconds<\/strong>.<\/li>\n<li><a href=\"https:\/\/web.dev\/cls\/\">Cumulative Layout Shift<\/a> (CLS), which measures the extent of <em>unexpected<\/em> shifts in layout during the lifetime of the page. This should optimally have a score of <strong>less than 0.1<\/strong>.<\/li>\n<\/ul>\n<p>There are also <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals#metric\">other metrics<\/a> available through the Web Vitals library (FCP, INP, and TTFB).<\/p>\n<p>Tracking Core Web Vitals has already been explored quite thoroughly in articles such as <a href=\"https:\/\/www.tagmanageritalia.it\/advanced-guide-how-to-track-core-web-vitals-with-google-tag-manager\/\">this TagManagerItalia piece<\/a>, but I wanted to contribute to the discussion with something unique.<\/p>\n<p>In this article, I\u2019ll show you how to use a <a href=\"https:\/\/www.simoahava.com\/custom-templates\/core-web-vitals\/\">new custom template<\/a> to set up the Core Web Vitals tracking without having to use Custom HTML tags. I\u2019ll also show how to use this template\u2019s output to send the data to <a href=\"https:\/\/www.simoahava.com\/analytics\/implementation-guide-events-google-analytics-4\/\">Google Analytics 4<\/a>.<\/p>\n<blockquote>\n<p>Huge thanks to <a href=\"https:\/\/web.dev\/authors\/philipwalton\/\">Philip Walton<\/a> of Google for clarifying many of the things in this article. Philip is the author behind the Web Vitals content on <a href=\"https:\/\/web.dev\/vitals\/\">web.dev<\/a> among other things, so do yourself a favor and subscribe to his content on <a href=\"https:\/\/www.twitter.com\/philwalton\/\">Twitter<\/a>, <a href=\"https:\/\/github.com\/philipwalton\">GitHub<\/a>, and on his <a href=\"https:\/\/philipwalton.com\/\">blog<\/a>.<\/p>\n<\/blockquote>\n<p>                <span class=\"simmer\"><br \/>\n  <span class=\"close\">X<\/span><\/p>\n<p>\n    <span class=\"fa fa-md fa-bell\"\/><br \/>\n    <strong>The Simmer Newsletter<\/strong>\n  <\/p>\n<p>\n    Subscribe to the <a href=\"https:\/\/www.simoahava.com\/newsletter\/\">Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n  <\/p>\n<p>  <\/span><\/p>\n<h2 id=\"get-the-template\">Get the template<\/h2>\n<p>To load the template, go to the Google Tag Manager UI, and click the <strong>Templates<\/strong> navigation.<\/p>\n<div style=\"aspect-ratio: 1254 \/ 812;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/templates-gtm-ui.jpg\" title=\"Templates GTM UI\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"812\" width=\"1254\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/templates-gtm-ui.jpg#ZgotmplZ\" alt=\"Templates GTM UI\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Next, click the <strong>Search Gallery<\/strong> button in the <strong>Tag Templates<\/strong> area.<\/p>\n<div style=\"aspect-ratio: 2016 \/ 168;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/search-gallery.jpg\" title=\"search gallery\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"168\" width=\"2016\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/search-gallery.jpg#ZgotmplZ\" alt=\"search gallery\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>In the overlay, search for the template titled <code>Core Web Vitals<\/code>, select it, and click the <strong>Add to workspace<\/strong> button, following any prompts to get the job done.<\/p>\n<div style=\"aspect-ratio: 1584 \/ 1182;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/add-to-workspace.jpg\" title=\"Add To Workspace\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1182\" width=\"1584\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/add-to-workspace.jpg#ZgotmplZ\" alt=\"Add To Workspace\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Once the template has been added to your workspace, you can open the <strong>Tags<\/strong> view from the navigation and click to create a new tag.<\/p>\n<div style=\"aspect-ratio: 2512 \/ 494;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/new-tag.jpg\" title=\"New Tag\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"494\" width=\"2512\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/new-tag.jpg#ZgotmplZ\" alt=\"New Tag\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Choose the new <strong>Core Web Vitals<\/strong> custom template for the tag.<\/p>\n<div style=\"aspect-ratio: 1572 \/ 556;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/core-web-vitals-tag-type.jpg\" title=\"tag type\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"556\" width=\"1572\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/core-web-vitals-tag-type.jpg#ZgotmplZ\" alt=\"tag type\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>The first configuration in the tag is the <strong>Namespace Objects<\/strong> setting, which is <strong>off<\/strong> by default. If you check the box, then the object pushed into <code>dataLayer<\/code> will store each measurement <em>type<\/em> (LCP, CLS, FID) in its own namespace under the <code>webVitalsMeasurement<\/code> top-level Data Layer key. See below for an example.<\/p>\n<p>You can also check the box labelled <strong>Collect all (available) web vitals metrics<\/strong> to also collect measurements of FCP, INP, and TTFB.<\/p>\n<p>Add the <strong>All Pages<\/strong> trigger to it. If you only want it to work on certain pages, use a Page View trigger with a suitable trigger condition instead.<\/p>\n<div style=\"aspect-ratio: 1870 \/ 1242;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/05\/core-web-vitals-tag-example.jpg\" title=\"All Pages Trigger with tag\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1242\" width=\"1870\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/05\/core-web-vitals-tag-example.jpg#ZgotmplZ\" alt=\"All Pages Trigger with tag\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Save the tag when ready.<\/p>\n<h2 id=\"test-it\">Test it<\/h2>\n<p>Next, go to <a href=\"https:\/\/www.simoahava.com\/analytics\/new-preview-mode-google-tag-manager\/\">preview mode<\/a> by clicking the Preview button in the user interface.<\/p>\n<p>Once browsing your site in preview mode, reload the page <strong>and wait for it to completely load<\/strong> (some Core Web Vitals do not function if the page loads in the background). Click around a bit for good measure.<\/p>\n<blockquote>\n<p>In fact, if you want to collect FID there <em>must<\/em> be a user interaction registered on the page. Interacting with the page will also have the effect of finalizing the LCP report, as the resolving of the largest element in the viewport stops as soon as a user interaction is received.<\/p>\n<\/blockquote>\n<p>When you switch to the preview mode tab, you should ideally see <strong>three<\/strong> <code>coreWebVitals<\/code> events in the list. Sometimes you\u2019ll only see two, for example if <strong>FID<\/strong> didn\u2019t register. Sometimes you\u2019ll see more than three, for example if the metrics are re-evaluated before a user interaction is received or the tab\/browser is backgrounded.<\/p>\n<blockquote>\n<p>The best way to ensure all three core web vitals are reported is to allow the page to load completely in the foreground, click around a bit, and then change the tab to Preview mode.<\/p>\n<\/blockquote>\n<div style=\"aspect-ratio: 1084 \/ 886;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/preview-mode-output.jpg\" title=\"Preview mode output\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"886\" width=\"1084\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/preview-mode-output.jpg#ZgotmplZ\" alt=\"Preview mode output\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Select one of the events and expand the <strong>API Call<\/strong> view. You should see something like this:<\/p>\n<div style=\"aspect-ratio: 854 \/ 568;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/api-call-view.jpg\" title=\"API call view\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"568\" width=\"854\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/api-call-view.jpg#ZgotmplZ\" alt=\"API call view\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<h2 id=\"the-datalayer-object\">The dataLayer object<\/h2>\n<p>This is what the <code>dataLayer<\/code> object contains:<\/p>\n<table>\n<thead>\n<tr>\n<th>Key<\/th>\n<th>Sample value<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>event<\/code><\/td>\n<td><code>'coreWebVitals'<\/code><\/td>\n<td>The event name \u2013\u00a0always <code>coreWebVitals<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><code>webVitalsMeasurement.name<\/code><\/td>\n<td><code>'FID'<\/code><\/td>\n<td>One of <code>LCP<\/code>, <code>FID<\/code>, <code>CLS<\/code>, <code>FCP<\/code>, <code>INP<\/code>, and <code>TTFB<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><code>webVitalsMeasurement.id<\/code><\/td>\n<td><code>'v1-123123123-234234234'<\/code><\/td>\n<td>A unique ID per measurement per page. Can be used to associate multiple CLS measurements with a single page load.<\/td>\n<\/tr>\n<tr>\n<td><code>webVitalsMeasurement.value<\/code><\/td>\n<td><code>123.55<\/code><\/td>\n<td>Value in milliseconds (for <code>LCP<\/code> and <code>FID<\/code>), or the <strong>score<\/strong> for CLS.<\/td>\n<\/tr>\n<tr>\n<td><code>webVitalsMeasurement.delta<\/code><\/td>\n<td><code>17.77<\/code><\/td>\n<td>Delta to the previous measurement on the same page (relevant for CLS).<\/td>\n<\/tr>\n<tr>\n<td><code>webVitalsMeasurement.valueRounded<\/code><\/td>\n<td><code>124<\/code><\/td>\n<td>Value rounded to the nearest integer. CLS score is first multiplied by 1000 to get a meaningful number.<\/td>\n<\/tr>\n<tr>\n<td><code>webVitalsMeasurement.deltaRounded<\/code><\/td>\n<td><code>18<\/code><\/td>\n<td>Delta rounded to the nearest integer. CLS score is first multiplied by 1000 to get a meaningful number.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>If you have <strong>Namespace Objects<\/strong> selected, the measurement keys themselves (<code>name<\/code>, <code>id<\/code>, <code>value<\/code>, etc.) will be nested under the measurement name. So instead of <code>webVitalsMeasurement.id<\/code>, the key path would be <code>webVitalsMeasurement.FID.id<\/code>, if the measurement was for First Input Delay.<\/p>\n<blockquote>\n<p>One use case for checking <strong>Namespace Objects<\/strong> is if you want to send all CWV measurements with a single event. If you don\u2019t have Namespace Objects checked, each CWV measurement will overwrite the previous measurement in the Data Layer, meaning you\u2019ll only ever be able to access the most recent measurement, regardless of type.<\/p>\n<\/blockquote>\n<h2 id=\"create-the-google-tag-manager-trigger-and-variables\">Create the Google Tag Manager trigger and variables<\/h2>\n<p>To use these values in Google Tag Manager, you\u2019ll first need to create a <strong>Custom Event trigger<\/strong> and one <strong>Data Layer variable<\/strong> for each of the <code>webVitalsMeasurement<\/code> keys you want to measure.<\/p>\n<h3 id=\"the-custom-event-trigger\">The Custom Event trigger<\/h3>\n<p>The Custom Event trigger should look like this:<\/p>\n<div style=\"aspect-ratio: 2662 \/ 930;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/event-corewebvitals.jpg\" title=\"Event - corewebvitals\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"930\" width=\"2662\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/event-corewebvitals.jpg#ZgotmplZ\" alt=\"Event - corewebvitals\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Make sure you set <code>coreWebVitals<\/code> as the value of the <strong>Event Name<\/strong> field.<\/p>\n<h3 id=\"the-data-layer-variables\">The Data Layer variables<\/h3>\n<p>Next, create these <strong>six<\/strong> Data Layer variables, using the image below as a model.<\/p>\n<div style=\"aspect-ratio: 1724 \/ 1064;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/dlv-webvitalsmeasurement-name.jpg\" title=\"DLV - webVitalsMeasurement.name\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1064\" width=\"1724\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/dlv-webvitalsmeasurement-name.jpg#ZgotmplZ\" alt=\"DLV - webVitalsMeasurement.name\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<table>\n<thead>\n<tr>\n<th>Variable name<\/th>\n<th>Data Layer Variable Name<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.name<\/td>\n<td><code>webVitalsMeasurement.name<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.id<\/td>\n<td><code>webVitalsMeasurement.id<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.value<\/td>\n<td><code>webVitalsMeasurement.value<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.delta<\/td>\n<td><code>webVitalsMeasurement.delta<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.valueRounded<\/td>\n<td><code>webVitalsMeasurement.valueRounded<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.deltaRounded<\/td>\n<td><code>webVitalsMeasurement.deltaRounded<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Remember, if you have <strong>Namespace Objects<\/strong> selected, the variable names are different. Here\u2019s what you\u2019d need to create for FID, for example:<\/p>\n<table>\n<thead>\n<tr>\n<th>Variable name<\/th>\n<th>Data Layer Variable Name<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.FID.name<\/td>\n<td><code>webVitalsMeasurement.FID.name<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.FID.id<\/td>\n<td><code>webVitalsMeasurement.FID.id<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.FID.value<\/td>\n<td><code>webVitalsMeasurement.FID.value<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.FID.delta<\/td>\n<td><code>webVitalsMeasurement.FID.delta<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.FID.valueRounded<\/td>\n<td><code>webVitalsMeasurement.FID.valueRounded<\/code><\/td>\n<\/tr>\n<tr>\n<td>DLV &#8211; webVitalsMeasurement.FID.deltaRounded<\/td>\n<td><code>webVitalsMeasurement.FID.deltaRounded<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"send-the-data-to-universal-analytics\">Send the data to Universal Analytics<\/h2>\n<p>To send the data to Universal Analytics, I recommend you follow this excellent guide on Tag Manager Italia: <a href=\"https:\/\/www.tagmanageritalia.it\/advanced-guide-how-to-track-core-web-vitals-with-google-tag-manager\/\">How To Track Core Web Vitals With Google Tag Manager<\/a>.<\/p>\n<p><strong>NOTE!<\/strong> One thing you\u2019ll need to do is set the <code>transport<\/code> field in your Universal Analytics tag to <code>beacon<\/code>:<\/p>\n<div style=\"aspect-ratio: 1782 \/ 874;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/set-transport-beacon.jpg\" title=\"Transport Beacon\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"874\" width=\"1782\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/set-transport-beacon.jpg#ZgotmplZ\" alt=\"Transport Beacon\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>The <code>beacon<\/code> field ensures that the tag uses the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Beacon_API\">Beacon API<\/a>. The Beacon API is designed to \u201cprotect\u201d asynchronous requests so that they complete even if the page has unloaded in the process. This is important for some of the Core Web Vitals measurements, which might not report a value until the user is about to leave the page.<\/p>\n<blockquote>\n<p>Note that GA4 does <em>not<\/em> require you to explicitly set anything for the hits to be sent with the Beacon API. It defaults to using <code>navigator.sendBeacon()<\/code> in all request.<\/p>\n<\/blockquote>\n<p>One other thing to keep in mind is that Universal Analytics <strong>only accepts integers<\/strong> into <em>Event value<\/em> and <em>Custom Metric<\/em> fields. For this reason, you\u2019ll need to use the <strong>DLV &#8211; webVitalsMeasurement.valueRounded<\/strong> and <strong>DLV &#8211; webVitalsMeasurement.deltaRounded<\/strong> variables instead of the raw values.<\/p>\n<h2 id=\"send-the-data-to-google-analytics-4\">Send the data to Google Analytics 4<\/h2>\n<p>To send the data to Google Analytics 4, you\u2019ll need to use an <strong>Event tag<\/strong>, so go ahead and create one.<\/p>\n<p>How you set the event name and properties is completely up to you, but this is how I built my event tag:<\/p>\n<div style=\"aspect-ratio: 2528 \/ 1478;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/ga4-event-tag.jpg\" title=\"GA4 Event Tag\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1478\" width=\"2528\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/ga4-event-tag.jpg#ZgotmplZ\" alt=\"GA4 Event Tag\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>I set the <strong>Event Name<\/strong> to the metric name that is collected (<code>LCP<\/code>, <code>FID<\/code>, or <code>CLS<\/code>). Remember that GA4 is moving to a more <em>semantic<\/em> approach in event naming, where the event name should reflect <em>what happened<\/em> rather than a generic label such as what Event Category used to be in Universal Analytics.<\/p>\n<p>I chose to send the four \u201craw\u201d parameters only, as GA4 can process floating-point values where Universal Analytics couldn\u2019t. The four parameter names I chose are:<\/p>\n<ul>\n<li><code>web_vitals_measurement_name<\/code> for the metric name.<\/li>\n<li><code>web_vitals_measurement_id<\/code> for the metric ID.<\/li>\n<li><code>web_vitals_measurement_value<\/code> for the <em>raw<\/em> metric value.<\/li>\n<li><code>value<\/code> for the <em>raw<\/em> metric delta.<\/li>\n<\/ul>\n<blockquote>\n<p>I\u2019m setting <code>value<\/code> to the metric <strong>delta<\/strong> because <code>value<\/code> is a recommended parameter for the main value of the event. I opted to use <code>delta<\/code> simply because it makes sense for CLS measurement. If the metric <strong>value<\/strong> was sent as the event <code>value<\/code> instead, then an aggregate of CLS would report inflated values as it would sum the totals rather than the deltas.<\/p>\n<\/blockquote>\n<p>Make sure the tag fires on the <strong>Custom Event trigger<\/strong> you created <a href=\"#the-custom-event-trigger\">before<\/a>.<\/p>\n<p>Once you\u2019ve saved the tag, you can test the setup again. Reset preview mode by clicking the Preview button, and load a page on the site. You should see your GA4 tag being fired, and if you open its contents you should see valid values being sent to GA4.<\/p>\n<div style=\"aspect-ratio: 1862 \/ 1320;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/values-sent-to-ga4.jpg\" title=\"Values sent to GA4\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1320\" width=\"1862\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/values-sent-to-ga4.jpg#ZgotmplZ\" alt=\"Values sent to GA4\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Remember that GA4 can be debugged in its own preview mode interface by clicking the respective measurement ID in the top bar of the preview mode interface. Here you can select one of the events, such as <code>CLS<\/code>, to see exactly what was sent to GA4 in the HTTP request!<\/p>\n<div style=\"aspect-ratio: 4318 \/ 1656;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/preview-mode-ga4.jpg\" title=\"Preview Mode GA4\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1656\" width=\"4318\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/preview-mode-ga4.jpg#ZgotmplZ\" alt=\"Preview Mode GA4\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Don\u2019t forget to check <a href=\"https:\/\/ken-williams.com\/guide\/installation\/validating-google-analytics-4-with-debug-mode\/\"><strong>DebugView<\/strong><\/a> in the Google Analytics 4 interface as well!<\/p>\n<div style=\"aspect-ratio: 2592 \/ 1908;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/debug-mode-output.jpg\" title=\"Debug mode output\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1908\" width=\"2592\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/debug-mode-output.jpg#ZgotmplZ\" alt=\"Debug mode output\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Finally, there\u2019s nothing as satisfying as watching the data flow into <a href=\"https:\/\/support.google.com\/analytics\/answer\/9823238?hl=en\"><strong>Google BigQuery<\/strong><\/a>.<\/p>\n<div style=\"aspect-ratio: 2042 \/ 1086;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2021\/01\/bigquery-results.jpg\" title=\"BigQuery results\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1086\" width=\"2042\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2021\/01\/bigquery-results.jpg#ZgotmplZ\" alt=\"BigQuery results\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<h2 id=\"summary\">Summary<\/h2>\n<p>I hope this article has been useful to you!<\/p>\n<p>I particularly hope that the custom template introduced here will help you deploy Core Web Vitals tracking, as you can avoid working with pesky Custom HTML tags.<\/p>\n<p>The template always fetches the <em>latest<\/em> version of the <code>web-vitals<\/code> library, which means that if a breaking change is introduced the template will break as well. I don\u2019t think this is very realistic, but even if it does happen, I\u2019ll be sure to fix the template as soon as this problem emerges.<\/p>\n<p>Tracking Core Web Vitals makes a lot of sense, especially in Google Analytics 4 with its more liberal quotas and value type restrictions. Being on top of things when it comes to site performance is just so very important in this day and age, and everything starts with good data.<\/p>\n<p>Please let me know in the comments if you have questions about this solution!<\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><br \/>\n<br \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Updated 3 March 2023: Added a checkbox to the template to enable collecting FCP, INP, and TTFB metrics, too.. Core Web Vitals is described on the dedicated web.dev resource as (emphasis mine): \u201cCore Web Vitals are the subset of Web Vitals that apply to all pages, should be measured by all site owners, and will [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":74611,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[3147,18473,1531,14495,1791,1018,26018,5393],"dealstore":[],"offerexpiration":[],"class_list":["post-74610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-core","tag-ga4","tag-google","tag-manager","tag-tag","tag-track","tag-vitals","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Track Core Web Vitals In GA4 With Google Tag Manager - Som2ny Network<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fivemor.com\/?p=74610\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Track Core Web Vitals In GA4 With Google Tag Manager - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\"Updated 3 March 2023: Added a checkbox to the template to enable collecting FCP, INP, and TTFB metrics, too.. Core Web Vitals is described on the dedicated web.dev resource as (emphasis mine): \u201cCore Web Vitals are the subset of Web Vitals that apply to all pages, should be measured by all site owners, and will [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=74610\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-07T23:27:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1441\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=74610#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=74610\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"Track Core Web Vitals In GA4 With Google Tag Manager\",\"datePublished\":\"2025-02-07T23:27:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=74610\"},\"wordCount\":1783,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=74610#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg\",\"keywords\":[\"Core\",\"GA4\",\"Google\",\"Manager\",\"TAG\",\"Track\",\"Vitals\",\"Web\"],\"articleSection\":[\"Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=74610#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=74610\",\"url\":\"https:\/\/fivemor.com\/?p=74610\",\"name\":\"Track Core Web Vitals In GA4 With Google Tag Manager - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=74610#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=74610#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg\",\"datePublished\":\"2025-02-07T23:27:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=74610#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=74610\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=74610#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg\",\"width\":2560,\"height\":1441},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=74610#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Track Core Web Vitals In GA4 With Google Tag Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fivemor.com\/#website\",\"url\":\"https:\/\/fivemor.com\/\",\"name\":\"Som2ny Network\",\"description\":\"Daily Deals\",\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fivemor.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fivemor.com\/#organization\",\"name\":\"Som2ny Network\",\"url\":\"https:\/\/fivemor.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"width\":300,\"height\":86,\"caption\":\"Som2ny Network\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/fivemor.com\"],\"url\":\"https:\/\/fivemor.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Track Core Web Vitals In GA4 With Google Tag Manager - Som2ny Network","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:\/\/fivemor.com\/?p=74610","og_locale":"en_US","og_type":"article","og_title":"Track Core Web Vitals In GA4 With Google Tag Manager - Som2ny Network","og_description":"Updated 3 March 2023: Added a checkbox to the template to enable collecting FCP, INP, and TTFB metrics, too.. Core Web Vitals is described on the dedicated web.dev resource as (emphasis mine): \u201cCore Web Vitals are the subset of Web Vitals that apply to all pages, should be measured by all site owners, and will [&hellip;]","og_url":"https:\/\/fivemor.com\/?p=74610","og_site_name":"Som2ny Network","article_published_time":"2025-02-07T23:27:06+00:00","og_image":[{"width":2560,"height":1441,"url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=74610#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=74610"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"Track Core Web Vitals In GA4 With Google Tag Manager","datePublished":"2025-02-07T23:27:06+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=74610"},"wordCount":1783,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=74610#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg","keywords":["Core","GA4","Google","Manager","TAG","Track","Vitals","Web"],"articleSection":["Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=74610#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=74610","url":"https:\/\/fivemor.com\/?p=74610","name":"Track Core Web Vitals In GA4 With Google Tag Manager - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=74610#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=74610#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg","datePublished":"2025-02-07T23:27:06+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=74610#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=74610"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=74610#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/track-core-web-vitals-in-ga4-with-google-tag-manager-scaled.jpg","width":2560,"height":1441},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=74610#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"Track Core Web Vitals In GA4 With Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/fivemor.com\/#website","url":"https:\/\/fivemor.com\/","name":"Som2ny Network","description":"Daily Deals","publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fivemor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fivemor.com\/#organization","name":"Som2ny Network","url":"https:\/\/fivemor.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","width":300,"height":86,"caption":"Som2ny Network"},"image":{"@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","caption":"admin"},"sameAs":["https:\/\/fivemor.com"],"url":"https:\/\/fivemor.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/74610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=74610"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/74610\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/74611"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=74610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=74610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=74610"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=74610"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=74610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}