🐥

はじめてのPages(3) Web Analyticsとの連携

2023/04/19に公開

Cloudflare

tech

Cloudflare Web Analyticsはビーコン埋め込み型アクセス解析ツールです。単独でも利用が可能ですが、PagesからActivateすることも可能です。

GA4等のような解析ツールと異なりユーザーを特定せず、Webのパフォーマンスを図るのに特化し、クッキー、IPアドレス、ユーザーAgentなどは取得せず機能を提供しているのが特徴です。

さっそくやってみる
ではまず単純なProjectをPagesで起動します。Pagesの使い方は過去記事(その１、その２)も参照にしてください。

Pagesの画面から"Create a project"を押します。

Direct Uploadを選びます。

"Simple"と名前を付け"Create project"を押します。

以下のindex.htmlを作成し適当な新規フォルダに入れます。（Pagesはファイル単位でのアップロードをサポートせず、フォルダ単位となります。ファイル単位の操作が必要な場合、Direct UploadではなくGit連携がおすすめです。

<html>
<head>
<title>hello world</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>

フォルダを選択すると以下のようにUploadがなされます。

"Deploy site"を押すとサイトがデプロイされますので、URLにアクセスすると別タブでサイトが表示されます。
では元のタブに戻り"Continue to project"を押します。
画面上部Settingsをクリックします。

"Enable Web Analytics"を押します。

"View Web Analytics"を押すと、分析結果画面に行きますが、当然まだ何もデータは集計されていない状態です。Pages経由のDeployの場合、HTMLのソースを見ると自動でビーコンが挿入されていることがわかります。

<html>
<head>
<title>hello world</title>
</head>
<body>
<h1>hello world</h1>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "b6b74334c72041dcb8b995c7efa84684"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>

Pages以外で使う場合、まずはHTMLにビーコンを埋め込む必要があります。
画面左ペインのWeb Analyticsをクリックし続いて"Manage site"をクリックします。

ドメイン専用のsnipetが出てきます。（Pagesに専用カスタムドメインをセットすると場合、先にそちらの作業を終わらせておいてください。この記事ではテスト用ドメインで作業を進めます。）

このスニペットをhtmlの</body>タグの直前に挿入します。

<!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "b6b74334c72041dcb8b995c7efa84684"}'></script><!-- End Cloudflare Web Analytics -->

このトークンは私の環境専用なので、皆さんはそれぞれ異なる値になります。

ブラウザや携帯で何度かアクセスを行い、５分ほど待ちます。
以下のような統計が取れます。

また連携する機能でCloudflare全体のAccountの統計も取得可能な"Account Analytics"があります。

いかがでしょうか。自動でビーコンがhtmlに挿入され便利なことを体感いただけたと思います。
Core web Vitals
Analyticsで出てくる以下は何でしょうか。

これはGoogleが提唱しているWeb健全性指標です。現在はChroniumのみがサポートしており、SafariやFireFoxは未対応です。（対応は予定されているようです）
それぞれ以下を意味します。

最大コンテンツペイント (LCP): ユーザーが認識した読み込み速度を測定し、ページのメインコンテンツの読み込みにかかる時間を返す
最初の入力遅延 (FID): Web サイトが最初のユーザー入力に応答する速さを測定
累積レイアウトシフト (CLS): 視覚的な安定性を測定。ウェブサイトが表示された後に動く部分を測定します。よくある上から徐々に落ちてくる広告などはユーザビリティを下げますので、この点数が上がり（悪くなり）ます。

詳しくはこちらをご覧ください。

Next.jsの場合
書式が異なるためコードスニペットをそのままコピーしても動作しませんので修正して
_document.jsに挿入してください。挿入後は以下となります。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "91e85c0aca514424b178496d8dd968fd"}'></script>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Discussion