Storefront APIで開くチェックアウト完了時に、外部アプリへ通知してWebViewを閉じたいという相談。checkout.liquid廃止後の代替として、Checkout UI ExtensionsよりもWeb Pixelの利用が簡単ではないか、という提案が出た。
主な整理点:
複数ストアでの適用範囲も整理された:
結論として、購入完了通知自体はWeb Pixelで可能。商品タグによる判定は追加実装が必要で、完全な標準機能だけでは未解決。
storefrontAPIを使用したECアプリを構築しようとしています。
チェックアウト時にはチェックアウトURLをアプリからWebviewで開いて購入を完了させようと想定していて、注文完了時にwevviewを閉じてアプリ側の画面に戻そうとしています。
当初は「checkout.liquid」にjavascriptを追加してjavascript bridgeでアプリ側に購入完了をメッセージで通知させようと考えていましたが、「checkout.liquid」が廃止となり、Checkout Extensibilityへの移行が必要ということを知りました。
そこで確認させていただきたいのですが、
・Checkout Extensibilityで、注文完了時にアプリ側に通知を送ることは可能でしょうか。
※アプリ側とShopify側でユーザ情報が異なるため、Webhookによる通知ではアプリを開いているユーザの特定が難しい。
※複数のサイトと接続するECアプリのため、サンクスページのURLの検知の場合、サイトごとの注文完了画面のURLが必要になるため望ましくないといった事情があります。
@store_K 様
Checkout UI extensionsでもできそうですが、
Web Pixelを利用された方が簡単かと思います。
チェックアウトの完了時 や、チェックアウトがスタートした時 など、様々なイベントが用意されています。
https://shopify.dev/docs/api/web-pixels-api/standard-events
ご参考まで。
(キュー田辺)
有難うございます。
Web Pixelで顧客のチェックアウト完了を検知できるのは試せました。
1点ご確認させていただきたいのですが、特定のタグを持つ商品の購入を検知することは可能でしょうか？
後出しの情報となってしまい申し訳ございませんが、ECアプリで販売する商材と、webブラウザから販売する商材を分ける想定がされており、「アプリでの購入の場合」にのみ外部アプリにメッセージを送信したいのですが、この場合でもWeb Pixelで判別することはできるのでしょうか。
重ねての質問申し訳ございません。
ご確認させていただきたいのですが、Shopify Plusで複数ストアを構築している場合、
Web Pixelは各ストアごとの設定になりますでしょうか。
それともストア間で共通になりますでしょうか。
@store_K 様
返信が遅くなりました。
1点ご確認させていただきたいのですが、特定のタグを持つ商品の購入を検知することは可能でしょうか？
それはできなさそうですね。
商品タグがあるとすると、下記のページを見る限り、data.checkout.lineItemsなのですが、そこにタグがありませんので、タグの取得は出来なさそうです。
Web Pixelは各ストアごとの設定になりますでしょうか。
それともストア間で共通になりますでしょうか。
各ストアに設定することになりますが、
ShopifyアプリのエクステンションとしてWebPixelを用意するなら、実質は一括管理となります。
(ソースコードを修正してデプロイすれば、アプリをインストールしている全てのストアに反映されます。)
強引ですが、WebPixelで商品タグを利用するのであれば、CookieかLocalStorageにどうにしかしてタグ情報を格納すれば良いかと思います。
WebPixelから親フレームのCookieを参照できますし、LocalStorageも参照できますので。
商品のカート投入時に、CookieかLocalStorageを更新するようにしておけば、うまくいくのではないかと思います。
これは、WebPixelからではなくストアフロント側のJSで処理すると良いかと。(そうすれば、商品タグを参照する方法がいくらでもありますので。)
ご参考まで。
(キュー田辺)
有難うございます、大分実装イメージができてきました。
WebPixelの設定を適用する範囲について、下記理解であっているかご確認させてください。
・アプリの方でWebPixelを用意する場合、アプリをインストールするストア全てに反映される。
・ストアの方でWebPixelを設定する場合、設定したストアだけに反映できる。
@store_K 様
WebPixelの設定を適用する範囲について、下記理解であっているかご確認させてください。
・アプリの方でWebPixelを用意する場合、アプリをインストールするストア全てに反映される。
・ストアの方でWebPixelを設定する場合、設定したストアだけに反映できる。
はい、ご理解通りです。
話が横道にそれますが、
ストアの方で設定するWeb PixelsはCustom Web Pixelsと言います。
これはiframeで動作します。
アプリから設定するWeb Pixelsはweb workersで動作します。
だからなんだというわけではありませんが、
微妙に実行環境が異なりますのでもしうまく動かないことがあれば、この違いも考慮されると良いです。
ご参考まで。
(キュー田辺)