カスタムピクセルをテストする

このページはJul 26, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/promoting-marketing/pixels/custom-pixels/testingをご覧ください。

カスタムピクセルを作成した後、カスタムピクセルをテストして、サイトでイベントが発生した際にピクセルがデータを正しく送信していることを確認する必要があります。

Shopify Pixel Helperを使用すると、ピクセルイベントが読み込まれ、Shopifyイベントに正しく登録されたかどうかをテストできます。Shopify Pixel Helperを使用すると、オンラインストアでカスタムピクセルをテストして、リアルタイムで受信されているイベントと、それらのイベントのデータを表示できます。

カスタムピクセルが、独自のピクセルヘルパーツールを持つ外部サービスのプラットフォームと統合されている場合は、Shopify Pixel Helperに加えて外部サービスのピクセルヘルパーを使用することにより、ピクセルイベントが外部サービスのプラットフォームによって処理され、受信されるかどうかをテストできます。たとえば、あなたのストアにカスタムTikTokピクセルを追加した場合、Shopify Pixel HelperとTikTokピクセルヘルパーの両方を使用してピクセルをテストすることができます。

外部サービスのピクセルヘルパーと同じブラウザセッションでShopify Pixel Helperを使用すると、両方のプラットフォームのイベントを同時にテストできます。

以下は、すべての標準イベントをサンドボックス内で実施し、イベントデータのログをコンソールに記録するための、カスタムピクセルスクリプトです。標準イベントは、Shopify Pixel Helperに表示されます。また、その他の一括サブスクリプション、all_events、all_custom_events、all_dom_eventsに登録して、ウェブピクセルで提供できるすべての標準イベントをチェックすることも可能です。この詳細は「ウェブピクセルAPI」を参照してください。

analytics.subscribe("all_standard_events", event => {
console.log("Event data ", event?.data);
});

目次

カスタムピクセルが接続されていることを確認する

カスタムピクセルをテストする前に、カスタムピクセルが接続されていることを確認してください。

手順

  1. 管理画面から、[設定] > [お客様イベント] の順に移動します。
  2. テストするピクセルの横にある [ステータス] 列で、そのピクセルのステータスが「接続済み」と表示されていることを確認します。
  3. ピクセルが接続されていない場合、[…] をクリックし、[接続] をクリックします。

Shopify Pixel Helperを使用してカスタムピクセルをテストする

カスタムピクセルが接続されていることが確認できたら、Shopify Pixel Helperを使用して、カスタムピクセルがデータを送信し、ストアのデータを受信しているかどうかをテストできます。一度にテストできるカスタムピクセルは1つです。

手順

  1. 管理画面から、[設定] > [お客様イベント] の順に移動します。
  2. テストするカスタムピクセルをクリックします。
  3. [テスト] をクリックして、ウェブサイトでカスタムピクセルをテスト用に開きます。

  4. 任意：ストアの同意設定とカスタムピクセルのお客様プライバシー設定によっては、[Pixel helper] ダイアログに「ピクセルが同意待ちです」と表示される場合があります。テストを続行するには、以下のいずれかの操作を行います。

    • ストアのCookieバナーまたは環境設定で追跡を許可します。
    • [同意してテストを続行] をクリックします。
    • それでもピクセルが読み込まれない場合は、お客様プライバシー設定を確認してください。

  5. どのイベントが読み込まれているかを確認するには、ピクセルをテストしたい各ページにアクセスし、[ピクセルヘルパー] ダイアログを確認して、[受信イベント] セクションでイベントが正常に登録され、コールバック関数が正常に実行されたことを確認します。

    • 新しいページに移動して、page_viewedイベントをテストします。
    • 商品をクリックして、product_viewedイベントをテストします。
    • カートに商品を追加して、product_added_to_cartイベントをテストします。
    • チェックアウトに移動して、checkout_startedイベントをテストします。
    • チェックアウト画面に配送情報を入力して、checkout_startedイベントがcheckout_shipping_info_submittedイベントに遷移することをテストします。
    • チェックアウトを完了して、checkout_shipping_info_submittedイベントがcheckout_completedイベントに遷移することをテストします。テスト注文を行う方法について、詳しくはこちらをご覧ください。

  6. 受信したイベントデータを表示するには、[最大化] ボタンをクリックしてピクセルヘルパーダイアログを展開します。

[受信イベント] セクションを表示する

