最初に結論
チェックアウトページ（＝決済完了時の画面）で以下の箇所にスクリプト記載すれば実行できます🙆♂️
or
ShopifyのAPIを叩いて対象となるスクリプトをPOSTすればOK
ストア管理からログイン → ⚙アプリと販売チャネルの設定 → チェックアウトとアカウント → 注文状況ページ
or
という感じです。
チェックアウトページにスクリプトを埋め込む理由
例えば、何の商品を購入したか？いくらの商品を購入したか？といったことを、取得できるからです。または、なにかのPRをしてそのコンバージョンがされたか？といった仕組みを作れるからです。
やりかたとしては、
JavaScriptで商品のDOM情報を取得してきて、
iframe タグと一緒にその情報を src や data 属性として埋めこみ、 自前のサーバーに通信することで情報を取得します。例えばDOMは、以下のチェックアウトページのHTMLのように商品情報があるので、JavaScriptを駆使して取得できそうです。
そしてサードパーティクッキーと同じ仕組みを使って、別オリジンに情報を送付します。
サードパーティについては、どこかでまとめたい🥺サードパーティクッキーは昨今のプライバシーに関する問題で、ブラウザ毎で対応方針が変わったりするので注意が必要なようです。
埋め込むスクリプトとしては、こんな感じで購入された商品IDを別オリジンに送付します。
商品ID以外にも送信したい場合は、同じ用にJavaScriptを利用して
src 属性に組み込めばOKと思います。 <iframe id="hoge" src="" style="display: none;" ></iframe> <script> function getProductIds() { const products = document.getElementsByClassName('product'); const productIds = []; Array.prototype.forEach.call(products, (product) => { return productIds.push(product.dataset.productId); }); const joinedProductIds = productIds.join(','); const tag = document.getElementById('hoge'); tag.setAttribute('src', `https://hogehoge.com/checkout?products=${joinedProductIds}`); } window.addEventListener('load', getProductIds); </script>
公式のドキュメント。
img で実装しているようですが、やっていることは同じですね。
もしくは、ShopifyのAPIを叩いてスクリプトを埋め込むことが可能のようです。
あらかじめスクリプトを記載したJavaScriptファイルを準備しておいて、それをPOSTして登録します。
チェックアウトページにのみで発火させたい場合は、
display_scope を order_status とすれば発火しました。
