# Setting Up Real User Monitoring

This guide will walk you through enabling Real User Monitoring for your domains in smoxy.

### Prerequisites

Before you begin, ensure you have:

* ✅ **Owner** or **Maintainer** role in your smoxy account
* ✅ Ability to add a JavaScript snippet to your website's HTML

{% hint style="info" %}
Real User Monitoring can be enabled for up to **10 domains** per configuration. If you need to monitor more domains, contact support.
{% endhint %}

***

### Step 1: Access RUM Configuration

1. Log in to the smoxy Hub
2. Click on **Real User Monitoring**
3. Click the **RUM Settings** button

***

### Step 2: Configure Your Domains

#### Add Domains to Monitor

In the RUM configuration panel:

1. **Add Domains**: Enter up to 10 domains you want to monitor
   * You can add **any domain** - they don't need to be configured in smoxy
   * This allows you to monitor domains even if you're only using RUM (not other smoxy features)
   * Simply type the domain name and add it to your list

#### Example Configuration

```
Added Domains:
- www.example.com
- shop.example.com
- blog.example.com
```

3. Click **Save**

After saving, smoxy will generate:

* A unique **RUM Token** (format: `srt-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx`)
* A **JavaScript snippet** for your website

***

### Step 3: Install the Tracking Snippet

#### Copy Your Snippet

After configuration, you'll see a JavaScript snippet similar to this:

```html
<script>
    (function() {
        var tok = 'srt-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Token unique to each customer
        var org = 123;
        var img = 'https://svc.smoxy.eu/_sx/a/perf.gif'; // Path to the tracking pixel
        var url = 'https://svc.smoxy.eu/_sx/a/core.js'; // Path to the core script

        // Function to load the core script
        function loadCore() {
            var scr = document.createElement('script'); // Create a script element
            scr.src = url + '?token=' + encodeURIComponent(tok); // Append query params
            scr.async = true; // Ensure the script loads asynchronously
            scr.defer = true; // Defer loading until HTML parsing is complete

            scr.onload = function() {
                // Once the core script is loaded, call the initialization function
                if (typeof window.initM === 'function') {
                    window.initM(tok, org); // Pass token and org
                }
            };

            document.head.appendChild(scr); // Attach the script to the document head
        }

        // Function to load the tracking pixel
        function loadImage() {
            var pix = new Image(); // Create a new image element
            pix.onload = loadCore; // On successful load of the pixel, load the core script
            pix.onerror = function() {
                loadCore();
            };
            pix.src = img;
        }

        // Use requestIdleCallback if available, otherwise fallback to setTimeout
        if ('requestIdleCallback' in window) {
            requestIdleCallback(loadImage, { timeout: 5000 }); // Use requestIdleCallback with a timeout of 5 seconds
        } else {
            setTimeout(loadImage, 1); // Fallback: load the image immediately
        }
    })();
</script>
```

#### Add to Your Website

**Place the snippet just before the closing `</head>` tag** of your website's HTML template.

{% hint style="info" %}
**Best Practice**: Add the snippet to your website's global header template so it's automatically included on all pages.
{% endhint %}

#### Implementation Examples

**WordPress:** Add to your theme's `header.php` before `</head>`, or use a plugin like "Insert Headers and Footers" to add the snippet to the header section.

**Shopify:** Go to **Online Store → Themes → Actions → Edit code**, open `theme.liquid`, and paste the snippet before `</head>`.

**Next.js / React:** Use the `next/script` component with `strategy="afterInteractive"` in your root layout or `_app` file.

**HTML / Static Sites:** Simply paste the snippet in your HTML template's `<head>` section, just before the closing `</head>` tag.

***

### Step 4: Verify Installation

#### Check Data Collection

After installing the snippet:

1. Visit your website in a browser
2. Open **Developer Tools** (F12)
3. Go to the **Network** tab
4. Look for requests to `rum.smoxy.eu/_sx/a`
5. You should see:
   * A request to `perf.gif` (tracking pixel)
   * A request to `core.js` (RUM script)
   * POST requests to `/_sx/a` (data being sent)

{% hint style="success" %}
If you see these requests, RUM is working correctly! Data will appear in your dashboard within a few minutes.
{% endhint %}

#### Dashboard Verification

1. Navigate to **Real User Monitoring** in the smoxy Hub
2. Click **View Analytics** or **Dashboard**
3. Wait 2-5 minutes for initial data to appear
4. You should see data starting to populate in the widgets

{% hint style="warning" %}
**No data showing?**

* Verify the snippet is on all pages
* Check that your domain matches the configured domains exactly
* Clear your browser cache and reload the page
* Check browser console for any JavaScript errors
  {% endhint %}

***

### Step 5: Understanding Your Configuration

#### RUM Token

Your RUM token (`srt-xxxxx...`) is unique to your account and is used to:

* Authenticate data submissions
* Associate data with your organization
* Validate incoming requests

#### Domain Validation

smoxy validates every RUM data submission:

* The `domain` field must match one of your configured domains
* Subdomains are matched exactly (e.g., `www.example.com` ≠ `example.com`)
* Invalid domains are automatically rejected

***

### Troubleshooting

#### Common Issues

**Problem**: Data not appearing after 10+ minutes\
**Solution**:

* Verify domain in snippet matches configured domains exactly
* Visit the site multiple times to trigger sampling

**Problem**: RUM slowing down page load\
**Solution**: This should not happen as RUM uses `requestIdleCallback`. Check:

* No JavaScript errors blocking execution
* Snippet is in `<head>`, not `<body>`
* You're using the latest snippet version

**Problem**: Seeing duplicate data\
**Solution**: Ensure snippet is only included once on each page

***

### What's Next?

Now that RUM is collecting data, learn how to use it:

* [Understanding Your Metrics](https://docs.smoxy.eu/en/real-user-monitoring/understanding-your-metrics) - Deep dive into each performance metric
* [Using the Analytics Dashboard](https://docs.smoxy.eu/en/real-user-monitoring/using-the-analytics-dashboard) - Navigate the smoxy RUM dashboard
* [Custom Dashboards with Grafana](https://docs.smoxy.eu/en/real-user-monitoring/custom-dashboards-with-grafana) - Build your own visualizations

{% hint style="success" %}
**Pro Tip**: Give RUM 24-48 hours to collect sufficient data before making major optimization decisions. This ensures you have statistically significant insights.
{% endhint %}
