Shopify Yahoo!広告のコンバージョンを計測するカスタムアプリ

こんにちは、ディレクターの田辺です。

本記事では、株式会社キューが開発したShopifyカスタムアプリ「Yahoo!広告コンバージョン連携」の使い方を説明します。

Yahoo!広告コンバージョン連携
https://github.com/qcoltd/shopify-yahoo-cv-sync/tree/v1.0.0

はじめに

Shopifyストアのチェックアウトのアップグレードに伴い、Yahoo!広告のコンバージョンタグを、チェックアウトの追加スクリプトを利用せずに動作させる代替手段が必要になります。

その代替手段の第一候補はWeb Pixelを利用することですが、2025年8月現在、Web Pixelでは、Yahoo!広告のコンバージョンタグが期待通り動作しません。

そこで、Yahoo!広告のAPIOfflineConversionServiceを利用し、ShopifyストアにおけるYahoo!広告のコンバージョンデータをCSVファイルにし、Yahoo!広告のアカウントにアップロードすることで、ほぼ従来通りのYahoo!広告のコンバージョンデータの計測を可能にするShopifyアプリ(カスタムアプリ)を開発しました。

本記事では、アプリを利用するための手順を説明します。

注意事項

• 突貫工事で開発したので、十分な検証が済んでいるとは言い難いです。ご利用は自己責任になりますので、ご注意ください。
• 最低限の機能だけを実装してありますので、「もっとこうしたい」「ここはこうならないか」などのご要望あれば、有料になりますが弊社もしくはご贔屓の開発パートナーにご相談ください。オープンソースとしましたので、弊社でなくともアプリのカスタマイズは可能です。
• 紹介するのはShopifyアプリと言っても、「カスタムアプリ」です。アプリを動作させるサーバーが必要になります。本記事に記載の手順を踏むとサーバー費が発生しますのでご注意ください。なお、本記事の手順通りに実行いただいた場合のサーバー費の月額は$10未満になるはずです。
• コンバージョンタグの設置は不要ですが、Yahoo!広告のサイトジェネラルタグは引き続き利用してください。本アプリは、サイトジェネラルタグが作成するCookieを利用してコンバージョンを作成します。
  
• 本資料は、インフラやプログラムの知識が全くない方でも、手順通りに進めればアプリを利用することができることを目指していますが、もし、開発パートナーがいらっしゃる場合は、協力してもらうことを強くお勧めいたします。
• 下記に紹介するハックルベリー社やRewire社が提供するアプリの方が安定稼動する可能性が高いです。ご予算に余裕がある方はそちらをご利用ください。
  ハックルベリー「Yahoo!広告 連携」
  Rewire「App Unity Tracking」
• 株式会社キューは、本記事に記載された情報によって発生したいかなる直接的、間接的、偶発的、特別、結果的、または懲罰的損害についても責任を負いません。

免責事項

1. 責任の制限: 本アプリの開発者、提供者、および関連するすべての当事者は、本アプリの使用または使用不能により生じるいかなる直接的、間接的、偶発的、特別、結果的、または懲罰的損害についても責任を負いません。
2. データの正確性: 本アプリは「現状のまま」提供され、データの正確性、完全性、または適時性について保証しません。
3. サービスの中断: 本アプリの利用可能性、機能性、またはパフォーマンスについて保証しません。サービスが中断される可能性があります。
4. 第三者のサービス: Yahoo!広告APIやその他の第三者サービスとの連携において、それらのサービスの利用可能性や機能性について保証しません。
5. 商業的利用: 本アプリの使用による商業的損失、データ損失、またはその他の損失について、開発者は一切の責任を負いません。

本アプリを使用することにより、利用者はこれらの免責事項に同意したものとみなされます。

準備

各種サービスのアカウント

下記のサービスのアカウントが必要になります。

1. Yahoo!広告の広告管理ツールのアカウント
   
2. Shopifyのパートナーアカウント
3. fly.ioのアカウント

Yahoo!広告の広告管理ツールのアカウント

