カスタムストアフロントのトリガー
組み込みのストアフロントトリガーは、Shopifyが報告するイベントを網羅しています。カスタムストアフロントトリガーは、ストアフロントで発生するその他のすべての事象をカバーします。テーマから1行のJavaScriptでイベントを発行するだけで、それがShopify Flowで使用できるトリガーとなります。
最もわかりやすい例は、カートドロワーです。Shopify のカート表示イベントは /cart ページで発生しますが、最近のテーマのほとんどはそこへ遷移せず、代わりにドロワーをスライドさせて開きます。Shopify では何も報告されないため、どのアプリもそれを認識できません。ドロワーが開いたときに独自のイベントを発行することで、このギャップを埋めることができます。
店舗では他にも次のような用途に利用されています：
- ウィッシュリストへの追加や「**通知を受け取る」**のクリックですが、Shopifyではどちらも報告されません。
- 商品の詳細を示すために、サイズガイドや返品ポリシーが開かれた。
- ピッカーにおけるバリアントの変更であり、新しいページビューではありません（ストアフロントのトリガー を参照）。
- テーマやサードパーティ製アプリがすでに把握しているが、Shopifyでは把握していない情報。
仕組み
- アプリ内でトリガーを作成し、イベント名（例：
cart_drawer_opened）を指定します。他のストアフロントトリガーと同様に、このトリガーにも**「ストアフロント動作へのアクセス**」権限が必要であり、これは「権限」ページで一度付与すれば済みます。 - アプリに表示される1行のスニペットをコピーし、その処理が行われているテーマ内の場所に貼り付けてください。何をどこに貼り付ければよいかわからない場合は、AIを使ってトリガーコードを生成する を利用すると、平易な説明文を入力するだけで、テーマ用のスニペットを生成してくれます。
- 送信内容をフィルタリングしたり形式を変更したりしたい場合は、変換式を記述してください。すべてを転送したい場合は、空のままにしておいてください。
- 電源を入れ、フローに「**カスタムストアフロントトリガー」**を追加し、イベント名に基づいて分岐を設定します。
このスニペットが、テーマ側での統合のすべてです：
Shopify.analytics.publish("cart_drawer_opened", {
// anything you want the Flow to receive
itemCount: 3,
total: "129.90"
});イベントの名称
イベント名は、Flowワークフローが分岐する基準となるため、わかりやすい名前を付け、ワークフローで一度使用し始めたら、その後は変更しないようにしてください。
名前には、英字、数字、アンダースコア、ハイフンを含めることができます。また、英字または数字で始まり、最大64文字まで入力可能です。アプリでは入力した文字列が「スラグ化」されるため、例えば「Cart drawer opened」は「cart_drawer_opened」となります。
この名前には内部的に名前空間が割り当てられているため、Shopifyのイベントや、同じ名前のWebhookカスタムトリガーと名前が重複することはありません。
フィルタリングと形状変更
2番目の引数として渡したデータは、Flowではトリガーの「output」として受け取られます。これだけで十分な場合は、これで完了です。
特定のケースでのみイベントを発火させたい場合や、テーマが公開した内容とは異なるフィールドを送信したい場合は、トランスフォームを作成してください。これは、カスタムトリガー で使用されているのと同じ JavaScript モジュールです。イベントを発火させたい場合はオブジェクトを返し、スキップしたい場合は null を返してください：
export async function transform(payload, topic, shop, ctx) {
// Anything you published is on `payload`.
if ((payload.itemCount || 0) < 2) return null;
return {
itemCount: payload.itemCount,
total: payload.total,
// Present only when the shopper is signed in.
customerId: payload.customerId,
};
}Shopify Flow での使用
すべての「カスタムストアフロントトリガー」は、Flow では「カスタムストアフロントトリガー」という同じトリガーとして表示されます。これをワークフローに追加し、eventName が選択した名前と一致するという条件を追加してください。
これにより、1つのFlowトリガーでストアフロントのイベントをすべてトリガーできるようになります。また、このトリガーには、アプリ内で指定した名前と、トランスフォームの出力値も含まれます。
これは、Webhookベースの「カスタムトリガー」を支える「Custom Trigger」とは意図的に区別されています。この2つには、知っておくべき重要な違いがあります。Webhookカスタムトリガーは当社のサーバー上で実行されるため信頼性が高いのに対し、ストアフロントイベントは、購入者のブラウザからのリクエストが当社に届くかどうか、および購入者のアナリティクス利用同意の有無に依存します。
送ってはいけないもの
publish の 2 番目の引数は完全にあなたの管理下にあるため、個人データをその引数に含めないようにするのはあなたの責任となります。
識別子と事実情報を送信してください：商品ID、バリエーションID、数量、価格、発生した事象の名称などです。ログイン済みの顧客IDがある場合は自動的に追加されるため、ご自身でそれを渡す必要は一切ありません。
氏名、メールアドレス、電話番号、住所は送信しないでください。Flow内の顧客IDから、ワークフローでこれらの情報を照会することができるため、ストアフロントイベントにこれらの情報を含めても何のメリットもありません。また、そうすることで、分析イベントが個人データを含むイベントになってしまいます。
私のプランのデータ通信量から差し引かれますか？▾
はい。私たちに届くすべてのイベントがカウントされます。これには、トランスフォームがnullを返してスキップしたイベントも含まれます。これはカスタムトリガーと同じルールです。同意が得られていないためにブラウザで破棄されたイベントは、私たちには届かず、カウントされることもありません。
スニペットの配置場所を自分で決めるため、表示量を直接制御できます。引き出しの開閉イベントは、商品ページの閲覧に比べて発生頻度がはるかに低いです。
同じイベントを複数の場所から公開することはできますか？▾
はい。重要なのは名前であり、どこから公開されたかではありません。ワークフローでそれらを区別したい場合は、ペイロードに送信元を示す情報を含めておくのが良いでしょう。
引き出しを2つ開けることは、1回のイベントとしてカウントされますか？▾
いいえ。意図的なイベントは区別されています。というのも、2回公開されたということは、通常、実際に2回発生したことを意味するからです。これは、同じページビューの繰り返しを統合する組み込みのトリガーとは異なります。
イベント名は後で変更できますか？▾
可能です。ただし、Flowのワークフローではその名前でフィルタリングが行われるため、名前を変更すると、条件を更新するまでそのワークフローの実行が停止してしまいます。また、テーマ内のスニペットもそれに合わせて更新する必要があります。ワークフローで一度使用した名前は、固定されたものとして扱ってください。
ストアで公開する前に、どのようにテストすればよいですか？▾
アプリのトリガーページには、変換を実行してFlowワークフローを起動するテストが用意されているため、テーマに手を加えることなく、エンドツーエンドの実行状況を確認できます。このテストでは、割り当て枠は消費されません。
スニペットをテーマに追加すると、「イベント履歴」ページには、実際のイベントが到着した順に表示されます。
チェックアウトページでも機能しますか？▾
独自のテーマコードから公開すると、ストアフロント全体が対象となります。チェックアウト画面は Shopify によってレンダリングされるため、そこにテーマコードを追加することはできません。その場合は、代わりに組み込みの「チェックアウトエラー表示」および「チェックアウト割引コード拒否」トリガーを使用してください。
今後の手順
- ストアフロントのトリガー - 組み込みのストアフロントトリガーと、ピクセルの仕組み。
- AIを使ってトリガーコードを生成する - テーマのスニペットや変換処理をAIに作成してもらう。
- カスタムトリガー - 「Shopify」のWebhookイベントについても同様の考え方ですが、サーバーサイドでの信頼性が確保されています。
- プランと利用方法 - 何が「イベント」に該当するのか。