# Platform Guides
Detailed instructions for installing VitalSentinel on popular platforms. For all platforms, you'll need both the RUM script (performance monitoring) and the Web Analytics script (traffic analytics).
## Shopify [#shopify]
Add tracking scripts by editing your theme code.
### Steps [#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 ``:
```html
```
5. Click **Save**
### E-commerce Tracking [#e-commerce-tracking]
VitalSentinel automatically detects Shopify and tracks:
* Product views
* Add to cart events
* Checkout initiation
* Purchases
No additional configuration needed.
***
## WooCommerce [#woocommerce]
WooCommerce sites can add scripts through a plugin or theme functions.
### Option 1: Plugin (Recommended) [#option-1-plugin-recommended]
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 [#option-2-theme-functionsphp]
Add to your theme's `functions.php` (use a child theme to preserve changes during updates).
**Simple approach (recommended for tracking scripts):**
```php
function vitalsentinel_scripts() {
?>
'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 [#e-commerce-tracking-1]
VitalSentinel automatically detects WooCommerce and tracks:
* Product views
* Add to cart events
* Checkout process
* Order completions
***
## WordPress [#wordpress]
For non-WooCommerce WordPress sites. See the WooCommerce section above for code examples – the same approaches work for all WordPress sites.
### Option 1: Plugin (Recommended) [#option-1-plugin-recommended-1]
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 [#option-2-theme-functionsphp-1]
Use either the simple approach or `wp_enqueue_script` as shown in the WooCommerce section above.
***
## Magento [#magento]
For Magento 2 stores.
### Step 1: Create or Edit Layout File [#step-1-create-or-edit-layout-file]
Create/edit: `app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/default_head_blocks.xml`
```xml
```
### Step 2: Clear Cache [#step-2-clear-cache]
```bash
bin/magento cache:clean
bin/magento cache:flush
```
### E-commerce Tracking [#e-commerce-tracking-2]
Magento is automatically detected for e-commerce tracking.
***
## Squarespace [#squarespace]
### Step 1: Access Code Injection [#step-1-access-code-injection]
1. Go to **Website** → **Website Tools** → **Code Injection**
2. Find the **Header** section
### Step 2: Add Scripts [#step-2-add-scripts]
Paste in the Header field:
```html
```
### Step 3: Save [#step-3-save]
Click **Save** at the top.
### E-commerce Tracking [#e-commerce-tracking-3]
Squarespace Commerce is automatically detected.
***
## Next.js [#nextjs]
For React-based Next.js applications.
### App Router (Next.js 13+) [#app-router-nextjs-13]
In your root layout (`app/layout.tsx`):
```tsx
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### Pages Router [#pages-router]
In `pages/_app.js`:
```jsx
import Script from 'next/script';
export default function MyApp({ Component, pageProps }) {
return (
<>
);
}
```
***
## Nuxt.js [#nuxtjs]
For Vue-based Nuxt applications.
### 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',
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',
async: true
}
]
}
};
```
***
## Verification [#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 about 15 to 30 minutes.
## Troubleshooting [#troubleshooting]
### Scripts Not Loading [#scripts-not-loading]
* Check for ad blockers
* Verify tracking ID is correct
* Check Content Security Policy headers
### No Data Appearing [#no-data-appearing]
* Allow 15 to 30 minutes for initial data
* Verify domain matches your VitalSentinel configuration
* Check sample rate isn't set to 0
## Related [#related]
Full RUM configuration options
Full Web Analytics configuration options