SPA Device Profiling

A traditional website reloads the document during navigation, so the Signifyd device profiling script runs automatically on every page where it is installed. A single-page application changes views without a full page load. To capture those virtual navigations, call the Signifyd browser API when your router changes routes. This guide covers the steps that are specific to single-page applications. Complete the session ID, deployment and API matching steps in Device Profiling before continuing.

Install the script

Include the profiling script once in the shared application page. When data-order-session-id is present, the script profiles the initial page automatically.

<script
  defer
  type="text/javascript"
  id="script-tag-api"
  data-order-session-id="YOUR-SESSION-ID-HERE"
  src="https://cdn-scripts.signifyd.com/api/script-tag.js"
></script>

The script exposes window.signifyd after it loads. Before invoking a method, confirm that the object and method are available.

Profile virtual route changes

Call pageView() after each virtual route change that should be included in device profiling:

function profileRouteChange() {
  if (window.signifyd && typeof window.signifyd.pageView === 'function') {
    window.signifyd.pageView()
  }
}

Connect this function to the point where your router confirms that navigation has completed. Do not call it for the application's first render when the script tag already contains data-order-session-id; the script profiles that initial page automatically.

Use the same session ID for every pageView() in one customer journey. Calling pageView() does not create or change the session ID.

Available methods

pageView()

Profiles the current virtual page using the active session ID. Call it after each relevant route change.

window.signifyd.pageView()

reset({sessionId})

Changes the active session ID and profiles the current page immediately. Use it only when a new customer session begins, such as after a completed purchase.

window.signifyd.reset({
  sessionId: 'NEW-SESSION-ID'
})

Do not call pageView() immediately after reset() because reset() already starts profiling.

init({sessionId})

Registers a session ID without profiling. This is useful when the session ID was not available in the initial script tag.

window.signifyd.init({
  sessionId: 'CURRENT-SESSION-ID'
})

window.signifyd.pageView()

Wait until the script has loaded before calling init(). When the script tag already contains data-order-session-id, calling init() is not required.

Handle rapid navigation

Only one profiling operation can run at a time. If another pageView() or reset() call occurs while profiling is still running, the new call is ignored. It does not throw an exception. The script logs an error and dispatches sigScriptError instead.

If your application changes routes several times in quick succession, debounce the profiling hook so it runs after the route has settled.

document.addEventListener('sigScriptError', (event) => {
  console.warn('Signifyd device profiling:', event.detail)
})

Validate the integration

Use browser developer tools to test a complete SPA journey:

  1. Confirm that window.signifyd contains init, pageView and reset.
  2. Confirm that the initial page sends a profiling request when data-order-session-id is present.
  3. Navigate between virtual routes and confirm that each configured route sends another profiling request.
  4. Confirm that all route profiles in the same journey use the same session ID.
  5. Start a new session with reset() and confirm that the next profile uses the new session ID.
  6. Confirm that normal navigation does not produce sigScriptError events.

In the Network panel, filter for fp-web. A successful direct integration sends profiling requests to dp.signifyd.com/fp-web. If you use First-Party Proxying, the requests use the first-party endpoint configured by your organization instead.

Common issues

window.signifyd is undefined

The script has not loaded or was blocked. Confirm that script-tag.js loaded successfully and that your Content Security Policy permits the required Signifyd resources.

No session ID is registered

Provide data-order-session-id in the script tag or call init({sessionId}) before the first pageView().

Route changes do not appear

Confirm that the router invokes pageView() after navigation and that profiling is not repeatedly called while a previous operation is still running.

The wrong session is used

Retain one session ID throughout the customer journey. Call reset() only when a new session begins, and send the same active session ID in the related Signifyd API requests.






Did this page help you?