ステップ5でどのイベントが読み込まれているかをテストすると、[ピクセルヘルパー] ダイアログの [受信イベント] セクションに、以下のステータスのいずれかが表示されます。

  • 緑の点は、イベントが正常に登録され、コールバック関数の実行に成功したことを示します。
  • 赤の点は、イベントは正常に登録されたものの、コールバック関数の実行に失敗したことを示します。カスタムピクセルのトラブルシューティングについて、詳しくはこちらをご覧ください。

カスタムピクセルのトラブルシューティング

テスト中にピクセルが読み込まれないか、起動しない場合、イベントデータとピクセルコードにエラーがないか確認済みであれば、以下のトラブルシューティングをお試しください。

お客様プライバシー設定を確認する

テスト中にピクセルが読み込まれないか、起動しない場合は、お客様プライバシー設定によって読み込みがブロックされた可能性があります。

管理画面で、[設定] > [お客様のプライバシー] の順に進み、セッションに適用される可能性のあるお客様のプライバシー設定を管理画面で確認します。お客様のプライバシー設定に応じて、以下の手順を実行します。

  • マーチャントの地域でお客様のプライバシー設定に同意が必要な場合、マーチャントはCookieバナーを使用して同意したことを確認します。
  • ピクセルの読み込みをブロックするお客様のプライバシー設定がない場合は、ブラウザのCookieを消去してCookieバナーをリセットし、同意します。

同意を管理するために外部ツールを使用している場合は、利用している外部サービスプロバイダーに連絡してサポートを受けてください。

その他のトラブルシューティング

カスタムピクセルがお客様イベントに正しく登録されているか不明な場合は、以下のトラブルシューティング手段を試してください。

  • ブラウザのCookieを消去します。
  • 標準イベントをテストする場合は、Shopifyの標準イベント説明の開発者ドキュメントを確認して、イベントをトリガーするために必要な手順を実行しているか確かめる必要があります。

外部サービスのピクセルヘルパーによるテスト

ピクセルSDK (ソフトウェア開発キット) には、ピクセルがお客様の行動に関する情報を収集するためのツールが含まれています。外部ピクセルプロバイダーのピクセルヘルパーを使用すれば、ピクセルの以下の動作をテストして、ピクセルSDKが期待どおりに動作しているかを確認することができます。

外部サービスのピクセルSDKが読み込まれるかどうかをテストする

ネットワークタブを確認する手順は、使用しているウェブブラウザによって異なります。たとえば、Google Chromeのネットワークタブを確認する方法については、Chromeの開発者用「ネットワークアクティビティを検査する」ドキュメントを参照してください。

外部サービスのピクセルSDKが読み込まれていることをテストするには、まずSDK URLの外部サービスのコードを取得して、それをピクセルコードに追加する必要があります。サポートが必要な場合は、利用している外部サービスのピクセルプロバイダーにお問い合わせください。

手順

  1. 管理画面から、[設定] > [お客様イベント] の順に移動します。
  2. テストするカスタムピクセルをクリックします。
  3. [コード] セクションで、外部サービスプロバイダーがピクセルコードのエンドに提供したピクセルSDKを入力します。
  4. [保存] をクリックします。
  5. オンラインストアにアクセスし、ネットワークタブで、外部サービスプロバイダーのSDK URLがダウンロードされていることを確認します。
  6. 任意：外部サービスのピクセルSDKが読み込まれない場合、サンドボックスでJavaScriptランタイムエラーを確認します。たとえば、Chromeでは、特定のiFrameを選択してコンソールログを確認し、テスト中のピクセルにログを絞り込むことができます。ChromeでJavaScriptのランタイムエラーを確認する方法について詳しくは、Chromeの「JavaScriptをデバッグする」ドキュメントを参照してください。

テスト中に外部サービスのピクセルSDKを読み込めない場合は、利用している外部ピクセルプロバイダーに連絡してサポートを受けてください。

その他の外部サービスのピクセルSDKのテスト

外部サービスのピクセルSDKが初期化されているか、イベントを収集しているかをテストするには、外部サービスのピクセルプロバイダーのドキュメントを参照してください。

ピクセルSDKがイベントを収集しているかどうかをテストするために、ブラウザのネットワークタブを確認するように指示される場合があります。ネットワークタブを確認する手順は、使用しているウェブブラウザによって異なります。たとえば、Google ChromeのGoogle Chromeブラウザのネットワークタブを確認する方法については、Chromeの開発者用「ネットワークアクティビティを検査する」ドキュメントを参照してください。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す