本記事をご覧になっている方であれば、Yahoo!広告の広告管理ツールのアカウントはお持ちだと思いますので、説明は割愛いたしますが、詳細を知りたい方は下記のページをご参照ください。

https://ads-help.yahoo-net.jp/s/article/H000045071?language=ja

Shopifyのパートナーアカウント

もし、Shopifyのパートナーアカウントをお持ちでない場合は、下記のリンクから「サインアップ」を選んで、Shopifyのパートナーアカウントを作成してください。パートナーアカウントの所持は、カスタムアプリを利用するための必須条件です。

https://www.shopify.com/jp/partners

fly.ioのアカウント

カスタムアプリを動作させるサーバーとしてfly.ioを利用します。
Shopifyアプリのホスト先としてShopifyのアプリ開発のチュートリアルページでも紹介されているホスティングサービスです。

下記のリンクから「Get Started」をクリックしてアカウントを作成してください。

https://fly.io/

Sign up with emailを選択します。

下図のように、情報を入力し、Create My Accountをクリックします。

登録したメールアドレスに下図の内容のメールが届いていると思いますので、Verify Emailをクリックします。

クレジットカード情報を入力してください。
Githubアカウントとの連携 (Connect your GitHub account) は設定不要です。

Pay As You Go Planで問題ありませんので、Continueをクリックします。

クレジットカードの情報を設定したら、fly.ioのアカウントの準備は完了です。

環境設定

あなたのパソコンに幾つかのソフトウェアやツールのインストールが必要です。
本記事では、MacOSでの環境設定について説明いたします。

1. HomebrewとNode.jsのインストール
2. Shopify CLIのインストール
3. flyctlのインストール
4. アプリのソースコードのダウンロード

HomebrewとNode.jsのインストール

下記の記事を参考に、HomebrewとNode.jsのインストールを行ってください。
https://zenn.dev/nakohama/articles/911374261e8b33

Shopify CLIのインストール

下記のコマンドをターミナルで実行すればShopify CLIのインストールは完了です。

npm install -g @shopify/cli@latest

参考: https://shopify.dev/docs/api/shopify-cli#installation

flyctlのインストール

下記のコマンドをターミナルで実行すればflyctlのインストールは完了です。

brew install flyctl

参考: https://fly.io/docs/flyctl/install/#macos

アプリのソースコードのダウンロード

アプリのソースコードを下記のリンクからダウンロードしてください。

https://github.com/qcoltd/shopify-yahoo-cv-sync/archive/refs/tags/v1.0.0.zip

ダウンロード後、下記のコマンドを一行ずつ順にターミナルで実行してください。
このターミナルは、閉じずに、このまま開いておきます。

cd ~/Downloads
unzip shopify-yahoo-cv-sync-1.0.0.zip
mv shopify-yahoo-cv-sync-1.0.0 ~/
rm -rf shopify-yahoo-cv-sync-1.0.0.zip
cd ~/shopify-yahoo-cv-sync-1.0.0

カスタムアプリの作成とインストール

Shopifyカスタムアプリを作成する

下記をターミナルで1行ずつ実行してください。

npm install
shopify app config link

下記のメッセージがターミナルに表示されますので、キーボードのreturnを押します。

ブラウザに自動的に移動し、下図の画面が開きます。
Shopifyパートナーアカウントにログイン可能なアカウント情報を入力します。

下図の画面まで進んだら「確認してログイン」をクリックし、ターミナルに戻ります。

ターミナルに戻ると、下図のようなメッセージが表示されているはずです。
Partner Dashboardの方を選んでreturnします。
※パートナーダッシュボードの状況によってはこのメッセージは表示されません。このメッセージが表示されなかった場合は、次のステップにお進みください。

下図のメッセージが表示されたら、キーボードのyを押してください。

下図のメッセージが表示されたら、キーボードからYahoo CV Syncと入力して、returnを押してください。

これで、ターミナルがプロンプトモードから復帰します。
あなたのShopifyパートナーアカウントにYahoo CV Syncという名称のアプリが作成されたはずです。

Shopifyカスタムアプリをセットアップする

