385 字
2 分钟
如何在 Astro 框架添加 Google Analytics 代码？
黑哥的梦呓 问：
请问 Astro 框架如何添加 Google Analytics 代码？
ChatGPT.com 答：
要在使用 Astro 框架构建的网站中添加 Google Analytics（谷歌分析）代码，可以按照以下步骤操作：
创建一个 Layout 组件：在 黑哥的梦呓 的 Astro 项目中创建一个通用的布局组件，用于包含所有页面的公共部分，比如头部、脚部和 Google Analytics 代码。
在 Layout 组件中添加 Google Analytics 代码：将 Google Analytics 提供的代码片段添加到该布局组件的
<head>标签内。
以下是一个示例：
// src/components/Layout.astro
---
const title = "Your Site Title";
const description = "Your Site Description";
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
<meta name="description" content={description}>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_TRACKING_ID');
</script>
</head>
<body>
<slot />
</body>
</html>
- 使用 Layout 组件：在 黑哥的梦呓 的页面组件中使用这个 Layout 组件，以确保每个页面都包含 Google Analytics 代码。
例如：
// src/pages/index.astro
---
import Layout from '../components/Layout.astro';
---
<Layout>
<h1>Welcome to My Site</h1>
<p>This is the home page.</p>
</Layout>
- 替换跟踪 ID：确保将
YOUR_TRACKING_ID替换为 黑哥的梦呓 的 Google Analytics 跟踪 ID。
通过以上步骤， 黑哥的梦呓 可以在 Astro 项目中添加 Google Analytics 代码，从而实现对网站访问数据的追踪。
如何在 Astro 框架添加 Google Analytics 代码？
https://hackersay.top/posts/chatgpt-astro-add-google-analytics-code/