Developer Changelog / アプリ開発者向け

Shopify Analytics が
「アプリが乗れるフルスタック解析基盤」になった

チャートライブラリ・データウェアハウス・通貨/ロケール処理・管理画面に似せた UI。マーチャント向け分析のために毎回自前で立てていたスタックを、Shopify 側に丸ごと預けられるようになる。データを置く場所は、マーチャントが既に意思決定している場所(Shopify 管理画面)。

このページの構成
  1. 30秒で理解 : 何が変わったのか
  2. 全体像図解 : 4 レイヤーがどう繋がるか
  3. ① データを入れる : Metafields / App Events
  4. ② クエリする : ShopifyQL API + スキーマドキュメント
  5. ③ 埋め込む : Analytics Web Components
  6. ④ 文脈を足す : Annotations API / Metric Targets API
  7. 従来の自前スタック vs 今回の構成
  8. 技術者が押さえるべき5つのポイント
  9. 業務に活かせる3つのユースケース
  10. 提案で使える1行サマリ

130秒で理解 : 何が変わったのか

これまで「マーチャント向けの分析画面」をアプリに載せるには、チャートライブラリ・マーチャントデータを同期するデータウェアハウス・通貨とロケールの処理・Shopify 管理画面に似せきれない UI を自前で立てる必要があった。
今回の一連のアップデートで、Shopify Analytics 自体が アプリが直接その上に構築できるフルスタック解析プラットフォーム になり、インフラを Shopify 側にオフロードできるようになる。

従来 : 自前でスタックを立てる

チャートライブラリを選定し、マーチャントデータを同期する DWH を用意し、通貨とロケールを自分で処理し、それでも管理画面とは見た目が揃わない UI を作る。

これから : Shopify Analytics に乗せる

アプリのデータを Shopify Analytics のスキーマに載せ、ShopifyQL で問い合わせ、管理画面と同じ Web Components で描画する。マーチャントが既に意思決定している場所にアプリのデータが並ぶ。

2全体像図解 : 4 レイヤーがどう繋がるか

① モデル化 Metafields App Events(早期アクセス) アプリのデータを 分析ディメンションに ② クエリ ShopifyQL API スキーマ参照ドキュメント バージョン管理された クエリレイヤー ③ 埋め込み metric card metrics bar / date picker 管理画面と同じ Web Components ④ エンリッチ Annotations API Metric Targets API 数字に文脈と 目標を重ねる すべて Shopify の中で完結 : マーチャントが既に意思決定している場所
1

Metafields でモデル化

(App Events は早期アクセス)

2

ShopifyQL API でクエリ

スキーマはドキュメント化済み

3

Web Components で埋め込み

要素 1 つでチャートが出る

4

Annotations / Targets で強化

注釈と目標を重ねる

3① データを入れる : Metafields / App Events

Metafields : 定義を「分析クエリ可能」にするだけ

メタフィールド定義を analytics-queryable(分析でクエリ可能) としてマークすると、それが ShopifyQL のディメンションとして、ストアデータと並んで使えるようになる。

注文に campaign_source

注文がどのキャンペーン経由かをメタフィールドで持たせ、売上をキャンペーン別に切る。

顧客に subscription_status

顧客のサブスク状態をメタフィールドで持たせ、状態別にグルーピング。

マーチャントはそれを使って グルーピング・フィルタ・チャート化 ができる。ETL 不要、別スキーマ不要(no ETL, no separate schema)。
FROM sales
  SHOW total_sales
  GROUP BY order.metafields.my_app.campaign_source
  TIMESERIES day
VISUALIZE total_sales

App Events : アプリが既に出しているイベントを分析に流し込む 早期アクセス

App Events in Analytics は、アプリが既に emit しているカスタムイベント を Shopify Analytics でクエリ可能にする機能。手順は 3 つ。

1. 宣言する

shopify.app.toml の新しいレジストリでイベントを宣言する。

2. 送る

App Events API 経由でイベントを emit する。

FROM

3. クエリされる

マーチャントは ShopifyQL で FROM app_events を、ストアデータと同じように問い合わせられる。

FROM app_events
  SHOW emails_sent
  GROUP BY app_name
  TIMESERIES day
