SvelteKit 谷歌分析双重报告答案

【问题标题】：SvelteKit google analytics double reportingSvelteKit 谷歌分析双重报告
【发布时间】：2022-06-23 19:22:54
【问题描述】：

我正在寻找正确的设置方式在我的 sveltekit 应用程序中启动谷歌分析。

app.html

<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
            window.dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'TRACKING_ID');
</script>

__layout.svelte

$: {
        console.log('page: ' + $page.url.pathname);
        if (typeof gtag !== 'undefined') {
            console.log('callign gtag: ' + $page.url.pathname);
            gtag('config', trackingId, {
                page_path: $page.url.pathname
            });
        }
    }

效果很好，唯一的问题是重复报告

我可以看到一个页面两次而不是一次:(

可以帮帮我吗？

【问题讨论】：

标签： google-analytics sveltekit

【解决方案1】：

我使用这个脚本。我是从 Youtuber 上找到的，但我不记得要参考的频道了。

我将它导入到__layout.svelte。这有助于在 Production 上启动 gtag 并正确引用访问过的页面。

<script>

import { page } from '$app/stores';


    $: if (typeof gtag !== 'undefined' && import.meta.env.PROD == true) {
        if ($page.query.toString().length > 0) {
            gtag('config', 'GA_MEASUREMENT_ID', {
                page_path : $page.path,
                page_location: `${$page.host}${$page.path}?${$page.query}`,
            });
        } else {
            gtag('config', 'GA_MEASUREMENT_ID', {
                page_path : $page.path,
                page_location: `${$page.host}${$page.path}`,
            });
        }
    }


</script>

【讨论】：

感谢您的回复，我发布了我的解决方案

【解决方案2】：

我解决了我在 __layout 中导入的组件

<script lang="ts">
    import { GA_MEASUREMENT_ID } from '$lib/environment';
    export let id = GA_MEASUREMENT_ID;
    if (typeof window !== 'undefined') {
        window.dataLayer = window.dataLayer || [];
        window.gtag = function gtag(): void {
            window.dataLayer.push(arguments);
        };
        window.gtag('js', new Date());
        window.gtag('config', id);
    }
</script>

<svelte:head>
    <script async src="https://www.googletagmanager.com/gtag/js?id={id}"></script>
</svelte:head>

【讨论】：

【解决方案3】：

我也遇到了同样的问题，我按照 youtube 教程进行了设置，但我很确定您不需要响应式语句..

如果您在谷歌分析中找到您的信息流并找到测量设置面板并在页面浏览量下单击以显示高级设置，您应该会看到默认情况下它会根据浏览器页面历史记录跟踪页面更改 - sveltekit SPA路由器默认情况下会这样做..所以摆脱响应式语句对我有用?

【讨论】：