Back to Details

analytics

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

analytics

analytics

選定

Selection

計測したいものと、同意取得の負担で選ぶ。
  • Cloudflare Web Analytics — Cookie を使わず、クライアント側に識別子を保存しない。ページビュー、リファラ、Core Web Vitals を見たいだけならこれで足りる。Cookie バナーの負担がない。
  • Google Analytics — ユーザー単位のファネル、コンバージョン、広告連携が要るなら。Cookie を使うため同意管理が必要になる。
  • Workers Analytics Engine — 独自のイベントを時系列で記録したい場合。アプリ側の指標をサーバー側で持てる。
  • GraphQL Analytics API — Cloudflare が持つリクエストやキャッシュの統計を取り出す。クライアント側の JavaScript を足さずに済む。
併用してよい。Web Analytics で全ページの素の数字を持ち、GA は必要な導線にだけ入れる、という分け方が同意管理の範囲を小さくする。
Choose based on what you want to measure and the burden of obtaining consent.
  • Cloudflare Web Analytics — Does not use cookies or store identifiers on the client side. It is sufficient if you only need page views, referrers, and Core Web Vitals. It does not introduce the burden of a cookie banner.
  • Google Analytics — Use it when you need user-level funnels, conversions, or advertising integrations. Because it uses cookies, consent management is required.
  • Workers Analytics Engine — Use it when you need to record custom events over time. It lets you keep application-side metrics on the server side.
  • GraphQL Analytics API — Use it to retrieve statistics about requests and caching handled by Cloudflare. It does not require adding client-side JavaScript.
These solutions can be used together. Keeping baseline figures for every page with Web Analytics while using GA only for the paths that need it can minimize the scope of consent management.

Google Analytics と同意

Google Analytics and Consent

Cookie の使用について確認し、同意を得たときに同意シグナルを送る。
  • analytics_storage は常に granted にする。基本的な分析は常に有効。
  • ad_storage、ad_user_data、ad_personalization は既定で granted にする。
  • ユーザーが「同意しない」を選んだら、広告関連の3つを denied に更新する。
事前同意が必要な地域（EEA、英国など）を対象にする場合、広告関連の既定値は granted ではなく denied にし、同意を得てから granted に更新する。対象地域を確認してから既定値を決める。
html
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    analytics_storage: 'granted',
    ad_storage: 'granted',
    ad_user_data: 'granted',
    ad_personalization: 'granted',
  });
</script>
js
// 「同意しない」を選んだとき
gtag('consent', 'update', {
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
});
  • default はタグの読み込みより先に実行する。順序が逆だと既定値が効かない。
  • 選択結果を保存し、再訪時に同じ状態を復元する。毎回バナーを出さない。
  • 同意の取り消し導線を用意する。一度同意したら変更できない作りにしない。
  • バナーで主要コンテンツを覆わない。キーボードで操作でき、フォーカスが閉じ込められる形にする。
  • 計測 ID、コンバージョン設定、イベント名をコードに直書きして環境ごとに分岐させない。環境変数で切り替える。
Confirm how cookies will be used and send a consent signal when consent is obtained.
  • Always set analytics_storage to granted. Keep basic analytics enabled at all times.
  • Set ad_storage, ad_user_data, and ad_personalization to granted by default.
  • If the user selects “Do Not Consent,” update the three advertising-related values to denied.
When targeting regions where prior consent is required, such as the EEA and the UK, do not use granted as the default for advertising-related signals. Set them to denied and update them to granted after consent is obtained. Verify the target regions before choosing the default values.
html
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    analytics_storage: 'granted',
    ad_storage: 'granted',
    ad_user_data: 'granted',
    ad_personalization: 'granted',
  });
</script>
js
// 「同意しない」を選んだとき
gtag('consent', 'update', {
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
});
  • Run default before loading the tags. If the order is reversed, the default values will not take effect.
  • Save the user's selection and restore the same state when they return. Do not display the banner on every visit.
  • Provide a way to withdraw consent. Do not make it impossible to change the decision after consent has been granted.
  • Do not let the banner cover the primary content. Make it keyboard accessible and ensure that focus is contained appropriately.
  • Do not hard-code measurement IDs, conversion settings, or event names and branch between environments in the code. Switch between them using environment variables.

Cloudflare Web Analytics

Cloudflare Web Analytics

