トリガーのチュートリアルストアフロントのトリガー、手順を追って解説

ストアフロントのトリガー、手順を追って解説

ページをコピーする

商品ページの閲覧、カート操作、チェックアウトの開始、検索、在庫切れページの閲覧に対して、Shopify Flowのトリガーを設定する方法について、ステップバイステップの例を交えてご紹介します。

これらのトリガーは、管理画面での変更ではなく、お客様がオンラインストアで行う行動に基づいて発生します。アプリは、最初のトリガーが有効になった際に自動的にインストールされるウェブピクセルを使用して、これらの情報を収集します。

まずは『ストアフロントのトリガー』をお読みください。この資料では、同意やデータ量、ピクセルが送信する情報と送信しない情報について解説しています。すべてのイベントがプランのデータ使用量にカウントされます。また、繁盛しているストアでは、1日の商品閲覧数が1年間の注文更新数よりも多くなる場合があります。

このページの内容:ストアフロントで商品が閲覧されました, ストアフロントでコレクションが閲覧されました, ストアフロントで商品がカートに追加されました, ストアフロントで商品がカートから削除されました, ストアフロントでカートが閲覧されました, ストアフロントでチェックアウトが開始されました, ストアフロントで検索が行われました, ストアフロントでの検索で結果が返されませんでした, 在庫切れのバリエーションが閲覧されました, ログイン済みの顧客がアクセスしました, B2Bバイヤーが、にアクセスしました。カスタムストアフロントトリガー

Shopify Flow
場所:「Shopify Flow」で「トリガーの選択」を選び、「Workflow Trigger Extensions」を開き、「ストアフロント」と検索してください。

ストアフロントで閲覧された商品

買い物客が商品ページを開いた際に発火します。参照としてその商品と、表示されていたバリエーション、SKU、価格を保持します。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス + 商品、バリエーション、コレクションのデータへのアクセス
電源が入りました これを利用するShopify Flowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • 商品への関心を把握し、購買や商品陳列の指針とします。
  • Shopifyとの連携機能がないレコメンデーションツールや分析ツールに、フィードの閲覧データを連携させます。

「ストアフロント Product Viewed」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
product 製品(Shopify) 閲覧された商品です。Shopifyのフル機能版であるため、そのすべてのフィールドおよびShopify Flow独自の商品アクションが利用可能です。
viewedVariant 目的 掲載されているバリエーション、そのSKUおよび価格
viewedVariant.variantId ID
viewedVariant.variantTitle 本文
viewedVariant.sku 本文
viewedVariant.price 金額(金額、通貨コード)
viewedVariant.vendor 本文
viewedVariant.productType 本文
viewedVariant.productUrl 本文
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的にどのような内容が送信されたかを確認できます。

例:商品のメタフィールドにおける閲覧回数の集計

  1. トリガーとして「**ストアフロントで閲覧された商品」**を選択してください。
  2. productのリファレンスから、製品メタフィールド「custom.view_count」の現在の値を読み取り、その値に1を加えた値を返す「コードを実行」を追加してください。
  3. 返された数値を「**製品メタフィールドの更新」**に追加してください。
  4. ワークフローを有効にしてください。

ストアフロントコレクションの閲覧状況

買い物客がコレクションページを開いた際に発火します。コレクションのIDとタイトルが渡されます。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロント画像
許可 ストアフロントの動作へのアクセス
電源が入りました これを利用するShopify Flowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • どのキャンペーンコレクションにアクセスが集まっているかを確認しましょう。
  • コレクションのビューを外部の分析エンドポイントに転送します。

「ストアフロントコレクション Viewed」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
collection 目的 閲覧されたコレクション
collection.id ID
collection.title 本文
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:キャンペーンコレクションのフォワードビュー

  1. 「Pick **ストアフロント コレクション ビュー」**をトリガーとして設定します。
  2. 条件を追加します:collection.title が Summer Sale と等しいこと。
  3. アナリティクスエンドポイントへのHTTPリクエストの送信を追加してください。
  4. ワークフローを有効にしてください。

ストアフロントの商品がカートに追加されました

買い物客が商品をカートに追加した際に発火します。商品、バリエーション、数量、および行合計が渡されます。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス + 商品、バリエーション、コレクションのデータへのアクセス
電源が入りました これを使用するShopify Flowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • 通常よりも大量の注文が早期に確認された場合は、例えば、一般消費者向けストアでのB2Bバイヤーなど、早めにご注意ください。
  • テスト対象の商品の「カートに追加」をトラッキングします。

