Our Core Web Vitals Tracker plugin is currently in beta . It’s purpose is to push core web vitals speed data from real user visits into Google Analytics so that individual page and site performance can be easily measured without relying on Google.
Google’s core web vitals data runs on a 28 day cycle so depending on where you’re looking, the data will take at least 28 days to show the full picture and even more if you’re using a report like the CRUX dashboard.
With our Core Web Vitals Tracker we can shortcut that process and get high quality CWV speed data in just a few days on a high traffic site.
Click play on the video below to see a short walk through video of our reporting tool and how it presents the data pulled from Google Analytics (direct video link here)
Table of Contents
DOWNLOAD LINK
The plugin is not currently available on the WordPress repo – download it from this link and install it using the regular WordPress Plugins page inside your WordPress installation:
https://www.wpspeedfix.com/wp-content/uploads/2022/11/core-web-vitals-tracker.zip
PLUGIN SETUP INSTRUCTIONS
The plugin uses Universal Google Analytics as it’s database so that will need to be in place first. Right now the plugin does not work with Google Analytics 4 because GA4 does not have an API to extract the data from as yet.
You’ll need to choose the type of analytics code you’re using, gtag.js or analytics.js
It doesn’t matter if you’re wrong, you’ll just have no data in analytics.
The video below (direct link here) will walk you through the WordPress plugin setup and how to check to determine whether the plugin is working and that you’ve chosen the correct code type (GTAG or analytics.js) using Chrome Developer Tools:
ALTERNATE SETUP USING CODE BASED IMPLEMENTATION
You may prefer embeddable code over the plugin method. In this case, use the code snippets below. NOTE, only use 1 of the code snippets, the GTAG or analytics.js version. This code must be inserted AFTER your main Google Analytics code. Put this code as far down in the footer or site as you can as this has the least impact on site speed and performance.
gtag.js version
<script type="module">
import { getCLS, getFID, getLCP, getTTFB, getFCP } from 'https://unpkg.com/web-vitals?module';
function sendToGoogleAnalytics( {name, delta, id} ) {
gtag('event', name, {
event_category: 'Web Vitals',
event_label: id,
value: Math.round( 'CLS' === name ? delta * 1000 : delta),
non_interaction: true,
});
}
getCLS( sendToGoogleAnalytics );
getFID( sendToGoogleAnalytics );
getLCP( sendToGoogleAnalytics );
getTTFB( sendToGoogleAnalytics );
getFCP( sendToGoogleAnalytics );
getCLS( console.log );
getFID( console.log );
getLCP( console.log );
getTTFB( console.log );
getFCP( console.log );
</script>analytics.js version
<script type="module">
import { getCLS, getFID, getLCP, getTTFB, getFCP } from 'https://unpkg.com/web-vitals?module';
function sendToGoogleAnalytics({ name, delta, id }) {
ga('send', 'event', {
eventCategory: 'Web Vitals',
eventAction: name,
eventLabel: id,
eventValue: Math.round('CLS' === name ? delta * 1000 : delta),
nonInteraction: true,
transport: 'beacon',
});
}
getCLS( sendToGoogleAnalytics );
getFID( sendToGoogleAnalytics );
getLCP( sendToGoogleAnalytics );
getTTFB( sendToGoogleAnalytics );
getFCP( sendToGoogleAnalytics );
getCLS( console.log );
getFID( console.log );
getLCP( console.log );
getTTFB( console.log );
getFCP( console.log );
</script>Alternate code with UA tag specified
In some cases you may have multiple analytics tags or GA4 tags may be taking priority over UA tags and tracking is not working. This seems to happen more frequently with the analyics.js version of the code.
Below is a version of the code that also specifies which Google account to push data into. Make sure you swap the UA-XXXXXXXXX with your own analytics tracking ID
analytics.js code with UA- account ID specified
<script type="module">
import { getCLS, getFID, getLCP, getTTFB, getFCP } from 'https://unpkg.com/web-vitals@3?module';
function sendToGoogleAnalytics({ name, delta, id }) {
ga('create', 'UA-XXXXXXXXX', {'name': 'defineTracker'});
ga('defineTracker.send', 'event', {
eventCategory: 'Web Vitals',
eventAction: name,
eventLabel: id,
eventValue: Math.round('CLS' === name ? delta * 1000 : delta),
nonInteraction: true,
transport: 'beacon',
});
}
getCLS( sendToGoogleAnalytics );
getFID( sendToGoogleAnalytics );
getLCP( sendToGoogleAnalytics );
getTTFB( sendToGoogleAnalytics );
getFCP( sendToGoogleAnalytics );
getCLS( console.log );
getFID( console.log );
getLCP( console.log );
getTTFB( console.log );
getFCP( console.log );
</script>
REPORTS
Reports can be generated using our reporter tool at https://reports.wpspeedfix.com – we’re currently waiting for app approval from Google so to get access please email us with the email addresses you wish to use to access the tool and we’ll add them into the Google API allow list.