# 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](/rum-monitoring/overview), and the Web Analytics script feeds [Web Analytics](/web-analytics/overview). You can install one script or both. Each platform section ends with the common problems on that platform.

## Before you start [#before-you-start]

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](/connect/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:

```html
<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 tracking [#which-platforms-get-ecommerce-tracking]

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](#shopify-ecommerce-tracking) and [Squarespace ecommerce tracking](#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](/web-analytics/ecommerce) and [Web Analytics Script](/connect/analytics-script).

## WordPress [#wordpress]

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 plugin [#install-on-wordpress-with-the-wpcode-plugin]

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) [#install-on-wordpress-in-the-theme-functionsphp]

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.

```php
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) [#install-on-wordpress-with-wp_enqueue_script-wordpress-63-and-later]

```php
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 WordPress [#common-problems-on-wordpress]

- **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](/connect/tracking-scripts#troubleshooting).
- **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.

## WooCommerce [#woocommerce]

WooCommerce runs on WordPress, so you install the snippet with one of the [WordPress](#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 tracking [#woocommerce-ecommerce-tracking]

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 WooCommerce [#common-problems-on-woocommerce]

- **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](/connect/analytics-script#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](/connect/analytics-script).

## Shopify [#shopify]

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 code [#install-on-shopify-in-the-theme-code]

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 tracking [#shopify-ecommerce-tracking]

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](/connect/analytics-script).

### Common problems on Shopify [#common-problems-on-shopify]

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

## Wix [#wix]

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

### Install on Wix with Custom Code [#install-on-wix-with-custom-code]

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 Wix [#set-web-analytics-to-spa-mode-on-wix]

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 Wix [#common-problems-on-wix]

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

## Squarespace [#squarespace]

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 Injection [#install-on-squarespace-with-code-injection]

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 tracking [#squarespace-ecommerce-tracking]

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 Squarespace [#common-problems-on-squarespace]

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

## Webflow [#webflow]

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 code [#install-on-webflow-with-custom-code]

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 Webflow [#common-problems-on-webflow]

- **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 Manager [#google-tag-manager]

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

### Install with Google Tag Manager [#install-with-google-tag-manager]

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 snippet [#the-google-tag-manager-snippet]

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

```html
<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](/connect/tracking-scripts).

### Common problems on Google Tag Manager [#common-problems-on-google-tag-manager]

- **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](/connect/tracking-scripts#troubleshooting).

## Magento [#magento]

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 admin [#install-on-magento-in-the-admin]

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 Magento [#common-problems-on-magento]

- **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](/connect/tracking-scripts#troubleshooting) 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.js [#nextjs]

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 Router [#nextjs-app-router]

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

```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 Router [#nextjs-pages-router]

In `pages/_app.js`:

```jsx
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.js [#common-problems-on-nextjs]

- **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](/connect/tracking-scripts#troubleshooting).
- **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`.

## Nuxt [#nuxt]

### Nuxt 3 [#nuxt-3]

In `nuxt.config.ts`:

```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 2 [#nuxt-2]

In `nuxt.config.js`:

```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 Nuxt [#common-problems-on-nuxt]

- **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](/connect/tracking-scripts#troubleshooting).

## Other sites (HTML) [#other-sites-html]

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 site [#install-on-an-html-site]

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 sites [#common-problems-on-html-sites]

- **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 installation [#check-the-installation]

After you install the scripts, go back to the app and click **Check installation** in the **Is it working?** card. See [Tracking Scripts](/connect/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.

## Troubleshooting [#troubleshooting]

### Why do the scripts not load on my platform? [#why-do-the-scripts-not-load-on-my-platform]

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](/connect/tracking-scripts#troubleshooting).

### Why do I see no data after I installed the scripts on my platform? [#why-do-i-see-no-data-after-i-installed-the-scripts-on-my-platform]

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](/connect/tracking-scripts) for the install check results.

## Related [#related]

- [Tracking Scripts](/connect/tracking-scripts) - where to find the snippet, the install check and troubleshooting
- [RUM Script](/connect/rum-script) - all options of the RUM script
- [Web Analytics Script](/connect/analytics-script) - all options of the Web Analytics script
- [Ecommerce](/web-analytics/ecommerce) - the shop reports
- [RUM Monitoring](/rum-monitoring/overview) - what the RUM data shows
- [Web Analytics](/web-analytics/overview) - what the Web Analytics data shows