VISUALIZE total_sales

※ 上記は元記事に掲載されているサンプルをそのまま転記したもの。

4② クエリする : ShopifyQL API + 開発者ドキュメント

Shopify の分析クエリレイヤーである ShopifyQL API が、プラットフォームの first-class な構成要素 になり、shopify.dev に スキーマレベルのリファレンスドキュメント が用意された。すべてのメトリクスとディメンションが、型・説明・動作するサンプル付きで定義されている。

開発者にとっての意味

安定していて、バージョン管理され、スキーマがドキュメント化された面に対して実装できる(stable, versioned, schema-documented surface)。

LLM / エージェントにとっての意味

スキーマが公開ドキュメントになっているので、AI ツールチェーンが動作する ShopifyQL を生成できる

5③ 埋め込む : Analytics Web Components

Shopify 管理画面の分析を描画しているのと 同じ Web Components が、サードパーティアプリからも埋め込めるようになった。

Sales
メトリックカード
<s-shopifyql-metric-card>
メトリクスバー
<s-metrics-bar>
日付ピッカー
<s-metrics-bar-date-picker>

要素 1 つでチャートが出る

<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>
手順 1

analytics-ui.js を読み込む

polaris.js より後に読み込むこと。順序が指定されている。

手順 2

Direct API access を有効化

コンポーネントがクエリを実行するために必要。

手順 3

要素を置く

あとはドロップインするだけ。

チャートライブラリ不要。通貨/ロケール処理不要。データ整形コード不要。
コンポーネントがクエリを実行し、チャートを描画し、Shopify 管理画面と同期した状態を保つ

6④ 文脈を足す : Annotations API / Metric Targets API

数字の上に文脈を重ねるための新 API が 2 つ。アプリからもマーチャントからも使える。

Annotations API

パートナーアプリが GraphQL Admin API 経由で、マーチャントのチャート上に直接注釈を作成 できる。

  • ロイヤリティアプリ : プログラム開始日をマーク
  • メールアプリ : 新規キャンペーンをマーク
  • サブスクアプリ : 価格改定をマーク

チャートパネルには アプリの帰属表示(app attribution) が適切にレンダリングされる。

必要スコープ

read_analytics_annotations / write_analytics_annotations

Metric Targets API

マーチャントが 任意のメトリクスに目標を設定 し、レポートやダッシュボードの中で進捗を視覚的に追える。

  • 例 : 次の四半期の総売上
  • 例 : 今週の広告アトリビューション売上

ターゲットは GraphQL Admin API の新しいコアプリミティブ。アプリからプログラム的に作成・読み取り・チャートへのオーバーレイができる。

7従来の自前スタック vs 今回の構成

やること従来(自前スタック)今回の Shopify Analytics
データの持ち方 自前 マーチャントデータを同期する DWH を用意 不要 Metafields を analytics-queryable に。ETL なし・別スキーマなし
アプリ独自イベント 自前 自分の基盤に貯めて自分で見せる App Events FROM app_events でマーチャントが直接クエリ(早期アクセス)
クエリ層 自前 自分で API を設計 ShopifyQL API 安定・バージョン管理・スキーマ文書化
チャート描画 自前 チャートライブラリ選定+実装 Web Components 要素 1 つ。ライブラリ不要
通貨・ロケール 自前 自分でハンドリング 不要 コンポーネント側が処理
UI の一貫性 近似 管理画面と完全には揃わない 同一 管理画面と同じコンポーネント/同期状態
数字への文脈付け 記載なし(自前実装の範囲) Annotations / Targets 注釈と目標を API で重ねる

8技術者が押さえるべき5つのポイント

1. メタフィールドが「分析ディメンション」に昇格する

定義を analytics-queryable にマークするだけで、ShopifyQL の GROUP BY 対象になる。アプリが持たせた属性を、マーチャントが自分で切って見られるのがこの機能の本質。ETL パイプラインを一本まるごと消せる可能性がある。

EARLY

2. App Events は早期アクセス = 本番前提にしない

元記事で early access と明記されている(サインアップ導線あり)。宣言は shopify.app.toml の新レジストリ、送信は App Events API。提案では「今すぐ確定で使える機能」と「申込が要る機能」を分けて出すこと

