VitalSentinel
Installation

Platform Guides

Step-by-step installation guides for popular website platforms.

Detailed instructions for installing VitalSentinel on popular platforms. For all platforms, you'll need both the RUM script (performance monitoring) and Web Analytics script (traffic analytics).

Shopify

Add tracking scripts by editing your theme code.

Steps

  1. Go to Online Store → Themes
  2. Click ... → Edit code on your active theme
  3. Open theme.liquid in the Layout folder
  4. Add the scripts before </head>:
<script
  src="https://rum.vitalsentinel.com/rum.js"
  data-key="YOUR_TRACKING_ID"
  async
></script>
<script
  src="https://analytics.vitalsentinel.com/analytics.js"
  data-key="YOUR_TRACKING_ID"
  async
></script>
  1. Click Save

E-commerce Tracking

VitalSentinel automatically detects Shopify and tracks:

  • Product views
  • Add to cart events
  • Checkout initiation
  • Purchases

No additional configuration needed.

WooCommerce

WooCommerce sites can add scripts through a plugin or theme functions.

Use a header scripts plugin:

  1. Install and activate the plugin
  2. Go to the plugin's settings
  3. Paste both scripts in the Header section
  4. Save

Option 2: Theme functions.php

Add to your theme's functions.php (use a child theme to preserve changes during updates).

Simple approach (recommended for tracking scripts):

function vitalsentinel_scripts() {
    ?>
    <script src="https://rum.vitalsentinel.com/rum.js" data-key="YOUR_TRACKING_ID" async></script>
    <script src="https://analytics.vitalsentinel.com/analytics.js" data-key="YOUR_TRACKING_ID" async></script>
    <?php
}
add_action('wp_head', 'vitalsentinel_scripts');

Using wp_enqueue_script (WordPress 6.3+):

function vitalsentinel_scripts() {
    wp_enqueue_script(
        'vitalsentinel-rum',
        'https://rum.vitalsentinel.com/rum.js',
        array(),
        null,
        array( 'strategy' => 'async' )
    );

    wp_enqueue_script(
        'vitalsentinel-analytics',
        'https://analytics.vitalsentinel.com/analytics.js',
        array(),
        null,
        array( 'strategy' => 'async' )
    );
}
add_action('wp_enqueue_scripts', 'vitalsentinel_scripts');

function vitalsentinel_add_data_key($tag, $handle) {
    if (in_array($handle, ['vitalsentinel-rum', 'vitalsentinel-analytics'])) {
        return str_replace(' src=', ' data-key="YOUR_TRACKING_ID" src=', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'vitalsentinel_add_data_key', 10, 2);

E-commerce Tracking

VitalSentinel automatically detects WooCommerce and tracks:

  • Product views
  • Add to cart events
  • Checkout process
  • Order completions

WordPress

For non-WooCommerce WordPress sites. See WooCommerce section above for code examples - the same approaches work for all WordPress sites.

Use a header scripts plugin:

  1. Install and activate the plugin
  2. Go to the plugin's settings
  3. Add both scripts to the Header section
  4. Save

Option 2: Theme functions.php

Use either the simple approach or wp_enqueue_script as shown in the WooCommerce section above.

Magento

For Magento 2 stores.

Step 1: Create or Edit Layout File

Create/edit: app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://rum.vitalsentinel.com/rum.js" src_type="url" async="true" data-key="YOUR_TRACKING_ID"/>
        <script src="https://analytics.vitalsentinel.com/analytics.js" src_type="url" async="true" data-key="YOUR_TRACKING_ID"/>
    </head>
</page>

Step 2: Clear Cache

bin/magento cache:clean
bin/magento cache:flush

E-commerce Tracking

Magento is automatically detected for e-commerce tracking.

Squarespace

Step 1: Access Code Injection

  1. Go to Website → Website Tools → Code Injection
  2. Find the Header section

Step 2: Add Scripts

Paste in the Header field:

<script
  src="https://rum.vitalsentinel.com/rum.js"
  data-key="YOUR_TRACKING_ID"
  async
></script>
<script
  src="https://analytics.vitalsentinel.com/analytics.js"
  data-key="YOUR_TRACKING_ID"
  async
></script>

Step 3: Save

Click Save at the top.

E-commerce Tracking

Squarespace Commerce is automatically detected.

Next.js

For React-based Next.js applications.

App Router (Next.js 13+)

In your root layout (app/layout.tsx):

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://rum.vitalsentinel.com/rum.js"
          data-key="YOUR_TRACKING_ID"
          strategy="afterInteractive"
        />
        <Script
          src="https://analytics.vitalsentinel.com/analytics.js"
          data-key="YOUR_TRACKING_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

In pages/_app.js:

import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://rum.vitalsentinel.com/rum.js"
        data-key="YOUR_TRACKING_ID"
        strategy="afterInteractive"
      />
      <Script
        src="https://analytics.vitalsentinel.com/analytics.js"
        data-key="YOUR_TRACKING_ID"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

Nuxt.js

For Vue-based Nuxt applications.

Nuxt 3

In nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://rum.vitalsentinel.com/rum.js',
          'data-key': 'YOUR_TRACKING_ID',
          async: true
        },
        {
          src: 'https://analytics.vitalsentinel.com/analytics.js',
          'data-key': 'YOUR_TRACKING_ID',
          async: true
        }
      ]
    }
  }
});

Nuxt 2

In nuxt.config.js:

export default {
  head: {
    script: [
      {
        src: 'https://rum.vitalsentinel.com/rum.js',
        'data-key': 'YOUR_TRACKING_ID',
        async: true
      },
      {
        src: 'https://analytics.vitalsentinel.com/analytics.js',
        'data-key': 'YOUR_TRACKING_ID',
        async: true
      }
    ]
  }
};

Verification

After installation, verify the scripts are working:

  1. Visit your website
  2. Open browser Developer Tools (F12)
  3. Go to the Network tab
  4. Filter for "vitalsentinel"
  5. You should see requests to rum.vitalsentinel.com and analytics.vitalsentinel.com

Data will appear in VitalSentinel within a few minutes.

Troubleshooting

Scripts Not Loading

  • Check for ad blockers
  • Verify tracking ID is correct
  • Check Content Security Policy headers

No Data Appearing

  • Allow 15-30 minutes for initial data
  • Verify domain matches your VitalSentinel configuration
  • Check sample rate isn't set to 0

RUM Script

Full RUM configuration options

Web Analytics Script

Full Web Analytics configuration options

Web Analytics Script Installation

Complete guide to installing and configuring the VitalSentinel Web Analytics script.

RUM Monitoring

Track Core Web Vitals and performance metrics from real users visiting your website.

On this page

ShopifyStepsE-commerce TrackingWooCommerceOption 1: Plugin (Recommended)Option 2: Theme functions.phpE-commerce TrackingWordPressOption 1: Plugin (Recommended)Option 2: Theme functions.phpMagentoStep 1: Create or Edit Layout FileStep 2: Clear CacheE-commerce TrackingSquarespaceStep 1: Access Code InjectionStep 2: Add ScriptsStep 3: SaveE-commerce TrackingNext.jsApp Router (Next.js 13+)Pages RouterNuxt.jsNuxt 3Nuxt 2VerificationTroubleshootingScripts Not LoadingNo Data AppearingRelated