Cookie もクライアント側の識別子も使わないため、多くの場合 Cookie バナーの対象にならない。ただし、対象地域の法制度と、他に入れている計測やタグを合わせて判断する。Web Analytics を入れたから同意不要と短絡しない。
導入方法は2つある。
  • 自動 — Cloudflare をプロキシとして経由しているドメインで、ダッシュボードから有効にする。HTML を変更しない。
  • 手動 — beacon のスクリプトを HTML に入れる。Cloudflare を経由していない配信でも使える。
見られるのはページビュー、リファラ、国、デバイス、Core Web Vitals など。ユーザー単位の追跡やファネル分析はできない。そこが必要なら GA を併用する。
Because it does not use cookies or client-side identifiers, it is generally not subject to cookie-banner requirements. However, assess it in the context of the laws in the target regions and any other analytics tools or tags in use. Do not assume that consent is unnecessary simply because Web Analytics has been added.
There are two ways to integrate it.
  • Automatic — Enable it from the dashboard for domains proxied through Cloudflare. No HTML changes are required.
  • Manual — Add the beacon script to the HTML. This can also be used when the content is not delivered through Cloudflare.
It provides page views, referrers, country, device, Core Web Vitals, and similar data. It does not support user-level tracking or funnel analysis. Combine it with GA if those capabilities are needed.

Workers Analytics Engine

Workers Analytics Engine

アプリ固有のイベントを Workers から書き込む。
ts
// wrangler の設定で ANALYTICS バインディングを定義しておく
env.ANALYTICS.writeDataPoint({
  blobs: ['checkout', 'card'],
  doubles: [amount],
  indexes: [tenantId],
})
  • indexes はカーディナリティの低い値にする。ユーザー ID のような値を入れない。
  • blobs と doubles に個人情報を入れない。メールアドレス、氏名、生の IP を書かない。
  • 書き込みは非同期で、リクエストの応答を遅らせない範囲にとどめる。
  • 集計は SQL API や GraphQL から行う。
Write application-specific events from Workers.
ts
// wrangler の設定で ANALYTICS バインディングを定義しておく
env.ANALYTICS.writeDataPoint({
  blobs: ['checkout', 'card'],
  doubles: [amount],
  indexes: [tenantId],
})
  • Use low-cardinality values for indexes. Do not use values such as user IDs.
  • Do not put personally identifiable information in blobs or doubles. Do not write email addresses, names, or raw IP addresses.
  • Perform writes asynchronously and keep them within limits that do not delay the request response.
  • Perform aggregation through the SQL API or GraphQL.

共通の注意

Common Precautions

  • 計測を理由にページの表示を遅らせない。タグは非同期で読み込む。
  • 個人を特定できる値を URL やイベントのパラメータに入れない。メールアドレス、会員番号、トークンを送らない。
  • 内部アクセスとステージング環境を計測から除外する。数字が汚れる。
  • 何を測るかを先に決める。取れるものを全部取る設定にしない。
  • 計測タグを入れたことと、意思決定に使えることは別。見る指標と見る人を決めてから入れる。
  • Do not delay page rendering for analytics. Load tags asynchronously.
  • Do not include values that can identify individuals in URLs or event parameters. Do not send email addresses, membership numbers, or tokens.
  • Exclude internal traffic and staging environments from analytics. They distort the data.
  • Decide what you want to measure first. Do not configure the solution to collect everything available.
  • Adding tracking tags and being able to use the data for decision-making are separate concerns. Decide which metrics to monitor and who will use them before adding the tags.

確定前に確認する

Final Checklist

  • Cookie を使う計測を入れているなら、同意取得と取り消しの導線があるか。
  • gtag の consent default が、タグの読み込みより先に実行されているか。
  • 対象地域に合わせて広告関連の既定値を決めたか。
  • 同意の選択が保存され、再訪時に復元されるか。
  • Cookie バナーがキーボードで操作でき、主要コンテンツを覆っていないか。
  • 個人を特定できる値をイベントや URL に含めていないか。
  • ステージングと内部アクセスを除外したか。
  • 計測 ID が環境変数で切り替わるか。直書きされていないか。
  • If cookie-based tracking is being used, are consent acquisition and withdrawal paths available?
  • Does the gtag consent default run before the tags are loaded?
  • Were the advertising-related default values set according to the target regions?
  • Is the consent selection saved and restored on subsequent visits?
  • Is the cookie banner keyboard accessible, and does it avoid covering the primary content?
  • Are values that can identify individuals excluded from events and URLs?
  • Are staging and internal traffic excluded?
  • Can measurement IDs be switched through environment variables instead of being hard-coded?