続いて、下記のコマンドをターミナルで実行します。

npm run setup-config

下図のようなメッセージが表示されるはずです。

> setup-config
> node setup-config.js

設定をセットアップ中...
テンプレート設定を適用しました（client_idとorganization_idは保持）
update-app-name.jsを実行中...
ランダム生成されたアプリ名: shopifyapp-XXXXXXXXXXXXXXXXXXX
使用するshopify.app.tomlファイル: shopify.app.toml
文字数: 35
fly.tomlとshopify.app.tomlを更新しました
新しいアプリURL: https://shopifyapp-e02cdfc655b292154b90ab6b.fly.dev
下記のURLをYahoo!広告のアプリケーションのリダイレクトURIに設定してください
https://shopifyapp-XXXXXXXXXXXXXXXXXXX.fly.dev/receive/code
設定のセットアップが完了しました

あなたのターミナルに表示されているhttps://shopifyapp-XXXXXXXXXXXXXXXXXXX.fly.dev/receive/codeは、この後の手順で必要になる情報です。必ずメモ帳などにコピーペーストし保存してください。

上記のURLを、保存し終えたら、次のコマンドを実行します。

shopify app deploy

下図のような画面が表示されるので、キーボードのyを押します。

これでShopifyカスタムアプリのセットアップは完了です。

カスタムアプリをfly.ioで稼働させる

fly.ioにログインする

ターミナルで、下記のコマンドを実行します。

fly auth login

下図のようにブラウザに移動し、ログイン画面が開きます。
fly.ioのアカウント情報でログインします。

ログインすると、下図の画面が開くのでContinue as あなたのメールアドレスをクリックします。

ターミナルに戻り下図のようなメッセージが表示されていれば成功です。

Waiting for session... Done
successfully logged in as {あなたが設定したメールアドレス}

fly.ioにカスタムアプリ用のサーバーを立てデプロイする

ターミナルで、下記のコマンドを実行します。

fly launch --remote-only

? Would you like to copy its configuration to the new app? (y/N)
というメッセージが表示されたら、キーボードのyを入力し、returnを押します。

? Do you want to tweak these settings before proceeding? (y/N)
というメッセージが表示されたら、キーボードのNを入力し、returnを押します。

? Do you agree? (y/N)
 というメッセージが表示されたら、キーボードのyを入力し、returnを押します。

最終的に下記のメッセージが表示されれば、fly.ioへのShopifyカスタムアプリのデプロイは完了です。

Visit your newly deployed app at https://shopifyapp-XXXXXXXXXXXXXXXX.fly.dev/

カスタムアプリをShopifyストアにインストールする

Shopifyのパートナーアカウントにアクセスし、アプリ管理にアクセスすると、下図のようにyahoo-cv-syncというアプリがあることを確認できるはずです。

yahoo-cv-sync をクリックすると下図の画面が開くので、「配布方法を選択」をクリックします。

「カスタム配布」を選んで、「選択」をクリックします。

モーダルが開き確認されるので、「カスタム配布を選択」をクリックします。

あなたがカスタムアプリをインストールしたストアのドメインを入力します。入力するのは、xxxxxxxxx.myshopify.comという形式のShopifyストアのドメインです。
入力後、「リンクを作成」をクリックします。

モーダルが開き確認されるので、「リンクを作成」をクリックします。

「コピー」をクリックし、インストールリンクのURLをコピーします。

あなたが、このカスタムアプリをインストールしたいと考えているShopifyストアの管理画面にログインしているブラウザで、上記でコピーしたURLにアクセスします。すると下記の画面が開くはずです。

「インストール」をクリックすれば、カスタムアプリのShopifyストアへのインストールは完了です。
インストールが完了すると下図の画面が開きます。

カスタムアプリにYahoo!広告の情報を設定する

Yahoo!広告のアプリケーション開発の申請をする

下記のリンクを参考に、アプリケーション開発の申請を行なってください。

https://ads-developers.yahoo.co.jp/ja/ads-api/startup-guide/apply-api-use.html

