Google Analytics能否正常追踪SvelteKit站点的内部跳转链接？

数据老陈

2026-9-25

SvelteKit内部链接的Google Analytics追踪适配说明

核心结论

默认无法完整追踪所有路由跳转，需要做额外适配。

原因说明

SvelteKit作为客户端渲染的SPA框架，会自动劫持同域下的<a href="/xxx">内部链接，走无刷新的客户端路由跳转，不会触发整页重载。而默认直接放到页面头部的Google Analytics代码，只会在页面首次加载完成时上报1次页面访问事件，后续所有客户端路由切换都不会触发新的上报，导致导航数据缺失。
只有给<a>标签添加data-sveltekit-reload属性强制走整页刷新的链接，才能被默认GA代码正常捕获，这种场景不建议常规使用。

适配方案

你只需要在根布局中监听SvelteKit的路由跳转事件，每次跳转完成后手动上报一次页面访问事件即可，具体实现如下：

在项目根路由的+layout.svelte文件中添加如下逻辑

<script>
  import { page } from '$app/stores';
  import { afterNavigate } from '$app/navigation';

  // 路由跳转完成后触发GA上报
  afterNavigate(() => {
    if (window.gtag) {
      // 替换为你自己的GA测量ID
      window.gtag('config', 'G-XXXXXXXXXX', {
        page_path: $page.url.pathname,
        page_title: document.title
      });
    }
  });
</script>

<svelte:head>
  <!-- 替换为你自己的GA官方代码 -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  </script>
</svelte:head>

<!-- 页面插槽 -->
<slot />