カスタムピクセルをテストする
ピクセルを作成した後、オンラインストアでお客様イベントが正しくトリガーされることを確認するためテストします。カスタムピクセルのテストとトラブルシューティングに関する以下のヒントを確認してください。
カスタムピクセルが接続されていることを確認する
- 管理画面で、[設定] > [お客様イベント] の順に移動します。
- テスト中のピクセルの行で、[ステータス] 列が [接続済み] であることを確認します。
- ピクセルが接続されていない場合、[…] をクリックし、[接続] をクリックします。
ブラウザコンソールログを使用してカスタムピクセルをテストする
ブラウザコンソールログを使用して、カスタムピクセルが読み込まれ、お客様イベントに登録されているかどうかをテストできます。コンソールを確認する手順は、使用しているウェブブラウザによって異なります。たとえば、Google Chromeのコンソールの使用方法については、Chromeの開発者用「コンソールの概要」を参照してください。
ブラウザのキャッシュをクリアするには時間がかかる場合があります。そのため、ピクセルが読み込まれるまで、コンソールを複数回確認するか、別のブラウザウィンドウまたはデバイスを使用する必要があります。
カスタムピクセルが読み込まれているかどうかをテストする
GDPR設定や外部スクリプトなどの要素により、ピクセルの読み込みがブロックされる場合があります。コードスニペットをピクセルに追加して、正しく読み込まれているかどうかをテストできます。このスニペットにより、ブラウザのコンソールで読み取り可能なメッセージを追加できます。メッセージがブラウザコンソールに表示される場合、ピクセルはウェブサイトに正常に読み込まれています。
手順
- 管理画面で、[設定] > [お客様イベント] の順に移動します。
- テスト中のピクセルをクリックし、[コード] セクションで、最初の行に、他のコードの前に
console.log("loaded");と入力します。 - [保存] をクリックします。
- オンラインストアにアクセスし、ブラウザコンソールを使用してconsole.logステートメントが表示されることを確認します。
ピクセルを読み込めない場合のトラブルシューティング
ピクセルをconsole.log("loaded");でテストした後も読み込めない場合、お客様のプライバシー設定によって読み込みがブロックされた可能性があります。
管理画面で、[設定] > [お客様のプライバシー] の順に進み、セッションに適用される可能性のあるお客様のプライバシー設定を管理画面で確認します。お客様のプライバシー設定に応じて、以下の手順を実行します。
- マーチャントの地域でお客様のプライバシー設定に同意が必要な場合、マーチャントはCookieバナーを使用して同意したことを確認します。
- ピクセルの読み込みをブロックするお客様のプライバシー設定がない場合は、ブラウザのCookieを消去してCookieバナーをリセットし、同意します。
同意を管理するために外部ツールを使用している場合は、利用している外部サービスプロバイダーに連絡してサポートを受けてください。
ピクセルがお客様イベントに登録されているかどうかをテストする
カスタムピクセルがお客様イベントに登録されているかテストするには、カスタムピクセルに以下のコードを追加し、page_viewedをテストするイベントで置き換えます。
analytics.subscribe("page_viewed", async (event) => { console.log(event); });
手順
- 管理画面で、[設定] > [お客様イベント] の順に移動します。
- テスト中のピクセルをクリックし、[コード] セクションに、お客様イベント登録テストコードを入力します。
- [保存] をクリックします。
- オンラインストアにアクセスし、ブラウザコンソールでconsole.logステートメントが表示されることを確認します。
その他のトラブルシューティング
カスタムピクセルがお客様イベントに正しく登録されているか不明な場合は、以下のトラブルシューティング手段を試してください。
- ブラウザのCookieを消去します。
- 標準イベントをテストする場合は、Shopifyの標準イベント説明の開発者ドキュメントを確認して、イベントをトリガーするために必要な手順を実行しているか確かめる必要があります。
- カスタムイベントをテストする場合、
console.logステートメントを、theme.liquidファイルまたはチェックアウト拡張機能の公開コードの前後に入力することで、publish()コードが起動することを確認します。例：
console.log("before publish"); Shopify.analytics.publish("my_custom_event", myCustomData); console.log("after publish");
外部サービスのピクセルSDKのテスト
ピクセルSDK (ソフトウェア開発キット) には、ピクセルがお客様の行動に関する情報を収集するためのツールが含まれています。外部サービスが提供するピクセルSDKの以下の作動をテストできます。
外部サービスのピクセルSDKが読み込まれるかどうかをテストする
ネットワークタブを確認する手順は、使用しているウェブブラウザによって異なります。たとえば、Google Chromeのネットワークタブを確認する方法については、Chromeの開発者用「ネットワークアクティビティを検査する」ドキュメントを参照してください。
外部サービスのピクセルSDKが読み込まれていることをテストするには、まずSDK URLの外部サービスのコードを取得して、それをピクセルコードに追加する必要があります。サポートが必要な場合は、利用している外部サービスのピクセルプロバイダーにお問い合わせください。
手順
- 管理画面で、[設定] > [お客様イベント] の順に移動します。
- テストするカスタムピクセルをクリックします。
- [コード] セクションで、外部サービスプロバイダーがピクセルコードのエンドに提供したピクセルSDKを入力します。
- [保存] をクリックします。
- オンラインストアにアクセスし、ネットワークタブで、外部サービスプロバイダーのSDK URLがダウンロードされていることを確認します。
- 任意：外部サービスのピクセルSDKが読み込まれない場合、サンドボックスでJavaScriptランタイムエラーを確認します。たとえば、Chromeでは、特定のiFrameを選択してコンソールログを確認し、テスト中のピクセルにログを絞り込むことができます。ChromeでJavaScriptのランタイムエラーを確認する方法について詳しくは、Chromeの「JavaScriptをデバッグする」ドキュメントを参照してください。
テスト中に外部サービスのピクセルSDKを読み込めない場合は、利用している外部ピクセルプロバイダーに連絡してサポートを受けてください。
その他の外部サービスのピクセルSDKのテスト
外部サービスのピクセルSDKが初期化されているか、イベントを収集しているかをテストするには、外部サービスのピクセルプロバイダーのドキュメントを参照してください。
ピクセルSDKがイベントを収集しているかどうかをテストするために、ブラウザのネットワークタブを確認するように指示される場合があります。ネットワークタブを確認する手順は、使用しているウェブブラウザによって異なります。たとえば、Google ChromeのGoogle Chromeブラウザのネットワークタブを確認する方法については、Chromeの開発者用「ネットワークアクティビティを検査する」ドキュメントを参照してください。