Platform guides

This page shows how to install the VitalSentinel tracking scripts on popular website platforms, step by step. The RUM script feeds RUM Monitoring, and the Web Analytics script feeds Web Analytics. You can install one script or both. Each platform section ends with the common problems on that platform.

Before you startCopy Anchor Link

Copy your snippet from the app first. It is in the onboarding Install tracking step, in domain Settings > Tracking, and in the Install the script side panel of a module page. See Tracking Scripts.

The snippet has two forms. Select the form above the snippet before you click Copy:

• HTML: one <script> tag for each script. Use it in a header field, a theme file or an HTML template.
• Google Tag Manager: the same scripts, built in JavaScript. Use it in Google Tag Manager, and in any website builder that changes the code that you paste.

The examples on this page use YOUR_TRACKING_ID. The snippet that you copy from the app has your real tracking ID and the options that you set. Both scripts use the same tracking ID. Paste the snippet as it is. Only workspace owners and admins can copy the snippet.

The basic HTML snippet for both scripts is:

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

Which platforms get ecommerce trackingCopy Anchor Link

The Web Analytics script finds four shop platforms on its own: Shopify, WooCommerce, Magento and Squarespace. On these platforms, it sends product views, add to cart, cart views, checkout starts and orders. On Shopify and Squarespace, orders need one more step, because their checkout pages do not run the code of your theme or site header. See Shopify ecommerce tracking and Squarespace ecommerce tracking. Events appear in Web Analytics > Ecommerce within minutes of the first shop visit.

On all other platforms, such as Wix, Webflow or a custom store, the Web Analytics script sends no shop events. You can send your own events from your code. Custom events appear under Events and can be goals on Conversions, but they do not give revenue or orders.

In Web Analytics > Ecommerce, the panel Set up shop tracking shows the install place for each platform. It also has a Custom events choice for other stores. See Ecommerce and Web Analytics Script.

WordPressCopy Anchor Link

WordPress has no built-in field for header code. Use a plugin, or add the snippet to your theme. The same methods work with or without WooCommerce.

Install on WordPress with the WPCode pluginCopy Anchor Link

WPCode (listed in the WordPress plugin directory as "WPCode – Insert Headers and Footers") adds a site-wide header field.

1. In the WordPress admin, go to Plugins > Add New Plugin.
2. Search for "WPCode", then install and activate the plugin.
3. Go to Code Snippets > Header & Footer.
4. Paste the VitalSentinel snippet in the Header field.
5. Click Save Changes.
6. If you use a caching plugin, clear its cache.

Other header and footer plugins work the same way. Paste the snippet in the field for the site header, on every page.

Install on WordPress in the theme (functions.php)Copy Anchor Link

Add this code to the functions.php file of your theme. Use a child theme, so that a theme update does not remove the change.

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');

You can also paste the snippet in the header.php file of the theme, just before </head>.

Install on WordPress with wp_enqueue_script (WordPress 6.3 and later)Copy Anchor Link

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

The second function adds the data-key attribute, because wp_enqueue_script cannot add it.

Common problems on WordPressCopy Anchor Link

• A caching plugin shows old pages. Clear the page cache of the plugin, and of your host or CDN, after you add the snippet.
• A JavaScript delay or combine setting changes the script. Plugins such as WP Rocket can delay all scripts until the visitor clicks or scrolls. Exclude rum.vitalsentinel.com and analytics.vitalsentinel.com. See Tracking Scripts.
• A theme update removed the snippet. Code in a parent theme file goes away when the theme updates. Use a plugin or a child theme.
• The snippet is in two places. If you added it with a plugin and in the theme, remove one copy.

WooCommerceCopy Anchor Link

WooCommerce runs on WordPress, so you install the snippet with one of the WordPress methods above. The VitalSentinel setup panel gives two places. Paste the snippet into the header.php file of your theme, just before </head>. Or paste it into a header-scripts plugin such as WPCode, set to run on every page.

WooCommerce ecommerce trackingCopy Anchor Link

The Web Analytics script finds WooCommerce on its own. It sends these events, with no extra setup:

• Product views on product pages
• Add to cart
• Cart views and checkout starts
• Completed orders, from the WooCommerce order received page

The script reads the cart from the page, so the Storage mode does not change what WooCommerce sends. It records an order only when it can read the order ID. Set your store currency in domain Settings > Site setup > Currency, so that revenue always has a currency.

Common problems on WooCommerceCopy Anchor Link

