UXWizz
WebsitePricingDemoTwitter (X)
  • Introduction
  • 🛠️ Installation
    • Requirements
      • Limitations
      • Server specs (CPU, RAM)
    • Installation guide
      • Uploading the script
      • Creating a MySQL database
      • Running the installer
    • Install on a new server
      • Ubuntu 20.04 (or higher)
      • DigitalOcean
    • Docker
      • Via Docker Compose
      • Standalone Docker image
    • Adding the tracking code
      • Automatic SPA pageview tracking
      • Add tracker to Next.js App
      • Add tracker to React Router App
    • Optimization tips
      • MySQL/MariaDB
      • Auto-delete old data (cron jobs)
      • Apache
    • Frequently Asked Questions
  • 🔧JavaScript API
    • Tags
    • Events
    • Hooks/callbacks
    • Other API functions
    • Session Recording
      • Ignore specific elements
  • 📖Guides and features
    • Goals (NEW!)
    • Ask AI (NEW!)
    • Basic usage
    • A/B testing
    • Usage tips
    • Dashboard user access level
    • Resetting the admin password
    • Database querying
    • Technical details
      • IP Geolocation
    • Troubleshooting
      • Agency
        • MultiDB
      • Dashboard
        • Refreshing dashboard sub-page leads to 404 error
        • Website iframe not loading (x-frame-options)
        • License says "invalid"
        • Updating Fails
      • Tracking
        • No data is being recorded
        • Can't include tracker via Google Tag Manager
        • The A/B test JS file is missing
      • WordPress
        • Cloudways 403 Forbidden screen on WordPress
        • NGINX 403 Forbidden screen on WordPress
    • Extending the dashboard
    • Support
    • Migrating to a new server
  • 🎓Useful Examples
    • Feedback form (polls)
    • Tracking 404 Pages
    • Tracking UTM parameters
    • Tracking Google Ads GCLID
    • Storing user device types
    • Track video playback
  • 📜About
    • Changelog
    • Personal Data Information
    • Privacy Policy (uxwizz.com)
    • Licenses and pricing
    • [Deprecated] License Subscriptions
Powered by GitBook
On this page

Was this helpful?

  1. 🛠️ Installation
  2. Adding the tracking code

Automatic SPA pageview tracking

To track page views in a Single Page Application (SPA), you normally listen for route changes on your router and send a tracking call.

Here's how you can do it automatically, without changing any code in your application, by detecting when the URL changes:

Automatically track pageviews on a Single Page Application

```html
<script>
    (() => {
        let lastTrackedUrl = window.location.href;

        // Whenever 
        const trackPageView= () => {
            const currentUrl = window.location.href;
            if (currentUrl === lastTrackedUrl) return;
            
            // Page changed
            UST.trackNewPage();
            lastTrackedUrl = currentUrl;
        };

        // Monitor URL changes (pushState, replaceState, and popstate)
        ['pushState', 'replaceState'].forEach((method) => {
            const original = history[method];
            history[method] = function (...args) {
                const result = original.apply(this, args);
                try {
                    trackPageView();
                } catch (e) {
                    console.error(e);
                }
                return result;
            };
        });

        window.addEventListener('popstate', trackPageView);
    })();
</script>
```

PreviousAdding the tracking codeNextAdd tracker to Next.js App

Last updated 5 months ago

Was this helpful?