ビジネスIDのメールアドレス宛てに「【Yahoo!広告 API】登録完了のお知らせ」というメールを受け取ったら次の手順にお進みください。

Yahoo!広告の広告管理ツールからアプリケーションを登録する

Yahoo!広告のAPIを利用するために、アプリケーションの登録が必要です。
下記のリンクを参考に、アプリケーションの登録を行なってください。

https://ads-developers.yahoo.co.jp/ja/ads-api/startup-guide/app-registration.html

上記リンクにおける下記の手順において、

4. アプリケーション登録画面で、以下の各項目を入力します。入力は全項目必須です。
・アプリケーション名アプリケーションの名称を入力します。この項目はアプリケーション利用者にも表示されます。
・アプリケーションの説明アプリケーションの機能や特徴を入力します。この項目はアプリケーション利用者にも表示されます。
・リダイレクトURIYahoo!広告 APIを介した認証の完了後に、アプリケーション利用者に表示される認証完了ページなどにリダイレクトするURIを入力します。

リダイレクトURIには、「Shopifyカスタムアプリをセットアップする」という手順で保存した https://shopifyapp-XXXXXXXXXXXXXXXXXXX.fly.dev/receive/codeというURLを設定してください。

アプリケーション名とアプリケーションの説明は、何を入力しても大丈夫です。
迷う場合は、仮に、「Shopifyストアでのコンバージョン計測」と両方に入れておくと良いです。

Yahoo!広告でコンバージョン設定を行う

下記のリンクを参考にコンバージョンの設定を行ってください。

検索広告: https://ads-help.yahoo-net.jp/s/article/H000046005?language=ja
ディスプレイ広告: https://ads-help.yahoo-net.jp/s/article/H000047363?language=ja

検索広告とディスプレイ広告の両方を実施されている方は、両方それぞれにコンバージョン設定が必要です。

Yahoo!広告のアプリケーションの情報をShopifyカスタムアプリに設定する

Shopifyカスタムアプリのアプリケーション設定にアクセスします。

下図のYahoo!広告のアプリケーションのクライアントIDを、Shopifyアプリ管理画面のclientIdに設定し、クライアントシークレットを、clientSecretに設定し「Save」します。

下図のようにShopifyカスタムアプリの管理画面にリンクが表示されるので、そのリンクをクリックします。

これで、アプリケーション設定は完了です。

Yahoo!広告のアカウントの情報をShopifyカスタムアプリに設定する

Shopifyカスタムアプリの広告アカウント設定にアクセスします。

まずは、検索広告を下記のよう設定してください。

ディスプレイ広告についても同様に設定いただき、Shopifyカスタムアプリの管理画面の下側に表示されている「Save」をクリックします。

以上で、全ての設定は完了です。

うまくコンバージョンを計測できていれば、毎時00分、20分、40分の3回、CSVがYahoo!広告にアップロードされます。

まとめ

販売物として開発したアプリではなく、私たちが管理するストア様のためだけに用意したカスタムアプリであるため、販売されているShopifyアプリと比較するとかなり導入には手間がかかるかと思います。

その代わり、発生するコストはfly.ioのサーバー費用のみ(おそらく$10未満になるはず)です。

また、アクセス数がそれほど多くないストアであれば、fly.tomlを編集して、1024MBのマシンから512MBのマシンに変更すれば、もしかしたら、fly.ioの利用料が$5以下になるかもしれません。fly.ioは、$5以下の請求が免除されるので、まさに無料利用が可能になります。

さらに、Grafana Cloudを利用することで、fly.ioの簡易的な死活監視も無料枠の範囲内で可能と思われます。

最後に、繰り返しになりますが、本アプリの利用は完全に自己責任になります。本アプリまたは本記事によって生じたいかなる直接的、間接的、偶発的、特別、結果的、または懲罰的損害についても、株式会社キューは責任を負いません。

したがって、本アプリのバグや不具合に対応する責任もまた、株式会社キューにはございません。

上記ご理解の上でご利用いただくことを前提に、本アプリの使い方についての不明点やご相談がありましたら、下記よりお問い合わせください。

https://web.q-co.jp/contact