@reshepe-web-vitals/gtm

Overview

The Reshepe Web Vitals GTM integration provides comprehensive monitoring of Real User Metrics (RUM) and Core Web Vitals data. This solution enables organizations to track and analyze performance metrics that directly impact user experience.

Installation Guide

Setting Up the Google Tag Manager Integration

1. Create a New Tag in Google Tag Manager

   Navigate to your Google Tag Manager workspace and select "Add a new tag".

   

2. Configure Tag Type

   In the tag configuration panel, select "Custom HTML" as the tag type.

   

3. Add Implementation Code

   In the HTML field, insert the following code snippet:

   

   <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. Obtain Your Reshepe API Key

   To acquire your Reshepe public API key:

   • Create a project in the Reshepe dashboard
   • Navigate to the project settings

   

   • Locate your API keys in the settings panel

   

5. Configure Tag Trigger

   Add an appropriate trigger to your tag to determine when the tag should fire.

   

6. Deploy Changes

   Submit and publish your changes in Google Tag Manager to activate the integration.

   

Development Environment Configuration

Enabling Development Mode

During development or testing phases, you can prevent data transmission to Reshepe servers by enabling development mode. Add the data-development attribute to the script configuration:

<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>

Developer Tools

Web Vitals Toolbar

The Web Vitals Toolbar provides real-time performance metric visualization for development and debugging purposes.

To implement the toolbar, add a separate tag with the following code:

<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>

Important: This toolbar should only be implemented in development or testing environments and should not be included in production deployments.