• No orders appear. Make sure that the snippet also runs on the checkout and order received pages. Some plugins let you choose pages: select every page.
• A caching or optimization plugin skips the cart or checkout. Exclude the two VitalSentinel scripts from JavaScript delay, defer and combine settings.
• Revenue has no currency. Your prices probably use a symbol with more than one meaning, for example a plain $. Set the currency in domain Settings > Site setup > Currency. See Currency.
• Ecommerce shows no events at all. Turn on debug mode and look for "Ecommerce platform detected" in the browser console. See Web Analytics Script.

ShopifyCopy Anchor Link

Add the snippet to the code of your Shopify theme. For checkout starts and orders, also add a custom pixel in Customer events.

Install on Shopify in the theme codeCopy Anchor Link

1. In the Shopify admin, go to Online Store > Themes.
2. On your current theme, click the ... menu, then click Edit code.
3. In the Layout folder, open theme.liquid.
4. Paste the snippet just before the closing </head> tag.
5. Click Save.

Do not paste the snippet into Customer events. Shopify runs custom pixels in a sandbox, where the snippet does not work. Use the custom pixel from VitalSentinel there.

Shopify ecommerce trackingCopy Anchor Link

The theme snippet tracks product views, add to cart and cart views. Shopify does not run theme code on its checkout and Thank you pages. Thus, checkout starts and orders come from a custom pixel.

To add the custom pixel:

1. In VitalSentinel, go to Web Analytics > Ecommerce and click Set up shop tracking.
2. Select Shopify.
3. Under 2. Orders and checkout: add a custom pixel, copy the Shopify custom pixel code.
4. In the Shopify admin, go to Settings > Customer events.
5. Click Add custom pixel and enter a name, for example "VitalSentinel".
6. Paste the code.
7. Click Save, then click Connect.

If your shop already sends product views, open the Ecommerce page and click Shop setup in the page header. The same panel opens, so you can add the Shopify custom pixel.

VitalSentinel makes the pixel for your domain, with your tracking ID in it. The pixel sends a checkout start and each completed order. For an order, it sends the order ID, the total, the subtotal, tax, shipping, the currency and the discount code. It sends no visitor ID, no cart contents, and no name, email, phone or address of the buyer.

The pixel records an order only when it has an order ID and a total. VitalSentinel counts each order ID one time. In the pixel settings of Shopify, under Customer privacy, Shopify decides if visitors must give consent before the pixel runs.

Shopify keeps the cart on the visitor's device. Thus, the theme snippet reads cart items only with Session or Persistent storage. With None, it still counts cart views, but without items, quantities or values. Product views and add to cart work in every storage mode. See Web Analytics Script.

Common problems on ShopifyCopy Anchor Link

• You changed or duplicated the theme. The snippet is in the code of one theme. Add it again to the new theme before you publish it.
• Checkout starts or orders are missing. Shopify checkout pages do not use your theme.liquid file. Add the custom pixel in Customer events, and make sure that its status is connected.
• Cart items have no values. Use Session or Persistent storage, with the visitor's consent.
• The snippet is in the theme and in an app. Remove one copy.

WixCopy Anchor Link

Wix adds your code in the Custom Code settings. Your site must be published and have a connected domain.

Install on Wix with Custom CodeCopy Anchor Link

1. In your Wix site dashboard, go to Settings.
2. Under Development & integrations, click Custom Code.
3. Click + Add Custom Code.
4. Paste the VitalSentinel snippet in the text box.
5. Enter a name, for example "VitalSentinel".
6. Under Add Code to Pages, select All pages, then select the option to load the code once.
7. Under Place Code in, select Head.
8. Click Apply.

Set Web Analytics to SPA mode on WixCopy Anchor Link

Wix can change pages without a full page load, so the code loads one time for each visit. In VitalSentinel, set Single page app (SPA) mode to Enabled in domain Settings > Tracking > Web Analytics > Options. Then copy the snippet again and replace it in Wix. The RUM script finds these page changes on its own.

Common problems on WixCopy Anchor Link

• Web Analytics shows only one page view for each visit. Set Single page app (SPA) mode to Enabled, and replace the snippet.
• You changed the primary domain. Wix deletes custom code when the primary domain changes. Add the snippet again.
• The tracking ID does not reach the script. Use the Google Tag Manager form of the snippet in the Wix text box.
• Ecommerce shows no events. VitalSentinel does not find Wix Stores on its own. Send custom events instead.

SquarespaceCopy Anchor Link