「ストアフロント Product Added to Cart」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
product 製品(Shopify) 追加された商品です。Shopifyのフル機能版であるため、そのすべてのフィールドおよびShopify Flow独自の商品アクションが利用可能です。
cartLineEvent 目的 バリエーション、数量、および行合計
cartLineEvent.variantId ID
cartLineEvent.variantTitle 本文
cartLineEvent.sku 本文
cartLineEvent.quantity 番号
cartLineEvent.lineTotal 金額(金額、通貨コード)
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:営業部門に大量注文について通知する

  1. トリガーとして「**ストアフロントの商品がカートに追加された」**を選択してください。
  2. 条件を追加します:cartLineEvent.quantityが20より大きいこと。
  3. 「**社内メールを送信」**を追加:{{cartLineEvent.quantity}} x {{product.title}} / {{cartLineEvent.variantTitle}} was added to a cart。
  4. ワークフローを有効にしてください。

ストアフロントの商品がカートから削除されました

買い物客がカートから商品を取り出したときに発火します。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス + 商品、バリエーション、コレクションのデータへのアクセス
電源が入りました これを使用するShopify Flowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • 異常に頻繁に追加されたり削除されたりする商品を探してください。価格、配送、またはバリエーションに関する問題がある可能性があります。

ストアフロントの「商品をカートから削除」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
product 製品(Shopify) 削除された製品です。Shopifyのフル機能版であるため、すべてのフィールドおよびShopify Flow独自の製品アクションが利用可能です。
cartLineEvent 目的 バリエーション、数量、および行合計
cartLineEvent.variantId ID
cartLineEvent.variantTitle 本文
cartLineEvent.sku 本文
cartLineEvent.quantity 番号
cartLineEvent.lineTotal 金額(金額、通貨コード)
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:被試験製品のログ削除

  1. トリガーとして「**ストアフロントの商品がカートから削除された」**を選択してください。
  2. 条件を追加:product.tagsにはwatchが含まれます。
  3. {{product.title}} および {{cartLineEvent.sku}} を使用して、シートまたはアナリティクスのエンドポイントに HTTP リクエストを送信する機能を追加します。
  4. ワークフローを有効にしてください。

ストアフロントのカートが表示されました

買い物客がカートページ(/cart)を開いたときに発火します。カートID、商品数、合計金額が渡されます。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス
電源が入りました これを使用するFlowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • 高額なカートにご注意ください。

「ストアフロント Cart Viewed」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身は
cartSnapshot 目的 閲覧時のカート内の商品
cartSnapshot.cartId ID
cartSnapshot.totalQuantity 番号
cartSnapshot.total 金額(金額、通貨コード)
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:1,000を超えるカート数に関するアラート

  1. トリガーとして「**ストアフロントのカート閲覧」**を選択してください。
  2. 金額はテキストとして渡されるため、big: Number(input.cartSnapshot.total.amount) > 1000を返す「**コードを実行」**を追加してください。
  3. bigに条件を追加し、その後、社内メールを送信します。
  4. ワークフローを有効にしてください。

ストアフロントでのチェックアウトが開始されました

買い物客がチェックアウト画面に入ったときに発火します。これは、チェックアウトを中断したときではなく、開始した時点でのことです。

~からの火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス
電源が入りました これを使用するShopify Flowワークフローを有効にすると、この機能がオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • 注文を基準に、チェックアウトの計測が開始されます。
  • 非常に高額なチェックアウトが行われている際は、その様子にご注目ください。

ストアフロントチェックアウト Started がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
checkoutSnapshot 目的 チェックアウトトークン、行数、合計額
checkoutSnapshot.checkoutToken 本文
checkoutSnapshot.lineItemCount 番号
checkoutSnapshot.total 金額(金額、通貨コード)
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:高額なチェックアウトに関するアラート

  1. トリガーとして「Pick ストアフロント チェックアウト Started」を選択してください。
  2. 条件を追加します:checkoutSnapshot.lineItemCountが15より大きいこと。
  3. 「{{checkoutSnapshot.total.amount}} {{checkoutSnapshot.total.currencyCode}}」を使用して社内メールを送信する機能を追加します。
  4. ワークフローを有効にしてください。

ストアフロント検索

ストアフロント検索で少なくとも1件の結果が返された場合に発火します。このイベントには、検索語、結果の数、最大10件の一致結果、および最初の一致結果を商品参照として含みます。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス権限および商品、バリエーション、コレクションのデータへのアクセス権限
電源が入りました これを使用するShopify Flowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • 買い物客が何を検索し、最初に何が表示されるのかを確認しましょう。
  • 重要なキーワードが正しい商品にリンクされているか確認してください。
