高品質な運用環境を維持するためにできる最も重要なことの 1 つは、劣悪なユーザー エクスペリエンスを検出して解決するために必要な Web テレメトリを確保することです。このガイドでは、ブラウザーの監視を最適化するために必要なデータを確実に取得できるようにする方法について説明します。私たちはあなたが次のことを確実に行えるようお手伝いします。
Step 1 of 7
まず、ブラウザーの名前付けとデータ構成が適切であることを確認する必要があります。必要に応じて、名前変更ガイド に従ってブラウザ アプリケーションの名前を変更できます。複数の環境からのデータを 1 つのブラウザー アプリケーションにレポートしている場合は、新しいブラウザー アプリを作成し 、ページ内の JavaScript スニペットを更新して、適切なアプリをレポートすることができます。
ブラウザ監視組織を確認するときは、次の点に留意してください。
さまざまな環境 (dev/qa/production) からの Web アプリケーション インストルメンテーションは、さまざまなブラウザ アプリケーションにレポートする必要があります。 ブラウザ アプリケーションがサポートする環境 (開発環境、QA、運用環境など)。 ブラウザ アプリケーションの目的 (顧客向け、内部向け、Web サイト、Web サイト コンポーネント、リージョンなど)。 Step 2 of 7
次に、JavaScript エラーに対処する必要があります。JavaScript エラーは、ページ読み込みプロセスを中断し、エラーを表示し、ユーザーがアクションを完了できないようにすることで、ユーザー エクスペリエンスと SEO に悪影響を及ぼします。まず、JavaScript エラーが UI または NRQL を使用してキャプチャされていることを確認します。
UI経由 ブラウザ で Web アプリケーションを開きます。左側のメニューの下にある「エラー」 ビューを開き、JavaScript エラーが表示されることを確認します。アプリケーションが大量のトラフィックを取得していない場合、エラーを確認するには 24 時間以上前に戻る必要がある場合があります。
NRQL経由 次のクエリを実行します。
SELECT count(*) FROM JavaScriptError WHERE appName = 'MyApp' SINCE 1 WEEK AGO
カウント 0 は、JavaScript エラーが捕捉されていないことを意味します。
次のコマンドを実行すると、サブアカウント内のすべての Web アプリケーションを確認できます。
SELECT count(*) FROM JavaScriptError FACET appName LIMIT MAX SINCE 1 WEEK AGO
結果に存在しない Web アプリケーションは JavaScript エラーを報告していません。
JavaScript 欠落エラーは次の方法で解決できます。 ブラウザ エージェントが最新であることを確認します。新しいブラウザのバージョンでは、何らかの理由でこれまで見落とされていた JavaScript エラーが捕捉される場合があります。 ブラウザ エージェントがページの<HEAD/>タグに配置されていることを確認します。Chrome 開発者ツールを使用してこれを確認できます。 AngularJS エラーが見つからない場合は 、次の手順 に従ってください。 ブラウザ エージェントがエラーを確認する前に、サイトでエラーを処理するエラー ハンドラーが使用されているかどうかを確認します。 JavaScript エラーの サポート内容を 確認します。 NoticeError API を使用して欠落エラーをキャプチャします。JS エラーが報告されていることを確認したら、イベント ログも存在することを確認します。イベント ログには、JS エラーにつながるブラウザの対話、AJAX 呼び出し、およびトレースが表示されます。これは、エラーの根本原因のトラブルシューティングに役立ちます。
UI経由 イベント ログをキャプチャしていることを確認するには、 [JS エラー] タブに移動します。いくつかの異なるエラーをチェックして、イベント ログが表示されることを確認します。
イベント ログが見つからない場合のトラブルシューティングを行うには、 次の手順 に従ってください。
最後に、JavaScript エラーにスタック トレースがあることを確認してください。
UI経由 JS Errors [JS エラー]タブでいくつかのエラーを確認します。スタック トレースがエラー イベント ログの下に表示されます。
NRQL経由 次のクエリを実行します。
SELECT count(*) FROM JavaScriptError WHERE appName = 'MyApp' AND stackTrace IS NOT NULL AND stackTrace NOT LIKE '' SINCE 1 WEEK AGO
カウント 0 は、JavaScript エラーが捕捉されていないことを意味します。
次のコマンドを実行すると、サブアカウント内のすべての Web アプリケーションを確認できます。
SELECT count(*) FROM JavaScriptError WHERE stackTrace IS NOT NULL AND stackTrace NOT LIKE '' FACET appName LIMIT MAX SINCE 1 WEEK AGO
結果に存在しない Web アプリケーションには、スタック トレースに JavaScript エラーがありません。
スタック トレースが見つからない場合のトラブルシューティングを行うには、 次の手順に 従ってください。または、スタック トラックは表示されるが展開できない場合は、次の手順に 従ってください。
Step 3 of 7
次に、ページビューのグループ化を確認します。Page views [ページ ビュー]UI のページ URL は、ページのパフォーマンスをより適切に管理できるように自動的にグループ化されます。自動グループ化を決定するアルゴリズムは、Web アプリが初めてインストルメント化されるときに実行されます。現在の Web トラフィックが、アプリが最初にインストルメントされたときと大きく異なる場合は、表示されるグループが少なすぎる可能性があります。
UI経由 左側のメニューからアプリを選択して、アプリのページ ビュー UI を確認します。表示されている内容が以下のスクリーンショットとよく似ている場合は、メモを取り、このガイドの指示に従って対処してください。
NRQL経由 次のクエリを実行します。
SELECT count(*) from PageView WHERE appName = 'MyApp' AND browserTransactionName LIKE '*.*.*%/%' or browserTransactionName LIKE '%.%.%/*/*/*/%' or browserTransactionName LIKE '%.%.%/*/*/*' or browserTransactionName LIKE '%.%.%/*/*/%' FACET pageUrl limit 100 SINCE 1 WEEK AGO
結果には、アプリに対してどのページ URL が過剰にグループ化されている可能性があるかが示されます。
次のコマンドを実行すると、サブアカウント内のすべての Web アプリケーションを確認できます。
SELECT count(*) from PageView WHERE browserTransactionName LIKE '*.*.*%/%' or browserTransactionName LIKE '%.%.%/*/*/*/%' or browserTransactionName LIKE '%.%.%/*/*/*' or browserTransactionName LIKE '%.%.%/*/*/%' FACET browserTransactionName, pageUrl limit 100 SINCE 1 WEEK AGO
結果として、複数のアプリに対して同じデータが得られます。
セグメント許可リスト を使用して、ページ ビュー URL がグループ化される方法を調整します。
Step 4 of 7
ページビューを確認したら、AJAX 呼び出しのグループ化についても同じことを行う必要があります。AJAX 呼び出しは、大規模な操作を容易にするためにグループ化されています。場合によっては、AJAX 呼び出しが非常に多くなり、個々のリクエスト URL ごとにそれらをナビゲートすることが困難になることがあります。UI または NRQL クエリを使用して、AJAX グループ化を調整する必要があるかどうかを確認します。
UI経由 左側のメニューからアプリを選択し、 groupedRequestUrl でグループ化して、アプリの AJAX グループ化を確認します。表示されている内容が以下のスクリーンショットとよく似ている場合は、メモを取り、このガイドの指示に従って対処してください。
NRQL経由 次のクエリを実行します。
SELECT count(*) FROM JavaScriptError WHERE appName = _your app name_ AND stackTrace IS NOT NULL AND stackTrace NOT LIKE '' SINCE 1 WEEK AGO
カウント 0 は、JavaScript エラーが捕捉されていないことを意味します。
次のコマンドを実行すると、サブアカウント内のすべての Web アプリケーションを確認できます。
SELECT count(*) FROM JavaScriptError WHERE stackTrace IS NOT NULL AND stackTrace NOT LIKE '' FACET appName LIMIT MAX SINCE 1 WEEK AGO
結果に存在しない Web アプリケーションには、スタック トレースに JavaScript エラーがありません。
セグメント許可リスト を使用して、AJAX リクエストがどのようにグループ化されるかを調整します。
Step 5 of 7
次に、ブラウザで分散トレースを 有効にすると、バックエンドへのリクエストを最終エンドポイントに至るまでトレースすることで、AJAX のパフォーマンスを向上させることができます。トレース情報は、どのアプリケーションがユーザー エクスペリエンスに影響を与えているかを理解するのに役立ちます。この情報を使用して、サービスの問題に自分で対処したり、担当チームに委任したりできます。
Step 6 of 7
次に、NerdGraph を使用してWeb アプリケーションの変更を追跡し 、パフォーマンス KPI、コンバージョン、ユーザー エンゲージメントに対する変更の影響を確認します。
Step 7 of 7
カスタム属性を 使用してデータをフィルタリングおよびグループ化します。カスタム属性はオプションですが、使用すると多くの価値が得られます。以下に最も一般的に推奨される属性を示しますが、さらに追加したい場合もあるでしょう。
ユーザー 識別可能なユーザーがいるすべてのサイトに推奨されます。エラー受信箱の ドキュメントに記載されている規則に従って、エラーの影響を受けるユーザーの数を特定し、どのユーザーを特定できるようにします。
お客様 SLA を満たしたり、サポート リクエストを詳しく調査したりするために、特定の顧客のエクスペリエンスを測定します。
カートの値 コンバージョン収益をリアルタイムで追跡します。カート放棄やチェックアウト時の問題の影響を測定します。
アイテム数 購入したアイテムをリアルタイムで追跡します。カート放棄やチェックアウト時の問題の影響を測定します。
広告キャンペーンやプロモーションの結果としてサイトにアクセスするユーザーの数を把握します。コンバージョンに対するプロモーションの影響を測定します。
店 ストアをキャプチャして、Click-to-Collect のパフォーマンスに関する情報を収集します。店内ショッピング Web アプリケーションのパフォーマンスを測定します。
製品 製品 ID がページ URL にまだ取り込まれていない場合に役立ちます。この情報を使用して、どの製品ページのパフォーマンスが低下しているかを確認します。どの製品ページが最も多くのトラフィックを受信し、どの製品ページが最も少ないトラフィックを受信しているかを把握します。
サービスを監視するプロセスと同様に、可観測性プログラムは、努力への投資に対する期待収益を批判的に考える専用のチーム機能を通じて利益を得ることができます。次のセクションでは、可観測性の実践に Web インスツルメンテーションを組み込むことで予想されるコストとメリットを見積もるアプローチの概要を説明します。