Squarespace adds your code in the Code Injection panel. Code injection is available on the Core, Plus, Advanced and some legacy Squarespace plans.

Install on Squarespace with Code InjectionCopy Anchor Link

1. Open the Code Injection panel. It is in the Website menu, under Pages > Website Tools. You need the Administrator permission.
2. Find the Header field. Squarespace adds the code in this field to the <head> of every page.
3. Paste the VitalSentinel snippet in the Header field.
4. Save the change.

Squarespace ecommerce trackingCopy Anchor Link

The Web Analytics script finds Squarespace Commerce on its own. It tracks product views, add to cart, cart views, checkout starts and orders. The script reads the cart from the page, so the Storage mode does not change what Squarespace sends.

Squarespace checkout runs on its own pages, which do not run the Header field. To record orders, paste the snippet again after checkout:

1. Open the Code Injection panel again.
2. Paste the VitalSentinel snippet in the Order status page field.
3. Paste the VitalSentinel snippet in the Order confirmation page field.
4. Save the change.

The script reads orders from the Squarespace order confirmation. It records an order only when it can read an order ID. Without an ID, VitalSentinel cannot prevent double counts, so it drops the order.

Common problems on SquarespaceCopy Anchor Link

• There is no Code Injection panel. Your plan does not include code injection, or you do not have the Administrator permission.
• Orders are missing. Make sure that the snippet is in the Order status page and Order confirmation page fields. VitalSentinel records an order only when it can read the order ID after checkout.
• The snippet is in the site header and in a page header. Remove the copy from the page settings.

WebflowCopy Anchor Link

Webflow adds site-wide code in Site settings. Custom code needs a paid Webflow Site plan or a paid Workspace plan.

Install on Webflow with custom codeCopy Anchor Link

1. In Webflow, open the Site settings of your site.
2. Open the Custom code tab.
3. Paste the VitalSentinel snippet in the Head code field.
4. Save the changes.
5. Publish the site.

The code goes live only after you publish. Preview does not send the change to your live site.

Common problems on WebflowCopy Anchor Link

• The script is not on the live site. Publish the site again after you save the code.
• The site is on the free Starter plan. Custom code needs a paid plan.
• You test on the webflow.io staging address. Web Analytics accepts hits only from the host of your domain. Test on your own domain.
• Ecommerce shows no events. VitalSentinel does not find Webflow Ecommerce on its own. Send custom events instead.

Google Tag ManagerCopy Anchor Link

Use the Google Tag Manager form of the snippet. Do not paste the HTML form into Google Tag Manager.

Install with Google Tag ManagerCopy Anchor Link

1. In VitalSentinel, select Google Tag Manager above the snippet, then click Copy.
2. In Google Tag Manager, go to Tags, then click New.
3. Click Tag Configuration, then select Custom HTML.
4. Paste the snippet into the HTML field.
5. Click Triggering, then select the All Pages trigger.
6. Save the tag.
7. Click Submit, then click Publish.
8. Open your site once in a browser.

To test the tag before you publish, click Preview in Google Tag Manager. Tag Assistant then shows the tags that fired and the tags that did not fire.

The Google Tag Manager snippetCopy Anchor Link

The Google Tag Manager snippet looks like this for the RUM script:

<script>
  (function () {
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://rum.vitalsentinel.com/rum.js';
    s.setAttribute('data-key', 'YOUR_TRACKING_ID');
    document.head.appendChild(s);
  })();
</script>

The install check reads the HTML of your homepage, so it cannot see scripts that Google Tag Manager adds. The status changes to Receiving data when the first visit arrives. See Tracking Scripts.

Common problems on Google Tag ManagerCopy Anchor Link

• The container is not published. A saved tag does nothing until you click Submit and Publish.
• The tag fires only on some pages. Use the All Pages trigger.
• The HTML form is in the tag. Replace it with the Google Tag Manager form.
• The container is not on every page. The Google Tag Manager container code must be on every page of the site.
• A consent setting holds the tag back. Then VitalSentinel counts only visitors who accept. See Tracking Scripts.

MagentoCopy Anchor Link

For Magento 2 and Adobe Commerce stores, add the snippet in the admin. The VitalSentinel setup panel uses this method.

Install on Magento in the adminCopy Anchor Link

1. In the Magento admin, go to Content > Design > Configuration.
2. Click Edit on your store view.
3. Under Other Settings, expand HTML Head.
4. Paste the snippet in the Scripts and Style Sheets field.
5. Save the configuration.
6. Clear the Magento cache.

