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