3. 読み込み順序と Direct API access が前提条件

Web Components は analytics-ui.js を polaris.js の後にロード し、Direct API access を有効化 してから要素を置く。ここは順序と設定の両方が要件として明記されているので、動かない時の一次切り分けポイントになる。

4. Annotations は「スコープ」と「帰属表示」がセット

必要スコープは read_analytics_annotations / write_analytics_annotationsアプリの帰属がチャートパネルに描画されるため、注釈はそのままアプリの露出面にもなる。スコープ追加は既存アプリでは再認可が絡む点に注意。

5. スキーマの公開は「LLM が ShopifyQL を書ける」ことを狙っている

元記事は狙いを 2 つに分けて書いている : 開発者向けには「安定・バージョン管理・スキーマ文書化された面に対して実装できる」LLM / エージェント向けには「公開スキーマドキュメントによって AI ツールチェーンが動作する ShopifyQL を生成できる」。分析クエリの生成をアプリ内 AI 機能に載せる設計が現実的な選択肢になる。
なお 各 API の利用可能な API バージョン・対象プラン・料金についての記載は元記事になし。実装前に shopify.dev の該当リファレンスで確認すること。

9業務に活かせる3つのユースケース

DWH ETL chart
USE CASE 1

自社アプリの分析画面を「解体」して保守コストを落とす

課題
マーチャント向けダッシュボードのために、チャートライブラリ・マーチャントデータ同期用の DWH・通貨/ロケール処理・管理画面に似せた UI を全部自前で抱えており、保守と改修が重い。
打ち手
アプリ独自の属性を分析クエリ可能なメタフィールドに寄せ、描画を <s-shopifyql-metric-card> / <s-metrics-bar> に置き換える。クエリは ShopifyQL API に統一。
効果
チャートライブラリ・通貨/ロケール処理・データ整形コードを廃止でき、UI が管理画面と一致する(同期も維持される)。
技術メモ
analytics-ui.js は polaris.js の後にロードし、Direct API access を有効化。移行はカード 1 枚単位で並走させられるので段階的に剥がせる。
キャンペーン開始
USE CASE 2

施策の「効いた瞬間」をマーチャントのチャートに刻む

課題
メール配信・ロイヤリティ・サブスクなどの施策を打っても、マーチャントが見ている売上チャートの上では「いつ何をしたか」が分からず、効果を説明しづらい。
打ち手
Annotations API(GraphQL Admin API)で、キャンペーン開始日・プログラム launch 日・価格改定日をチャートに注釈として書き込む。
効果
数字の変化と施策が同じ画面に並ぶ。注釈にはアプリの帰属表示が出るため、アプリの貢献がマーチャントの目に入る。
技術メモ
スコープ read_analytics_annotations / write_analytics_annotations が必要。既存アプリはスコープ追加=再認可フローが発生する前提で計画すること。
目標
USE CASE 3

アプリ独自 KPI に「目標」を持たせて運用ツール化する

課題
アプリが出す指標(配信数・広告アトリビューション売上・サブスク継続など)を出しているだけで、マーチャント側の目標管理サイクルに接続できていない。
打ち手
App Events(早期アクセス)でアプリのイベントを FROM app_events でクエリ可能にし、Metric Targets API で四半期売上や週次の広告経由売上に目標を設定・オーバーレイする。
効果
マーチャントがレポートとダッシュボードの中で進捗を視覚的に追える。アプリが「見るもの」から「目標を追うもの」に変わる。
技術メモ
ターゲットは GraphQL Admin API の新しいコアプリミティブなので、アプリ側から作成・読み取り・チャートへの重ね合わせが可能。App Events は早期アクセスのサインアップが必要。

10提案で使える1行サマリ

「マーチャント向け分析のために自前で立てていた DWH・チャートライブラリ・通貨/ロケール処理・似せた UI を、
Shopify Analytics 側にまるごとオフロードできるようになった。
メタフィールドでモデル化 → ShopifyQL API でクエリ → Web Components で埋め込み → Annotations / Targets で文脈付け
アプリのデータが、マーチャントが既に意思決定している画面の中に並ぶ。」

元記事の「Get started」に挙がっているリンク項目