The Reshepe Web Vitals package for google tag manager lets you monitor Core Web Vitals metrics real-time without any build steps.

Installation

To integrate Reshepe Web Vitals via Google Tag Manager, follow these steps:

1. In your GTM workspace, click Add a new tag.
2. Under Tag Configuration, select Custom HTML.
3. Paste this snippet into the HTML field and replace YOUR-RESHEPE-PUBLIC-API-KEY with the public key from your Reshepe project settings:

   <script>
      var script = document.createElement('script');
      script.defer = true;
      script.dataset.apiKey = 'YOUR-RESHEPE-PUBLIC-API-KEY';
      script.src = 'https://cdn.jsdelivr.net/npm/@reshepe-web-vitals/js/dist/index.global.js';
      document.getElementsByTagName('head')[0].appendChild(script);
   </script>

4. Add a trigger (for example, All Pages) to fire the tag on your desired pages.
5. Click Save, then Submit and Publish to deploy the tag.

you can follow instructions to get your public API key here

Development mode

To disable data collection during development, add a data-development flag:

<script>
    var script = document.createElement('script');
    script.defer = true;
    script.dataset.apiKey = 'YOUR-RESHEPE-PUBLIC-API-KEY';
    script.dataset.development = true;
    script.src = "https://cdn.jsdelivr.net/npm/@reshepe-web-vitals/js/dist/index.global.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

Toolbar

To enable the Reshepe Web Vitals toolbar for live metric debugging (development only), add a separate **Custom HTML ** tag with:

<script>
    var script = document.createElement('script');
    script.defer = true;
    script.src = 'https://cdn.jsdelivr.net/npm/@reshepe-web-vitals/js/dist/toolbar.global.js';
    document.getElementsByTagName('head')[0].appendChild(script);
</script>