The Web Analytics script finds Magento on its own for ecommerce tracking.

Common problems on MagentoCopy Anchor Link

• The scripts do not run on checkout pages. Magento 2.4 applies a Content Security Policy. Ask your developer to add the VitalSentinel hosts to the store's CSP allowlist (csp_whitelist.xml). See Tracking Scripts for the hosts.
• The change does not show. Clear the Magento cache and any full-page cache or CDN.
• The snippet is only in one store view. Add it to each store view that you want to measure.

Next.jsCopy Anchor Link

Use the next/script component in the root layout, so that the scripts load on every route. Next.js passes data-* attributes on to the script tag.

Next.js App RouterCopy Anchor Link

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"
          data-spa="true"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Next.js Pages RouterCopy Anchor Link

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"
        data-spa="true"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

Common problems on Next.jsCopy Anchor Link

• Web Analytics counts only the first page. A Next.js site changes pages in the browser. Set data-spa="true", or select Enabled in Single page app (SPA) mode. The RUM script finds these page changes on its own.
• You used strategy="worker". This strategy moves the script into a web worker, away from the page. Use afterInteractive.
• Your site sends a Content Security Policy. Add the VitalSentinel hosts to it. See Tracking Scripts.
• No data from preview deployments. Web Analytics accepts hits only from the host of your domain. The RUM script skips hosts such as preview.example.com.

NuxtCopy Anchor Link

Nuxt 3Copy Anchor Link

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',
          'data-spa': 'true',
          async: true
        }
      ]
    }
  }
});

Nuxt 2Copy Anchor Link

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',
        'data-spa': 'true',
        async: true
      }
    ]
  }
};

Common problems on NuxtCopy Anchor Link

• Web Analytics counts only the first page. Nuxt changes pages in the browser. Set data-spa="true" on the Web Analytics script.
• Your site sends a Content Security Policy. Add the VitalSentinel hosts to it. See Tracking Scripts.

Other sites (HTML)Copy Anchor Link

For a static site, a site that you build by hand, or any framework that has one HTML template, paste the snippet into that template.

Install on an HTML siteCopy Anchor Link

1. Open the HTML template or layout file that every page of your site uses.
2. Paste the HTML snippet just before the closing </head> tag.
3. Save the file.
4. Upload or deploy the change to your live site.
5. Clear the cache of your host or CDN, if you use one.

For a Create React App or Vue CLI project, the template is usually public/index.html. For a site without a shared template, paste the snippet on each page.

Common problems on HTML sitesCopy Anchor Link

• Some pages have no snippet. Every page needs the snippet. Pages without it send no data.
• A React, Vue or other single-page app counts only the first page. Set Single page app (SPA) mode to Enabled for Web Analytics.
• You open the page from your computer. The scripts do nothing on a page that opens from a file (file://). Test on your live site.

Check the installationCopy Anchor Link

After you install the scripts, go back to the app and click Check installation in the Is it working? card. See Tracking Scripts.

To check the scripts in your browser:

1. Open your site.
2. Open the developer tools of the browser (F12).
3. Open the Network tab.
4. Filter for vitalsentinel.
5. Make sure that rum.js and analytics.js load from rum.vitalsentinel.com and analytics.vitalsentinel.com.
6. Make sure that you see requests to app.vitalsentinel.com. These requests send the data.

Numbers appear in VitalSentinel within minutes of the first real visit.

TroubleshootingCopy Anchor Link

Why do the scripts not load on my platform?Copy Anchor Link

If an ad blocker runs in your browser, turn it off for the test. If your site has a Content Security Policy, allow the VitalSentinel hosts. If your platform caches pages, clear the cache after the change. If a plugin delays or combines JavaScript, exclude the two VitalSentinel scripts. For each cause, see Tracking Scripts.

Why do I see no data after I installed the scripts on my platform?Copy Anchor Link

If you test on a staging, preview or local copy of your site, the scripts can skip the visit. If the site runs on another host than the domain, Web Analytics discards the hits. Make sure that the snippet is on every page, also the homepage. See Tracking Scripts for the install check results.

RelatedCopy Anchor Link

• Tracking Scripts - where to find the snippet, the install check and troubleshooting
• RUM Script - all options of the RUM script
• Web Analytics Script - all options of the Web Analytics script
• Ecommerce - the shop reports
• RUM Monitoring - what the RUM data shows
• Web Analytics - what the Web Analytics data shows