カスタムピクセルのテスト

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

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);
});

このページの内容

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

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

手順：

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

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

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

手順：

管理画面から、[設定] > [お客様イベント] に移動します。
テストするカスタムピクセルをクリックします。
[テスト] をクリックして、テストのためにウェブサイトでカスタムピクセルを開きます。
任意：ストアの同意設定とカスタムピクセルのお客様のプライバシー設定によっては、ピクセルヘルパーダイアログに [ピクセルは同意を待機しています] と表示される場合があります。テストを続行するには、以下のいずれかを実行します。
- ストアの Cookie バナーまたは各種設定でトラッキングを承諾します。
- [テストを続行するために同意する] をクリックします。
- それでもピクセルが読み込まれない場合は、お客様のプライバシー設定を確認してください。
どのイベントが読み込まれているかを表示するには、ピクセルをテストする各ページにアクセスし、ピクセルヘルパーダイアログの [受信したイベント] セクションで、イベントが正常にサブスクライブされ、コールバック関数が成功したことを確認します。
- 新しいページに移動して、page_viewed イベントをテストします。
- 商品をクリックして、product_viewed イベントをテストします。
- 商品をカートに追加して、product_added_to_cart イベントをテストします。
- チェックアウトに移動して、checkout_started イベントをテストします。
- チェックアウトで発送情報を入力し、checkout_started イベントが checkout_shipping_info_submitted イベントに置き換えられることをテストします。
- チェックアウトを完了し、checkout_shipping_info_submitted イベントが checkout_completed イベントに置き換えられることをテストします。テスト注文を行うについて、詳しくはこちらをご覧ください。
受信したイベントデータを表示するには、をクリックしてピクセルヘルパーダイアログを展開します。

[受信したイベント] セクションの表示

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

緑色の点は、イベントが正常にサブスクライブされ、コールバック関数が成功したことを示します。
赤色の点は、イベントは正常にサブスクライブされたものの、コールバック関数が失敗したことを示します。カスタムピクセルのトラブルシューティングを行う方法をご確認ください。
ピクセルヘルパーには、トップレベルまたはコールバック関数で発生した未捕捉のエラーが表示されます。トップレベルのエラーは、ピクセルヘルパーの読み込み時に表示されます。コールバックのエラーメッセージは、赤色の点が付いたイベントをクリックして展開すると表示されます。
以下のコードサンプルには、コールバックエラーとトップレベルのエラーが含まれています。トップレベルのエラーの場所によっては、ピクセルが部分的に機能する場合があります。

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

JavaScript エラーの修正について詳しくは、「JavaScript のトラブルシューティング」をご覧ください。

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

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

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

テスト中にピクセルが読み込まれない、または発生しない場合、お客様プライバシー設定が原因で読み込みが妨げられている可能性があります。

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

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

外部サービスのツールを使用して同意を管理している場合は、外部サービスプロバイダーにサポートを依頼してください。

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

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

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

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

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

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

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

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

手順：

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

テスト中に外部サービスピクセル SDK が読み込まれない場合は、外部サービスピクセルプロバイダーにサポートを依頼してください。

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

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

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