Shopify Checkout Extensibility移行後のYahoo!広告コンバージョン計測を手動インポートで計測する方法

ShopifyサイトをCheckout Extensibilityへ移行した場合、これまでタグを設置していた「注文状況ページの追加スクリプト」は廃止され、利用できなくなります。代替手段とされるShopify PixelもYahoo!広告の仕様上、コンバージョン計測に使えません。 そこでコンバージョンを手動インポートする仕組みを作りました。
なぜYahoo!広告のコンバージョン計測方法を変える必要があるのか
ShopifyのCheckout Extensibilityの移行期限が迫ってきており、2025年8月28日までに移行が必要です。
一部アカウントはすでに自動アップグレードされたり、「注文状況ページの追加スクリプト」が空の場合、編集できなくなる場合があったり、実際の期限はもう少し早くなる可能性もあります。
Checkout Extensibility移行後は、Yahoo!広告のコンバージョンタグからでは計測できません。Shopify PixelではYahoo!広告のコンバージョンを計測できないためです。
公式サポートに確認すると、現時点での対応予定は無しとのことでした。したがって、外部アプリを使うか、自前で計測フローを作る必要があります。
ShopifyはShopify Plusに注力し、SMB中心からエンタープライズにも広げています。それなのにYahoo!広告の公式ではコンバージョン取得できないのはどうなんだろうとも思いますが、現状では仕方ありません。
2025/05/23現在、対応しているアプリはハックルベリー社のYahoo!広告 連携アプリのみです。
※既存広告アカウントを引き継げず、新規のアカウントを作る必要があります。
その他のアプリは対応予定の段階にとどまっています。
そこで、今回ご紹介する手動アップロード方式を作りました。
yclidを取得し、管理画面から手動でコンバージョンをアップロードする仕組みを採用しています。
Yahoo!検索広告、Yahoo!ディスプレイ広告ともにアップロードする場合でも1-2分で完了します。
将来的にYahoo!広告 API版も公開する可能性もありますが、APIアップデート対応などを考慮すると、現時点では公開するか未定です。
設定の流れ
全体の流れを説明します。
- yclidをカート属性とCookieに保存する
- Shopify Flowでスプレッドシートへ出力する
- Google Apps ScriptでCSVを生成する
- Yahoo!広告へアップロードする
※スプレッドシートへの書き出しについてはWebhookでも可能ですが、運営者に分かりやすく、ログ確認も容易なShopify Flowを採用しました。
事前準備
- コンバージョン作成
まず、広告アカウントにインポート用コンバージョンがなければ、作成します。- Yahoo!検索広告、Yahoo!ディスプレイ広告アカウントでコンバージョン種別「インポート」、コンバージョン名「import」のコンバージョンを新規作成
- 別名を使う場合はShopify Flowでの出力内容を調整してください。
- Shopify Flowインストール
Shopify Flow
設定方法
Step 1:yclidをカート属性とCookieに保存する
以下のコードをtheme.liquid
の</head>
タグの直前に追加
<script>
(function () {
const params = new URLSearchParams(location.search);
const yclidQS = params.get('yclid');
const COOKIE = '_yclid_ydn';
const maxAge = 7776e3;
if (yclidQS) {
document.cookie = `${COOKIE}=${yclidQS}; max-age=${maxAge}; path=/`;
}
const attrNeedsSave = !window?.Shopify?.cart
|| !Shopify.cart.attributes
|| !Shopify.cart.attributes.yclid;
const yclid = yclidQS || (document.cookie.match(`${COOKIE}=([^;]+)`)||[])[1];
if (!yclid || !attrNeedsSave) return;
fetch('/cart/update.js', {
method : 'POST',
headers: {'Content-Type':'application/json'},
body : JSON.stringify({ attributes: { yclid } })
});
})();
</script>
Step 2:Shopify Flowでスプレッドシートへ出力する
次にこのデータをShopify Flowでスプレッドシートへ出力します。
サンプルのワークフローをインポートしてください。
サンプルのワークフロー.flow
サンプルのスプレッドシートをコピーして、コピーしたURLをShopify Flowに設定してください。 インポート用のyclid、日時、コンバージョン値を出力しています。 YSAログ、YDAログにはログを出力しているので、何かしらチェックしたい場合に使ってください。
これで、データが自動的にスプレッドシートへ書き込まれます。 Yahoo!検索広告の場合、YSAのシートに入力され、Yahoo!ディスプレイ広告の場合、YDAのシートに入力されます。
それぞれのログのシートには、入力したログと、注文IDが取得されているので、何か確認が必要な時に使ってください。
Step 3:Google Apps ScriptでCSVを生成する
サンプルのスプレッドシートにGoogle Apps Scriptを追加済みなので、Apps Scriptを開いてください。dailyExportAndPurge
を実行してください。
承認ダイアログが表示されるので、指示に従って許可します。
参考記事:[GAS] 主に初回実行時「承認が必要です」ダイアログが出た場合の承認作業とアクセス権限の確認プロセス - Qiita
その後、Apps Scriptの画面でトリガー>新しいトリガーを作成します。>イベントのソースを選択「時間主導型」>時間ベースのトリガーのタイプを選択「日付ベースのタイマー」>時刻を起動したい時間にして、保存して、完了です。
毎日、設定した時間になると、yclidが含まれる注文がある場合、GoogleドライブのYahooOfflineCVにcsvファイルが出力され、元のデータはYSA、YDAのシートからは消えます。
Step4: Yahoo!広告へアップロードする
あとはこのデータをYahoo!広告の管理画面からインポートしてください。
これで設定は完了です。質問などありましたら、XでリプライかDMください!