matoix

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

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アップデート対応などを考慮すると、現時点では公開するか未定です。

設定の流れ

全体の流れを説明します。

  1. yclidをカート属性とCookieに保存する
  2. Shopify Flowでスプレッドシートへ出力する
  3. Google Apps ScriptでCSVを生成する
  4. 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ください!