Shopify Flowにおける変動要因 種類 その中身
product 製品(Shopify) 検索の結果として最初に表示された製品は、分岐処理の起点として利用できる完全な製品です。これは完全なShopify製品であるため、そのすべてのフィールドおよびShopify Flow独自の製品アクションを利用できます。
storefrontSearch 目的 検索語、検索結果の数、および最初の検索結果を含む最大10件の検索結果
storefrontSearch.query 本文 買い物客が入力した検索語です。
storefrontSearch.resultCount 番号 検索の結果、いくつの商品バリエーションが表示されましたか。
storefrontSearch.results オブジェクトの一覧 検索結果は、新しい順に表示され、ペイロードを抑えるため10件までと制限されています。
storefrontSearch.results (each).productId ID
storefrontSearch.results (each).title 本文
storefrontSearch.results (each).vendor 本文
storefrontSearch.results (each).url 本文
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:主要な検索キーワードで何が最初に表示されるかを確認してください

  1. トリガーとして「**ストアフロント Search」**を選択してください。
  2. 条件を追加:storefrontSearch.queryにはgift cardが含まれます。
  3. 2つ目の条件を追加します:「product.title」に「Gift Card」が含まれていない場合、内部メールを送信します:「{{storefrontSearch.query}}」の最初の一致は「{{product.title}}」でした。
  4. ワークフローを有効にしてください。

ストアフロントの検索で結果が見つかりませんでした

ストアフロント検索で何も見つからなかった場合に表示されます。これは、買い物客が貴店で販売されていると期待していた商品の一覧、または検索機能が認識できない単語の一覧です。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス
電源が入りました これを使用するShopify Flowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • 欠落している製品と同義語を収集してください。
  • テーマやアプリの変更後に検索機能の不具合がないか確認しましょう。急激な増加が見られる場合は、その兆候です。

「ストアフロント Search」で検索結果が0件だった場合に、ワークフローに送信される内容

Shopify Flowにおける変数 種類 その中身
searchQuery 目的 検索語とその検索結果の数
searchQuery.query 本文
searchQuery.resultCount 番号
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:検索結果が出なかった検索をシートに集約する

  1. トリガーとして「**ストアフロント検索で結果が0件だった」**を選択してください。
  2. {{searchQuery.query}} を使用して、Google スプレッドシートまたは Airtable の Webhook に「**HTTP リクエストの送信」**機能を追加します。
  3. 毎週このシートを確認してください。Shopifyの「Search & Discovery」アプリに同義語やリダイレクトを追加したり、ユーザーからの要望に応じて情報を充実させたりしてください。
  4. ワークフローを有効にしてください。

在庫切れのバリエーションが閲覧されました

購入者が、表示されているバリエーションがすべてのロケーションで売り切れとなっている商品ページにアクセスした際に発火します。これは需要のシグナルであり、販売できない商品を誰かが求めていたことを示しています。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス権 + 在庫データへのアクセス権 + 商品、バリエーション、コレクションのデータへのアクセス権
電源が入りました これを使用するFlowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • 実際の需要に基づいて、再入荷の優先順位を決定してください。
  • 再入荷キャンペーン用に商品にタグを付けてください。

「閲覧された在庫切れのバリエーション」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
product 製品(Shopify) 在庫切れのバリエーションが属する商品です。完全なShopify商品であるため、そのすべてのフィールドおよびShopify Flow独自のアクションが利用可能です。
outOfStockVariant 目的 そのバリエーションと在庫数
outOfStockVariant.variantId ID
outOfStockVariant.variantTitle 本文
outOfStockVariant.sku 本文
outOfStockVariant.availableQuantity 番号
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:購入済みですが、依然として閲覧されている商品にタグを付ける

  1. 「在庫切れのバリエーションを選択」をトリガーとして設定します。
  2. restock-demand を使用して、商品タグを追加してください。
  3. 「購買部門に**社内メールを送信」**を追加してください:{{product.title}} / {{outOfStockVariant.variantTitle}} ({{outOfStockVariant.sku}}) was viewed while sold out。
  4. ワークフローを有効にしてください。

ログイン済みのお客様がご来店されました

ログイン済みのお客様が貴店のストアフロントにアクセスした際にトリガーされます。ページビューの繰り返しは、お客様1人につき1回の訪問として集計されます。集計期間については、すべての訪問から月1回まで、ご指定の範囲内で設定可能です。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス + お客様データへのアクセス
電源が入りました これを使用するShopify Flowワークフローを有効にすると、この機能がオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • アカウントマネージャーに、主要なお客様が戻ってきたことをお伝えください。
  • 長い間離れていたお客様に対して、再エンゲージメントの取り組みを開始します。

