如何在 svelte 中添加 Google Analytics 跟踪 ID答案

【问题标题】：How to add Google Analytics tracking ID in svelte如何在 svelte 中添加 Google Analytics 跟踪 ID
【发布时间】：2022-12-19 14:05:27
【问题描述】：

我想将我的 Google Analytics Tracking ID- UA-XXXXXXXXX-X 添加到我的 svelte 应用程序中。

我找到了两种方法。

首先使用Install the global site taghere

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){window.dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

我想，我必须在app.svelte 中插入上面的代码。我对吗？

二、使用@beyonk/svelte-google-analytics

使用安装包

npm i --save-dev @beyonk/svelte-google-analytics

import { GoogleAnalytics } from '@beyonk/svelte-google-analytics'

<GoogleAnalytics properties={[ 'google property id A', ...'google property id X' ]} />

那么我应该在哪里添加tracking ID？这就是 svelte 文档中提到的方式 here

使用first 或second 方法？这令人困惑

【问题讨论】：

首先：UA-XXXXXXXXX-X 是 Universal analytics 的跟踪 ID GA_MEASUREMENT_ID 是 Google analytics GA4 的测量 ID 您的混合系统选择一个。
@DalmTo 我是第一次使用它。我发现第一个简单易懂的将尝试将其插入 app.svelte。当你说我在混合系统时，你能详细说明你的意思吗？

标签： google-analytics svelte

【解决方案1】：

您可以在public/index.html 内添加全局站点标签。你所有的 Svelte 都会被注入到这个文件中，所以它会处理你所有的页面。

编辑：SvelteKit 1.0 在根目录中有这个基本 HTML 文件 app.html，但是无论您使用哪种风格的 Svelte，只需确保将它添加到与 Svelte 混合的 HTML 文件中。

【讨论】：

【解决方案2】：

将多行 html 插入 .svelte 文件：

{@html `<!-- google tag analytics goes here -->
<!-- ... -->
<!-- / -->`}

或者您可以将代码插入app.html

【讨论】：