Remix+CloudflareでWebサイトを作る 31（アクセス数の違い、Google Analyticsのコードを入れるとデプロイできない問題）
saneatsu
【2024-08-26】Google Analyticsでページパスがすべて/になる
問題
| パス | 状況 |
|---|---|
| / | すべてここに集約されている |
| /users/1 | ページタイトルとしてはカウントされているが、ページパスは/に集約されてしまっている |
| /categories | ページタイトルとしてもカウントされていないし、ページパスも取れていない |
/ 以外のページパスの情報が取れていない。
それか取れていても/ にカウントされてしまっている。
現状
「ページパスとスクリーン クラス」を表示してみると色々なページにアクセスしているはずなのにトップページ（/）にしかアクセスしていないような結果が出てきた。
ローカルで確認する限り適切なパスは入っているんだけどな...？
/categories がページタイトルが取れてないのはRemixのmetaに何も設定してないからだろうか？
だとしてもデフォルトのページタイトルが入りそうなもんだけどな。
saneatsu
お、1日経ったら適切なページパスと、ある程度の表示回数が入っていた。
よくわからんが一旦は「アクセスしても反映されるまでにある程度のラグがある」と解釈しとこ。
あとtitleが設定していない場合、/hoge とかじゃなくて（not set）に集約されてしまうのか。
saneatsu【2024-08-27】アクセス数の違い色々まとめ
主要な指標
PV（ページビュー）
- とは？
- Webページが「表示された回数」
- 例
- 「10人が1回ずつページを閲覧した場合」と「同一ユーザーが10回ページを閲覧した場合」では、PV数は同じ10になる
- Google Analyticsで調べる方法
- 「レポート > ユーザー エンゲージメントとユーザー維持 > ページとスクリーン」から確認可能
- 「PV」ではなく「表示回数」という名称で表されていることに注意
SS（セッション）
- とは？
- 要はWebサイトに発生した「訪問回数」
- 「セッション」とはユーザーがWebサイトに訪問してから離脱するまでの一連の行動を意味する言葉
- 1回サイトに訪問して、そのサイトから離脱するまでの流れが「1セッション」になる
- 例
- WebサイトのAページにアクセスし、サイト内のBページを見てからAに戻った場合、セッションは1で合計PVは3になる
UU（ユニークユーザー）
- とは？
- 一定期間（例: 日、週、月）内のWebサイトを実際に訪れた「実人数」
その他
ユニークページビュー（ページ別セッション・ページ別訪問数）
- とは？
- 特定のページが閲覧された回数を意味する指標
- セッションが始まるたびにカウントされ、同一セッション中に何度閲覧されてもカウントは1になる
- 先述したセッション数は「Webサイト全体の訪問回数」、こちらは「特定のページにおける訪問回数」という違いがある点に注意しましょう。
AU（アクティブユーザー）
- とは？
- 特定の期間内にサービスを利用したユーザーの数
- 使われ方
- 会員登録などをしていても、実際にWebサイトやアプリを利用する人は一部
- 利用実態のないユーザーを除いた、実際の利用者を知るときに活用される指標
UB（ユニークブラウザ）
- とは？
- ブラウザベースでUUをカウントする
- 例
- 同一ユーザーが別ブラウザでサイトにアクセスしたときは、別ユーザーとして認識される
saneatsu
【2024-08-27】Cloudflareにデプロイ時にエラー：Failed to publish your Function. Got error: binding DB of type d1 failed to generate.
背景
原因
1つ前のScrapで以下を実行したのが原因で、GitHub ActionでCloudflareへデプロイする箇所が落ちている。
pnpm add @google-analytics/data
GitHub Actions
...
- name: Deploy
id: cloudflare-wrangler
uses: cloudflare/wrangler-action@v3
with:
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
command: pages deploy ./build/client --project-name=YOUR_APP_NAME --branch=staging
エラー内容
✨ Compiled Worker successfully
Uploading... (75/75)
✨ Success! Uploaded 0 files (75 already uploaded) (0.57 sec)
✨ Uploading Functions bundle
🌎 Deploying...
✘ [ERROR] Deployment failed!
Failed to publish your Function. Got error: binding DB of type d1 failed to generate. Please try again later or contact support.
🪵 Logs were written to "/home/runner/.config/.wrangler/logs/wrangler-2024-08-27_06-20-30_644.log"
Error: The process '/usr/local/bin/npx' failed with exit code 1
Error: 🚨 Action failed
調査
ChatGPTに聞いたら「バンドルサイズがでかくなったんじゃね？」と言われたので見てみる。
$ npx wrangler deploy 'functions/[[path]].ts' --outdir bundled/ --dry-run
Total Upload: 10286.82 KiB / gzip: 2546.92 KiB
--minify オプション付き
$ npx wrangler deploy 'functions/[[path]].ts' --outdir bundled/ --dry-run --minify
Total Upload: 7545.52 KiB / gzip: 2287.36 KiB
そんな変わらんきがするけどな〜と思いつつ、再度GitHub ActionのJobを走らせてみたら通ってしまった...。
一応もう一度実行してみたけど成功する。
ん〜今後も度々発生しないか不安だ。
saneatsu
【2024-08-28】Cloudflareにデプロイ時にエラー：The package "xxx" wasn't found on the file system but is built into node. が大量発生
エラー内容
詳細は省略するが、以下のようなエラーが発生。
基本的には The package "xxx" wasn't found on the file system but is built into node. が大量発生している。
✘ [ERROR] Could not resolve "stream"
✘ [ERROR] Could not resolve "stream"
✘ [ERROR] Could not resolve "fs"
✘ [ERROR] Could not resolve "path"
✘ [ERROR] Could not resolve "net"
✘ [ERROR] Could not resolve "tls"
✘ [ERROR] Could not resolve "assert"
✘ [ERROR] Could not resolve "url"
✘ [ERROR] Could not resolve "crypto"
✘ [ERROR] Could not resolve "stream"
✘ [ERROR] Could not resolve "stream"
✘ [ERROR] Could not resolve "stream"
✘ [ERROR] Could not resolve "events"
✘ [ERROR] Could not resolve "events"
✘ [ERROR] Could not resolve "stream"
../node_modules/retry-request/index.js:3:30:
3 │ const {PassThrough} = require('stream');
╵ ~~~~~~~~
The package "stream" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.
✘ [ERROR] Build failed with 48 errors:
../node_modules/agent-base/dist/helpers.js:27:34: ERROR: Could not resolve "http"
../node_modules/agent-base/dist/helpers.js:28:35: ERROR: Could not resolve "https"
../node_modules/agent-base/dist/index.js:30:33: ERROR: Could not resolve "net"
../node_modules/agent-base/dist/index.js:31:34: ERROR: Could not resolve "http"
../node_modules/agent-base/dist/index.js:32:24: ERROR: Could not resolve "https"
原因
ここの3.4の実装をページ側から呼び出すとエラーが発生する。
もっと突き詰めていくと import { BetaAnalyticsDataClient } from "@google-analytics/data"; でimportしているとエラーが発生する
調査
エラーにはAre you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.と書いている。
1. nodejs_compat
これを追加しても解決できず。
+ compatibility_flags = [ "nodejs_compat" ]
2. vite.config.ts に platform: "node" を追加
import {
vitePlugin as remix,
cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { getLoadContext } from "./load-context";
export default defineConfig(({ mode }) => {
return {
plugins: [
remixCloudflareDevProxy({ getLoadContext }),
remix(),
tsconfigPaths(),
],
+ esbuild: {
+ platform: "node",
+ },
};
});
解決できず。
3. npm i buffer
2022年の記事。
確かにBufferは使われているけど、別にBufferでエラーが起きているわけではなく、@google-analytics/data で起きているんだよなぁ。
そもそも他の場所でBuffer.fromを使っているけどそこはエラー出てないしな〜。
と思いながらこの記事も見てみるとesbuildの設定を変えるとなんとかなりそうなのかも？と思って色々やってみたけどどうにもこうにもうまくいかず。
そもそもこの記事ではnpm run dev でエラーが発生してるけど、自分は通っているし、開発用・本番用のビルドコマンドも通っている。
失敗しているのは pages deploy ./build/client コマンドでCloudflareにデプロイする箇所。
この人も同じようなエラーに遭遇しているが以下のような文章が。
compatibility_flags = [ "nodejs_compat" ]を使った場合、cryptoのエラーが発生します。
ライブラリの内部で使われているのでnode:cryptoにする解決策は使えなさそうなのが悩ましいですね・・・
ん〜どうにもならんのかな？
4. Issueはある？
あって2ヶ月前にOpenされているがFixされておらず。
他の方法は？
| パッケージ名 | 最新更新日 |
|---|---|
| @google-analytics/data | v4.8.0（16日前更新）今回使用してエラーが出ているもの |
| react-ga | v3.3.1（2年前更新） |
| react-ga4 | v2.1.0（1年前更新） |
| googleapis | 143.0.0（19時間前更新） |
| @googleapis/analytics | 7.0.7（4ヶ月前） |
googleapisでanalyticsに絞ったものが@googleapis/analyticsなのかな。
@google-analytics/data が4.5万DL/週あるのに対して @googleapis/analytics は530DLとえらく少ない。
saneatsu
Could not resolve "crypto" 系のエラーって前にも出たけどなんだっけ？とぐぐってみたら自分のScrapsが検索結果の一番上に来た。
これは単純にimport先間違ってただけか。全然違うやつ。
saneatsu@googleapis/analytics 使ってみる
コード
import {
auth as googleAuth,
analytics,
} from "@googleapis/analytics";
const GOOGLE_CREDENTIALS_BASE64 = "3.3で取得した値";
export default async function getPageView() {
try {
const credentials = JSON.parse(
Buffer.from(GOOGLE_CREDENTIALS_BASE64, "base64").toString("ascii")
);
const auth = new googleAuth.GoogleAuth({
credentials,
scopes: ["https://www.googleapis.com/auth/analytics.readonly"],
});
const analyticsClient = analytics("v3");
const response = await analyticsClient.data.ga.get({
auth,
ids: "xxxxxx",
"start-date": "2024-08-01",
"end-date": "today",
metrics: "ga:pageviews",
});
console.log(response);
return null;
} catch (error) {
console.log("🚨 エラーが発生しました");
console.log(error);
return null;
}
}
エラー
実行してみると以下のエラーが発生する。
GaxiosError: Google Analytics API has not been used in project 102xxxxxxxxx before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/analytics.googleapis.com/overview?project=102xxxxxxxxx then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
原因
GA4から使われている「Google Analytics Data API 」を検索。
ググると出てくる「Google Analytics Reporting API」は古いので注意。
前の記事でこう書いたが、今回は以下の「Google Analytics API」を有効化する必要がある。
やっぱ@google-analytics/data使いたいな〜。
データだけためておけばよくて急いでるわけでもないし一旦他のタスク進めながら対応考えたい（疲れた）。