User.com REST API Docs

# Single Page Applications (SPA)

If your website is built as a Single Page Application (e.g., React, Vue, Angular), standard page tracking will not work automatically for subsequent page views.

# The challenge

By default, the JavaScript SDK fires a "Page Hit" only once: when the widget.js script initially loads.

In a SPA, users navigate between "pages" without reloading the browser. The URL changes via the History API, but the script does not reload. Consequently, User.com does not record these route changes by default.

# The solution: UE.pageHit()

To track navigation in a SPA, you must manually trigger the UE.pageHit() method every time the route changes.

This method forces the SDK to:

  1. Read the current URL (window.location.href).
  2. Read the current Title (document.title).
  3. Send a "Page View" event to the User.com timeline.

# Implementation A: Router hooks (Code)

If you have access to your application's router (e.g., vue-router, react-router), add the call to your global navigation guard.

Example logic:

// Generic Router Example
router.afterEach((to) => {
    // Wait for the DOM/Title to update
    setTimeout(() => {
        if (typeof UE === 'object' && typeof UE.pageHit === 'function') {
            UE.pageHit();
        }
    }, 500); 
});

Note: We recommend a short setTimeout to ensure document.title has been updated by your framework before the SDK reads it.

# Implementation B: Google Tag Manager (No-Code)

If you use GTM, you can automate this without touching the app code.

  1. Create a Trigger:

    • Type: History Change
    • Fire On: All History Changes

  2. Create a Tag:

    • Type: Custom HTML
    • Html:
      <script>
  if (typeof UE === 'object' && typeof UE.pageHit === 'function') {
      UE.pageHit();
  }
</script>
    • Firing Trigger: Select your "History Change" trigger.

# Verification

To verify that route changes are being tracked:

  1. Open your website and the Network tab in Developer Tools.
  2. Filter for chatping.
  3. Navigate to a different page within your app (click a menu link).
  4. Success: You should see a new request to /api/v2/user-chatping/ immediately after the navigation.
    • Check the Payload: The url field should match the new page, not the previous one.

← SDK methods →