WEBVITAL和ga使用

The importance of collecting field data for web vitals

Note: There is a known issue with Magento and this implementation which causes the web-vitals events to not fire.

Core Web Vitals is a set of best practices Google is pushing on the world to encourage webmasters to run quick websites. They began baking these metrics into their algorithm beginning in June 2021, so monitoring performance for these vital metrics is important for people who:

1. Care about a snappy user experience
2. Want Google to judge their website as a quality one

Checking your web vitals scores for one page is easy. Run a quick Lighthouse audit and Google will tell you your score. Real-time user monitoring of web vitals across your entire website over time is not so easy. Google Search Console will give you a high-level score, but there is no way to drill down to the page level.

Using Google Tag Manager to Push web-vitals Events to Universal Analytics

If you aren’t a GTM power user, the steps below might look daunting. Fear not, it’s easier than it seems. 

To get your web vitals data flowing into Google Analytics, you’ll need to set up a few things in your Tag Manager Container:

1. Custom HTML Tag that uses a script to push web-vitals events into the data layer. The script in the custom HTML tag is a modified version from Github created to manage Web Vitals APIs.
2. Custom Event Trigger based on the event created from the tag above.
3. Four data layer variables that match the values created by the custom HTML tag.
4. Universal Google Analytics Tag using the created variables and trigger.

Step 1: Create Your Custom HTML Tag

Copy and paste the script below into a Custom HTML tag with the following steps:

• Tag > New Tag > Custom HTML
• Name the tag something like, cHTML – Web Vitals
• Copy and paste the script below
• Triggering > Select the All Pages page view trigger

<!-- Load 'web-vitals' using a classic script that sets the global 'webVitals' object. -->
<script src="https://unpkg.com/web-vitals@2.1.0/dist/web-vitals.umd.js"></script>
<script>
function sendToGTM(name, delta, id) {
  // Assumes the global `dataLayer` array exists, see:
  // https://developers.google.com/tag-manager/devguide
  dataLayer.push({
    event: 'web-vitals',
    event_category: 'Web Vitals',
    event_action: name.name,
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    event_value: Math.round(name.name === 'CLS' ? name.delta * 1000 : name.delta),
    // The 'id' value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: name.id,
  });
}
webVitals.getCLS(sendToGTM);
webVitals.getFID(sendToGTM);
webVitals.getLCP(sendToGTM);
webVitals.getFCP(sendToGTM);
webVitals.getTTFB(sendToGTM);  
</script>

Please note, the script above references a filename, https://unpkg.com/web-vitals@2.1.0/dist/web-vitals.umd.js. Contributors to this project are releasing updates to this codebase, so check back to update your script with the latest version.

Step 2: Create a Custom Event Trigger

This step is easier than it sounds. 

1. Triggers > New Trigger > Custom Event
2. Event Name: web-vitals 
3. Name the trigger Web Vitals

Step 3: Create the Data Layer Variables

These four data layer variables pull the corresponding value in the custom HTML tag created in step one. The values you need to create variables for are:

• event_category
• event_action
• event_value
• event_label

These variables collect the values from the data layer and store them so they can be sent to Google Analytics. 

Create a variable for each value using the following settings:

1. Variables > New > Configuration > select Data Layer Variable
2. Name: DLV – event_category
3. Data Layer Variable Name: event_category
4. Data Layer Version: Version 2
5. Repeat steps 1 – 4 for event_action, event_value, and event_label

Step 4: Create a Universal Analytics Event Tag

You’re nearly to the finish line. All that’s left is creating our tag that will push events into Google Analytics. 

1. Tag > New
2. Select Universal Analytics
3. Track Type: Event
4. Category: {{dlv – event_category}}
5. Action: {{dlv – event_action}}
6. Label:  {{dlv – event_label}}
7. Value:  {{dlv – event_value}}
8. Non-Interaction Hit: True 
   1. This should be set to true so it doesn’t affect your bounce rate
9. Select your GA Variable
10. Firing Triggers: Select the Web Vitals trigger created in step two. 

11. 

Step 5: Preview and Debug

Always preview your tags before publishing to make sure it’s working as expected. Enter preview mode in GTM. The tag should fire for each Web Vital event. Note that FID will not fire until the user has interacted with the page, i.e. clicked a link. 

On each page load you should get up to five web-vitals events—TTFB, FCP, LCP, CLS, and FID. If it’s working as expected, publish the container. Congratulations, now all web vitals and their corresponding data is being pushed into Google Analytics. 

Check Real-time to see the events in action, and check back in the next day to analyze your data. 

How to analyze Core Web Vitals in Google Analytics

Because we set these up as Events, you’ll find them in Behavior > Events. In the Events overview report, you’ll see the Web Vitals event category. Click into that category to see only Web Vitals events. 

Next, click the Event Action dimension above the table. Each event action will correspond to a specific web vital. 

To evaluate a metric such as Largest Contentful Paint (LCP), click into LCP from the Event Action report. It will show a table of Event Labels. The Label in this report is the web-vital event ID. By itself, this report isn’t useful because it doesn’t display the page the LCP value is for. 

How do you see average LCP per page in Google Analytics?

A more helpful way to view the data is in Behavior > Events > Pages. This report shows a breakdown of events by page with total events, event value, and average value. Add a secondary dimension and filter to display only the web vital you want to analyze:

1. Add a secondary dimension to this report for Event Action
2. Add an advanced filter for the web vital you’d like to see, ex:  Include > Event Action > Equals > LCP
3. Voila!

The table should now show LCP by page. The metric to pay attention to is Avg. Value, which is the total value divided by the number of unique events. This value translates to milliseconds. According to Google, under 2500ms is good, 2500 – 4000ms is fair, and 4000ms+ is bad. 

Congratulations! You can now view your average LCP, TTFB, FCP, CLS, and FID at the page- and sitewide-level. With this data you will be able to analyze which pages need attention and monitor Core Web Vital performance going forward.