Tracking Single Page Application

Single Page Application (SPA) membutuhkan tracking khusus karena navigasi terjadi lewat router JavaScript, bukan reload halaman penuh. Tanpa konfigurasi ini, analytics hanya menangkap halaman pertama dan kehilangan perjalanan user berikutnya.

Tantangan Tracking SPA

Pada website tradisional, setiap perpindahan halaman memicu pageview baru. Pada SPA:

Konten halaman berubah tanpa reload.
URL berubah lewat pushState atau replaceState.
Navigasi terjadi instan lewat JavaScript.
Tracking pageview tradisional melewatkan perubahan route.

Tanpa tracking SPA:

Hanya initial load yang tercatat.
Route change tidak terlihat.
Journey user tidak lengkap.
Atribusi konversi bisa putus.

Dengan tracking SPA yang benar:

Semua route change tercatat sebagai pageview.
Journey user lengkap.
Atribusi konversi tetap terjaga.

Setup Dasar Konektor

Aktifkan mode SPA saat inisialisasi script:

konektor('init', 'WS-YOUR-WORKSPACE-ID', {
  spa: {
    enabled: true,
    autoTrack: true,
    trackHash: false
  }
})

Tracking Manual Route Change

Jika framework Anda membutuhkan kontrol manual, panggil tracking saat route berubah:

function trackPageView() {
  konektor('track', 'pageview', {
    page: window.location.pathname,
    title: document.title,
    referrer: document.referrer
  })
}

trackPageView()

React Router

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

function App() {
  const location = useLocation()

  useEffect(() => {
    if (window.konektor) {
      window.konektor('track', 'pageview', {
        page: location.pathname,
        search: location.search,
        title: document.title
      })
    }
  }, [location])

  return <YourApp />
}

Vue Router

import router from './router'

router.afterEach((to, from) => {
  if (window.konektor) {
    window.konektor('track', 'pageview', {
      page: to.path,
      title: to.meta?.title || document.title,
      referrer: from.path
    })
  }
})

Angular Router

import { NavigationEnd, Router } from '@angular/router'
import { filter } from 'rxjs/operators'

export class AppComponent {
  constructor(private router: Router) {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        if (window.konektor) {
          window.konektor('track', 'pageview', {
            page: event.url,
            title: document.title,
            referrer: event.urlAfterRedirects
          })
        }
      })
  }
}

Next.js

import { useRouter } from 'next/router'
import { useEffect } from 'react'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      if (window.konektor) {
        window.konektor('track', 'pageview', {
          page: url,
          title: document.title
        })
      }
    }

    router.events.on('routeChangeComplete', handleRouteChange)
    return () => router.events.off('routeChangeComplete', handleRouteChange)
  }, [router.events])

  return <Component {...pageProps} />
}

Praktik Terbaik

Trigger tracking segera setelah route selesai berubah.
Sertakan page, title, dan data atribusi yang relevan.
Jangan block navigasi hanya karena tracking gagal.
Test route utama, back/forward browser, modal virtual page, dan checkout flow.

Tautan Terkait

Butuh Bantuan Lebih Lanjut?

Tim kami siap membantu Anda memaksimalkan tracking iklan dan atribusi bisnis.

support@konektor.idYouTube

Coba atau lanjutkan

Jadwalkan Demo Onboarding Support Teknis