サイト上の不具合の調査方法を知りたい

サイト上での不具合とは

b→dashにはアクセスログの計測やweb接客によるポップアップ表示など、貴社のwebサイトに対してデータ取得や施策の実施を行う機能がありますが、サイトにタグを設置したがタグが発火されていない、web接客配信を設定したが該当のページ上でポップアップが表示されないなど、webサイト上で想定通りの動作がされないケースがあります
このような事象が発生した場合に、b→dashの設定の問題なのか、webサイト側に問題があるのかなど原因を特定する必要があります。本記事では、その調査に必要なブラウザ情報を取得する方法を説明します。

ブラウザ情報の取得方法

ブラウザ上で取得するべき情報は、デベロッパーツール内の「Consoleパネルに表示されるログ」「Networkパネルに表示されるログ」の2つが存在します。それぞれの取得方法は、お使いのwebブラウザによって異なりますが、本記事では「Chrome」を利用した場合の例を以下に説明します。

デベロッパーツールとは

デベロッパーツールとは、表示しているページのHTML構成や表示速度、通信状況などをブラウザ上で確認できるツールです。
Chromeにおけるデベロッパーツールの表示方法は以下をご確認ください。

想定通りの動作がされないページを開きます

画面上を右クリックし、表示されるメニューから「検証」を選択します

デベロッパーツールが表示されます

デベロッパーツールの「Consoleパネル」を確認する

Consoleパネルとは、「ログに記録されたメッセージの表示」を行うことができる機能で、サイト上に設置したタグやweb接客の機能が正しく動作していない場合は、この画面にエラーメッセージが表示されることがあります。
「Consoleパネルに表示されるログ」の取得方法は以下をご確認ください。

不具合が生じた際は、以下で紹介するデベロッパーツールの「Consoleパネル」を表示した状態で、”不具合を再発させてから”、必要なキャプチャを取得するようにお願いします!
デベロッパーツールの表示を「Consoleパネル」に切り替えます

「Consoleパネルに表示されるログ」が見えるようにして、画面のキャプチャを取得ください

デベロッパーツールの「Networkパネル」を確認する

Networkパネルとは、webブラウザと、webサイトを運用しているwebサーバ間の通信ログを表示する機能で、設置したタグがb→dashのサーバと正常に通信できているかなどを確認することができます。
「Networkパネルに表示されるログ」の取得方法は以下をご確認ください。

不具合が生じた際は、以下で紹介するデベロッパーツールの「Networkパネル」を表示した状態で、”不具合を再発させてから”、必要なキャプチャを取得するようにお願いします!
Networkパネル」にて「bdash」を検索し、「control+R(ページ再読み込み)」をクリックします

任意のレコードをクリックします

※不具合や想定通りに動かない事象が発生した際、Networkタブの中のどのレコードをクリックするべきかは、b→dashのカスタマーサクセス担当からご連絡させていただきます

Headersタブ」に表示されるログが見えるようにして、画面のキャプチャを取得ください

Previewタブ」に表示されるログが見えるようにして、画面のキャプチャを取得ください

Responseタブ」に表示されるログが見えるようにして、画面のキャプチャを取得ください

問い合わせ時にご準備いただきたい情報

不具合に関して、カスタマーサクセス担当にお問い合わせをいただく際に、以下の情報が必要となる場合があります。

・URLが含まれた、対象画面のキャプチャ
・対象画面のURL
・対象の設定名
・操作をした時間帯
・対象の顧客ID、受注番号
・ビジターID(web接客の場合)

「Networkパネル」に表示されるステータスコード一覧

デベロッパーツールの「Networkパネル」にはステータスコードが表示されます。表示されるステータスコードはステータスコードごとに意味が異なります主なステータスコードについて、下記にまとめましたのでご参照ください。

コード 意味 説明
200 OK 成功したリクエスト
400 Bad request 不正なリクエスト
401 Unauthorized 認証に失敗
403 Forbidden アクセス権がない
404 Not Found リソースが発見できない
500 Internal Server Error サーバー側で処理方法が不明な事態が発生
502 Bad Gateway サーバーが無効なレスポンスを受け取った
503 Service Unavailable サーバー側でリクエストを処理する準備ができていない
504 Gateway Timeout サーバーが時間内にレスポンスを得られなかった
以上で、不具合発生時に必要なブラウザ情報の取得方法の説明は終了です。