直近、この辺りの理解を深めたく、色々触ってた体験談。

やった内容を雑にまとめてもらっている日報のようなものなので、整合性に欠ける可能性などはあり。

概要 (実現したこと)

Google Analytics 4 (GA4) で取得した「記事・ページのPV数ランキング」データを自動で取得し、Shopifyのバックエンド（メタオブジェクト）にJSON形式で定期保存するシステムを構築しました。これにより、Shopifyのフロントエンド（テーマのLiquidやJavaScript）から、常に最新の人気記事ランキングを動的に表示できる基盤が完成しました。

技術スタック

• データソース: Google Analytics 4 (GA4 Data API v1beta)
• データ保存先: Shopify (Admin GraphQL API / Metaobjects)
• 実行環境: Supabase Edge Functions (Deno / TypeScript)
• 認証方式:Google API: OAuth 2.0 (Refresh Token フロー)
• Shopify API: OAuth 2.0 (Client Credentials フロー)

システム構成 (アーキテクチャ)

Supabase Edge Functionsをハブとして、S2S（サーバー間）通信で完結するバッチ処理を構築しました。

1. トークン取得: SupabaseがShopifyとGoogleそれぞれの認証サーバーへリクエストを送り、短命のアクセストークンを動的に取得。
2. データ抽出: GA4 Data APIを叩き、直近30日間の screenPageViews を基準に pagePath の上位10件を取得。
3. データ整形: 取得したランキングデータをJSON配列に変換。
4. データ書き込み: ShopifyのGraphQL API (metaobjectUpsert) を実行し、メタオブジェクトの特定フィールド (json_data) にJSON文字列を保存。

実装のステップ (やったこと)

【Step 1: Google Cloud側のAPI・認証準備】

Google Cloudプロジェクトを作成し、「Google Analytics Data API」を有効化。

• OAuth 2.0 クライアントID（ウェブアプリケーション）を作成し、Client IDとClient Secretを取得。
• Google OAuth 2.0 Playgroundを使用し、googleapis.com/auth/analytics.readonly スコープで Refresh Token を発行。
• ※有効期限（7日間）の制約を回避するため、OAuth同意画面のステータスを「テスト中」から「本番環境 (In production)」に変更して無期限化。

Step 2: Shopify側のAPI・メタオブジェクト準備

• Shopifyデベロッパーダッシュボードにてカスタムアプリを作成し、Client IDとClient Secretを取得。
• アプリの「Versions（バージョン）」設定から、手動で read_metaobjects と write_metaobjects のスコープ（権限）を付与してリリース・インストールを実行。
• Shopify管理画面（カスタムデータ設定）にて、データの受け皿となるメタオブジェクト定義を作成

Step 3: Supabase Edge Functionsの実装

• Deno / TypeScript環境で実行スクリプトを作成
• 環境変数 (Supabase Secrets) に各種IDやシークレット、プロパティIDを安全に登録
• HTTP POSTリクエストをトリガーとして、一連のトークン取得・データフェッチ
• GraphQLミューテーションを実行するAPIをデプロイ

直面した課題と解決策 (Tips)

開発過程で直面した主なエラーとその解決策です。

Google APIの invalid_client エラー

• 原因：リクエストに含めたClient ID / SecretがGoogle Cloud上の登録と完全一致していない（または古い・別のプロジェクトのもの）。
• 解決策：新しいクライアントIDを再発行し、完全に一致する認証情報でリクエストを行うことで突破。

Google APIの invalid_grant エラー

• 原因：送信したリフレッシュトークンが期限切れ、または無効化されている。
• 解決策：新しいクライアントIDを用いてOAuth Playgroundでトークンを再発行。また、Google CloudのOAuth同意画面でアプリを「本番環境」に設定し、テストモードによる7日間の期限切れ制約を回避。

Shopify GraphQLの UNDEFINED_OBJECT_TYPE エラー

• 原因: Shopifyアプリ側にメタオブジェクトの読み書き権限（スコープ）が付与されていないため、APIからメタオブジェクトの定義が存在しないものとして扱われていた
• 解決策：Shopifyデベロッパーダッシュボードの新しい仕様（Versions）に従い、手動で read_metaobjects,write_metaobjects を入力してリリース。その後ストア側で権限更新を承認することで解消。