チャートライブラリ・データウェアハウス・通貨/ロケール処理・管理画面に似せた UI。マーチャント向け分析のために毎回自前で立てていたスタックを、Shopify 側に丸ごと預けられるようになる。データを置く場所は、マーチャントが既に意思決定している場所(Shopify 管理画面)。
チャートライブラリを選定し、マーチャントデータを同期する DWH を用意し、通貨とロケールを自分で処理し、それでも管理画面とは見た目が揃わない UI を作る。
アプリのデータを Shopify Analytics のスキーマに載せ、ShopifyQL で問い合わせ、管理画面と同じ Web Components で描画する。マーチャントが既に意思決定している場所にアプリのデータが並ぶ。
(App Events は早期アクセス)
スキーマはドキュメント化済み
要素 1 つでチャートが出る
注釈と目標を重ねる
メタフィールド定義を analytics-queryable(分析でクエリ可能) としてマークすると、それが ShopifyQL のディメンションとして、ストアデータと並んで使えるようになる。
campaign_source注文がどのキャンペーン経由かをメタフィールドで持たせ、売上をキャンペーン別に切る。
subscription_status顧客のサブスク状態をメタフィールドで持たせ、状態別にグルーピング。
FROM sales SHOW total_sales GROUP BY order.metafields.my_app.campaign_source TIMESERIES day VISUALIZE total_sales
App Events in Analytics は、アプリが既に emit しているカスタムイベント を Shopify Analytics でクエリ可能にする機能。手順は 3 つ。
shopify.app.toml の新しいレジストリでイベントを宣言する。
App Events API 経由でイベントを emit する。
マーチャントは ShopifyQL で FROM app_events を、ストアデータと同じように問い合わせられる。
FROM app_events SHOW emails_sent GROUP BY app_name TIMESERIES day VISUALIZE total_sales
※ 上記は元記事に掲載されているサンプルをそのまま転記したもの。
安定していて、バージョン管理され、スキーマがドキュメント化された面に対して実装できる(stable, versioned, schema-documented surface)。
スキーマが公開ドキュメントになっているので、AI ツールチェーンが動作する ShopifyQL を生成できる。
Shopify 管理画面の分析を描画しているのと 同じ Web Components が、サードパーティアプリからも埋め込めるようになった。
<s-shopifyql-metric-card><s-metrics-bar><s-metrics-bar-date-picker><s-shopifyql-metric-card heading="My weekly sales" query="FROM sales SHOW total_sales TIMESERIES week VISUALIZE total_sales TYPE bar"> </s-shopifyql-metric-card>
analytics-ui.js を読み込むpolaris.js より後に読み込むこと。順序が指定されている。
コンポーネントがクエリを実行するために必要。
あとはドロップインするだけ。
数字の上に文脈を重ねるための新 API が 2 つ。アプリからもマーチャントからも使える。
パートナーアプリが GraphQL Admin API 経由で、マーチャントのチャート上に直接注釈を作成 できる。
チャートパネルには アプリの帰属表示(app attribution) が適切にレンダリングされる。
必要スコープ
read_analytics_annotations / write_analytics_annotations
マーチャントが 任意のメトリクスに目標を設定 し、レポートやダッシュボードの中で進捗を視覚的に追える。
ターゲットは GraphQL Admin API の新しいコアプリミティブ。アプリからプログラム的に作成・読み取り・チャートへのオーバーレイができる。
| やること | 従来(自前スタック) | 今回の Shopify Analytics |
|---|---|---|
| データの持ち方 | 自前 マーチャントデータを同期する DWH を用意 | 不要 Metafields を analytics-queryable に。ETL なし・別スキーマなし |
| アプリ独自イベント | 自前 自分の基盤に貯めて自分で見せる | App Events FROM app_events でマーチャントが直接クエリ(早期アクセス) |
| クエリ層 | 自前 自分で API を設計 | ShopifyQL API 安定・バージョン管理・スキーマ文書化 |
| チャート描画 | 自前 チャートライブラリ選定+実装 | Web Components 要素 1 つ。ライブラリ不要 |
| 通貨・ロケール | 自前 自分でハンドリング | 不要 コンポーネント側が処理 |
| UI の一貫性 | 近似 管理画面と完全には揃わない | 同一 管理画面と同じコンポーネント/同期状態 |
| 数字への文脈付け | 記載なし(自前実装の範囲) | Annotations / Targets 注釈と目標を API で重ねる |
定義を analytics-queryable にマークするだけで、ShopifyQL の GROUP BY 対象になる。アプリが持たせた属性を、マーチャントが自分で切って見られるのがこの機能の本質。ETL パイプラインを一本まるごと消せる可能性がある。
元記事で early access と明記されている(サインアップ導線あり)。宣言は shopify.app.toml の新レジストリ、送信は App Events API。提案では「今すぐ確定で使える機能」と「申込が要る機能」を分けて出すこと。
Web Components は analytics-ui.js を polaris.js の後にロード し、Direct API access を有効化 してから要素を置く。ここは順序と設定の両方が要件として明記されているので、動かない時の一次切り分けポイントになる。
必要スコープは read_analytics_annotations / write_analytics_annotations。アプリの帰属がチャートパネルに描画されるため、注釈はそのままアプリの露出面にもなる。スコープ追加は既存アプリでは再認可が絡む点に注意。
元記事は狙いを 2 つに分けて書いている : 開発者向けには「安定・バージョン管理・スキーマ文書化された面に対して実装できる」、LLM / エージェント向けには「公開スキーマドキュメントによって AI ツールチェーンが動作する ShopifyQL を生成できる」。分析クエリの生成をアプリ内 AI 機能に載せる設計が現実的な選択肢になる。
なお 各 API の利用可能な API バージョン・対象プラン・料金についての記載は元記事になし。実装前に shopify.dev の該当リファレンスで確認すること。
<s-shopifyql-metric-card> / <s-metrics-bar> に置き換える。クエリは ShopifyQL API に統一。analytics-ui.js は polaris.js の後にロードし、Direct API access を有効化。移行はカード 1 枚単位で並走させられるので段階的に剥がせる。read_analytics_annotations / write_analytics_annotations が必要。既存アプリはスコープ追加=再認可フローが発生する前提で計画すること。FROM app_events でクエリ可能にし、Metric Targets API で四半期売上や週次の広告経由売上に目標を設定・オーバーレイする。