「ログイン済みお客様のアクセス履歴」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
customer お客様(Shopify) ログイン済みのお客様で、分岐処理に必要な完全なレコードが保持されています。「Shopify」の完全なお客様であるため、すべてのフィールドおよびShopify Flow独自のアクションが利用可能です。
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:VIPがサイトを閲覧していることをアカウントマネージャーにお伝えください

  1. アプリ内で、「**ログイン済みお客様の来店」**の横にある設定アイコンを開き、来店頻度(例:1日1回など)を選択してください。
  2. 「Shopify Flow」でアクセスしたログイン済みのお客様を選択してください。
  3. 条件を追加:customer.tagsにはvipが含まれます。
  4. 「{{customer.displayName}}」を使用して社内メールを送信する機能を追加します。
  5. ワークフローを有効にしてください。

B2Bのバイヤーがご来社されました

ログイン済みのB2Bバイヤーが貴社のストアフロントにアクセスした際に、そのバイヤーが所属する会社名および購入先のロケーションとともに通知が表示されます。選択した期間内における訪問数は、会社ごとに集計されます。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 会社および会社のロケーションデータへのアクセス(B2B)+ ストアフロントでの行動データへのアクセス
電源が入りました これを使用するShopify Flowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • その会社のバイヤーが活動している際には、営業担当者に通知してください。
  • 卸売顧客が再購入する頻度を測定してください。

「B2B Buyer Visited」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
purchasingCompany 目的 購入者が購入する会社およびロケーション
purchasingCompany.companyId ID
purchasingCompany.companyName 本文
purchasingCompany.companyLocationId ID
purchasingCompany.companyLocationName 本文
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:会社の購買担当者が活動している場合に、担当営業に通知する

  1. アプリ内の「**B2Bバイヤーが訪問」**の横にある設定アイコンから、訪問期間を設定してください。
  2. 「Shopify Flow」でアクセスしたB2Bバイヤーを選択してください。
  3. 「**社内メールを送信」**を追加:A buyer of {{purchasingCompany.companyName}} ({{purchasingCompany.companyLocationName}}) is on the store。
  4. ワークフローを有効にしてください。

カスタムストアフロントトリガー

テーマが、ユーザーが定義したイベント(カートのドロワーが開いた、サイズガイドが利用された、クイズが完了したなど)を配信すると、トリガーが発火します。アプリ内でトリガーを作成し、イベント名を指定した後、テーマ側からその名前を1行のJavaScriptで配信します。

~による火災 買い物客のブラウザ上に表示される、アプリのストアフロントのピクセル
許可 ストアフロントの動作へのアクセス
電源が入りました これを使用するShopify Flowワークフローを有効にすると、それがオンになります。この機能専用のスイッチは、アプリの「**トリガー」**ページにあります。

次のような用途にご利用ください

  • Shopifyが報告しないものすべて:ドロワー、モーダル、バリエーション切り替え、コンフィギュレーター。
  • ご自身のデータを渡して、Shopify Flowで活用してください。

「カスタムストアフロントトリガー」がワークフローに送信する内容

Shopify Flowにおける変数 種類 その中身
eventName 本文 公開したイベント名(例:cart_drawer_opened)です。これを条件としてフィルタリングすることで、そのうちの1つだけを実行するように設定できます。
triggerName 本文 このストアフロント・トリガーに付けた名前です。
output 目的 変換コードの実行後、イベントとともに公開されたデータです。
output.fields オブジェクトの一覧 各キーを、定義された順に並べています。
output.fields (each).key 本文 変換関数によって出力または返されたそのままのキー(例:「itemCount」)。
output.fields (each).value 本文 その値を文字列に変換したものです。オブジェクトや配列は、JSONテキストとして渡されます。
output.json 本文 ペイロード全体をJSON形式で提供します。これは、ペイロードを一括で解析したいとお考えのマーチャント様向けです。
eventId 本文 このイベントのIDです。アプリの「イベント履歴」でこれを検索すると、具体的に何が送信されたかを確認できます。

例:完成品のクイズへの反応

  1. アプリで「**トリガー」**を開き、「カスタムストアフロントトリガー」を作成して、イベント名に「quiz_completed」と指定してください。表示されるスニペットをコピーしてください。
  2. テーマ内で、クイズが終了した際にスニペットを呼び出し、結果を渡してください。例えば、{ result: "dry-skin" } のようにします。
  3. Shopify Flowで「**カスタムストアフロントトリガー」**を選択し、条件として「eventName」が「quiz_completed」と等しい、を追加してください。
  4. 「output.fields」からデータを読み込む(キーと値のペア)か、または「output.json」を「**コードの実行」**ステップで解析してください。
  5. ワークフローを有効にしてください。

今後の手順

これらすべてに「**ストアフロント Behaviour Access」**が必要です。商品を扱うものには「Product Data Access」も必要であり、「Signed-In お客様 Visited」には「Customer Data Access」も必要で、「B2B Buyer Visited」には「会社 Access」も必要です。