使用 Google Analytics 快速开始

由于 Manifest V3 不支持远程代码执行，开发人员很难将 Google Analytics 集成到他们的扩展项目中，特别是使用最新的 gtag4 版本。

为了克服这个问题，Plasmo 在构建时打包远程代码。

获取跟踪/测量 ID

您首先需要创建一个属性来获取跟踪 ID。在此过程中，Google 会要求提供网站 URL - 我们建议提供您域名的子域名。这确保传入的数据仅来自您的属性 - 网站/域名/扩展。

♻️

您可以重复使用您拥有的任何属性（例如，您用于营销扩展的网站属性）。

然后，要获取测量 ID，请访问您的 Google Analytics 仪表板，并导航到标签安装部分（管理 -> 设置助手 -> 标签安装 -> 数据流 -> Web）：

测量 ID

点击测量 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.plasmocn.org">Plasmo</a> 扩展！
      </h1>
      <input onChange={(e) => setData(e.target.value)} value={data} />
    </div>
  )
}
 
export default IndexPopup

import 语句和 useEffect 中的代码与 Google 给您的代码相同（见下图）。我们将它们适配到 React 生命周期中。我们还添加了 window 对象以使其与 TypeScript 配合使用。

测量 ID

完整示例

要查看完整示例，请查看我们示例仓库中的 with-google-analytics 。