快速开始使用 Google Analytics
由于Manifest V3不支持远程代码执行 (opens in a new tab)，开发者很难将Google Analytics集成到他们的扩展项目中，尤其是最新的gtag4版本 (opens in a new tab)。
为了解决这个问题，Plasmo 在构建时捆绑远程代码。
获取跟踪/测量ID
您需要首先创建一个属性以获取跟踪ID。在此过程中，Google会要求提供一个网站URL - 我们建议提供您域名的子域。这确保了传入的数据仅来自您的属性 - 网站/域名/扩展。
♻️
您可以重用任何您拥有的属性（例如，您用于推广扩展的网站属性）。
然后，为了获取测量ID，请访问您的Google Analytics仪表板，并导航到标记说明部分（管理 -> 设置助手 -> 标记安装 -> 数据流 -> Web）：
单击测量ID旁边的按钮，它应该会复制到剪贴板。
环境变量设置
为了正确存储测量ID，我们建议使用环境变量。创建一个 .env.local 文件：
.env.local
PLASMO_PUBLIC_GTAG_ID=<粘贴您的测量ID>为了获得TypeScript IntelliSense，创建一个 index.d.ts 文件：
index.d.ts
declare namespace NodeJS {
interface ProcessEnv {
PLASMO_PUBLIC_GTAG_ID?: string
}
}
interface Window {
dataLayer: Array
gtag: (a: string, b: any, c?: any) => void
}在React组件中使用Google Analytics
下面是如何在弹出页面中实现google标签跟踪脚本的示例：
popup.tsx
import "https://www.googletagmanager.com/gtag/js?id=$PLASMO_PUBLIC_GTAG_ID"
import { useEffect, useState } from "react"
function IndexPopup() {
const [data, setData] = useState("")
useEffect(() => {
window.dataLayer = window.dataLayer || []
window.gtag = function gtag() {
window.dataLayer.push(arguments) // eslint-disable-line
}
window.gtag("js", new Date())
window.gtag("config", process.env.PLASMO_PUBLIC_GTAG_ID, {
page_path: "/popup",
debug_mode: true
})
window.gtag("event", "login", {
method: "TEST"
})
}, [])
return (
<div
style={{
display: "flex",
flexDirection: "column",
padding: 16
}}>
<h1>
欢迎来到您的 <a href="https://www.plasmo.com">Plasmo</a> 扩展！
</h1>
<input onChange={(e) => setData(e.target.value)} value={data} />
</div>
)
}
export default IndexPopup导入语句和useEffect中的代码与Google提供的内容相同（见下图）。我们将它们适配到React生命周期中。我们还添加了window对象以使其与TypeScript兼容。
完整示例
要查看完整示例，请查看我们的示例仓库中的with-google-analytics (opens in a new tab)。