Adam Silverstein

<p>Display web vitals element in a block.</p>


Web Vitals Block

eatzeni

<p>Track core web vitals data and save history, powers a dashboard with 24h and one month of historic data, shows worsts pages.<br />
Send also into Google Analytics (both gtag and ga supported) and can be extended to send also to Google Tag Manager and third parties</p>
<p>NOTE: This plugin does not send data to Google Tag Manager events, it only adds them to the dataLayer object but requires additional configuration on the Tag manager dashboard.</p>
<h3>What is Core Web Vitals?</h3>
<p>From the official page (https://web.dev/vitals/) Web Vitals is:<br />
    […] an initiative by Google to provide […] quality signals that are essential to delivering a great user experience on the web.<br />
    […]<br />
    Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools.<br />
    Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.</p>
<h3>Why are them important?</h3>
<p>They are important not only to improve user experience on websites but also because since 2021 Core Web Vitals will become official ranking signals for Google (https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html).</p>
<h3>HOW TO track into Google Tag Manager</h3>
<p>This plugin adds following data to the dataLayer object:<br />
    dataLayer.push({<br />
        event: “web-vitals”,<br />
        event_category: “Web Vitals”,<br />
        event_action: ,<br />
        event_value: ,<br />
        event_label: ,<br />
    });</p>
<p>You only need to create a custom event trigger in your Google Tag Manager (see https://support.google.com/tagmanager/answer/7679219?hl=en#), create Data Layer Variables and track those as Google Analytics Events on Tag Manager.</p>
<h3>HOW TO track into third party tools or custom Google Tag Manager syntax</h3>
<p>This plugins allows developers to listen for data captured and track them as their prefer. You only need to create a global Javascript function named<br />
    window.wpWebVitalTrack<br />
and you’re done!<br />
E.g.:<br />
    window.wpWebVitalTrack = function(event_id, event_name, event_value, event_delta) {<br />
        console.log(“Ready to do something amazing!”, event_id, event_name, event_value, event_delta);<br />
        // do something amazing!<br />
    }</p>
<p>NOTE: create this method as early as possible to avoid missing some event!</p>


Web Vitals Tracking

Track core web vitals data and save history, powers a dashboard with 24h and one month of historic data, shows worsts pages.

Web Vitals Block vs Web Vitals Tracking