JavaScript & Frameworks

This guide is designed for developers integrating ScaleDynamics directly into modern JavaScript applications (such as React, Vue, Angular, or Vanilla JS modules).

Before beginning the integration for either phase, you must obtain your private data stream endpoint URL from your dedicated ScaleDynamics account team. This URL is unique to your report and must remain confidential. In the code snippets below, replace <PRIVATE_URL> with this exact endpoint.

Phase 1: The 24-Hour Audit (`sd-agent.js`)

Deploy the passive telemetry agent to gather hardware insights across your traffic without altering your user experience or application state.

1. Import and Setup the Agent

Import the agent directly into your application's entry point (e.g., main.js, index.js, or App.jsx) and configure it with your endpoint.

import { sdAgent } from "https://cdn.scaledynamics.com/libs/2/sd-agent.js";
 
sdAgent.config({
  // Replace <PRIVATE_URL> with your private data stream endpoint URL
  endpoint: '<PRIVATE_URL>',
});

2. Optional: Conversion Detection & Domain Filtering

To correlate hardware performance (like the BDP score) with your actual business outcomes, or to restrict monitoring to specific environments, you can configure conversion detection and domain filtering.

Method 1: Client-Side Conversion Events If you want to track successful conversions (e.g., checkouts, sign-ups), you can trigger an event programmatically inside your application code (e.g., in a button onClick handler or a successful API response promise).

// Trigger this when a conversion happens in your app
sdAgent.send('conversion_done');

Have a look to sd-agent.js API Reference to get a description of all available APIs.

Method 2: Server-Side JSON Configuration Alternatively, you can provide a JSON configuration file to your ScaleDynamics account representative to handle conversions via URL pattern matching and filter domains server-side, without cluttering your application logic.

{
  "conversion": {
    "regexps": [ ".*\\/checkout\\/success.*" ]
  },
  "domain": {
    "includes": [ ".*production-domain\\.com.*" ],
    "excludes": [ ".*staging-domain\\.com.*" ]
  }
}

Note: A domain is monitored if and only if it matches at least one regular expression in includes AND does not match any regular expression in excludes.

Method 3: Environment Control via CI/CD To control when the agent is active based on your build environment, pass your <PRIVATE_URL> via a CI/CD environment variable (e.g., process.env.VITE_SD_ENDPOINT). If the variable is empty "" or undefined (like in local development or staging), the agent disables itself automatically.

Phase 2: Production Integration (`sd-metrics.js`)

Once your 24-hour audit is complete, replace the passive Phase 1 agent with the active Phase 2 execution engine. This allows your JavaScript application to consume the hardware scores dynamically.

Import and Listen to Metrics

Import the metrics module into your application. You can attach event listeners to specific variables, which will fire as soon as the hardware evaluation is complete.

import { SdMetrics } from 'https://cdn.scaledynamics.com/libs/1/sd-metrics.js';
 
SdMetrics.config({
  // Replace <PRIVATE_URL> with your private data stream endpoint URL
  endpoint: '<PRIVATE_URL>',
});
 
  // use sd-metrics API
  ...

Have a look to sd-metrics.js API Reference to get a description of all available APIs.

Direct HTML Snippet AdTech Variables