Google アナリティクスとのクイックスタート

Manifest V3 はリモートコード実行 (opens in a new tab) をサポートしていないため、特に最新の gtag4 バージョン (opens in a new tab) を使用する場合、開発者が拡張機能プロジェクトに Google アナリティクスを統合することが非常に困難でした。

この問題を克服するために、Plasmo はビルド時にリモートコードをバンドルします。

トラッキング/測定 ID の取得

まず、トラッキング ID を取得するためにプロパティを作成する必要があります。このプロセス中に、Google はウェブサイトの URL を提供するように求めます。ドメインのサブドメインを提供することをお勧めします。これにより、受信データがウェブサイト/ドメイン/拡張機能のプロパティからのみであることが保証されます。

♻️

お持ちのプロパティ（たとえば、拡張機能のマーケティングに使用しているウェブサイトのプロパティ）を再利用できます。

次に、測定 ID を取得するには、Google アナリティクスダッシュボードにアクセスし、「タグ設定手順」セクション（管理 -> 設定アシスタント -> タグのインストール -> データストリーム -> ウェブ）に移動します。

測定 ID

測定 ID の横にあるボタンをクリックすると、クリップボードにコピーされます。

環境変数の設定

測定 ID を適切に保存するために、環境変数を使用することをお勧めします。.env.local ファイルを作成します。

.env.local

PLASMO_PUBLIC_GTAG_ID=<paste in your measurement 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 アナリティクスの使用

以下は、ポップアップページに 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>
        Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
      </h1>
      <input onChange={(e) => setData(e.target.value)} value={data} />
    </div>
  )
}
 
export default IndexPopup

import 文と useEffect 内のコードは、Google が提供するものと同一です（下の画像を参照）。それらを React ライフサイクルに適合させました。また、TypeScript で動作させるために window オブジェクトを追加しました。

測定 ID

完全な例

完全な例を見るには、サンプルリポジトリの with-google-analytics (opens in a new tab) を確認してください。

Quickstart: Firebase Auth Quickstart: Chrome Storage