このレポには、BizOps - Bridging the Gap to the Business Hands On Workshopの一環として実施されるラボが含まれています。

ハンズオンの目的は、参加者のためにステップを自動化し、シームレスにすることです。

事前準備

セットアップ

このラボでは、以下のサンプルアプリケーションを使用します。

学習内容

この演習の目的は、Dynatraceの基本的なReal User Monitoringの構成を強化し、ITメトリクスにビジネスコンテキストをもたらすことです。そのため、Dynatraceの基本的な設定は行わず、あらかじめ環境を設定しておきます。

基本的な設定に興味のある方は、以下のラボリファレンスDigital Experience Management with Dynatraceを参考にしてください。

Dynatrace Real User Monitoringの重要な機能の一つに、異なるブラウザ、デバイス、ユーザーセッション間で個々のユーザーを一意に識別する機能があります。

デフォルトでは、Dynatraceは各新規ユーザーにユニークでランダムなIDを割り当てます。しかし、ユーザー名や電子メールアドレスなどで構成される、より意味のあるカスタムユーザータグを割り当てることができます。

この演習では、ページソースに基づいてユーザーをタグ付けするアプローチを使用します。このユーザータグ付けのアプローチは、アプリケーションのページソースで利用可能なデータを取り込むことで機能します。

Easy Travel Angularアプリでは、ユーザー名を右上に表示しています。これは、DOM要素のテキストやJavaScriptの変数を介して行われます。

Dynatraceで設定するには

  1. 左のナビゲーションメニューから「Applications」を選択します。
  2. EasyTravel Angular アプリケーションを選択します。
  3. 参照」ボタン(...)をクリックし、「編集」**を選択する。
  4. Capturingヘッダーの下で、User tag**を探す。 ユーザータグ
  5. Add user tag rule**をクリックする。
    • ソースの種類 **ソースタイプ: **CSSセレクタ
    • CSSセレクタのフィールド。
      a.greeting
      
    • トグル クリーンアップルールを適用 オン にする
    • Regexボックスに以下をコピーします。
      Hi, (.*+)
      
  6. Add user tag ruleボタンをクリックします。
  7. Save changesボタンを忘れずにクリックしてください。

設定が完了すると、このように表示されます。 User Tag

コンバージョンゴールは、ユーザーがユーザージャーニーの重要なマイルストーンを満たしているかどうかを理解するのに役立ちます。例えば、チェックアウトの成功、ニュースレターの登録、デモの登録などです。

この演習では、Easy Travel Angular アプリケーションのコンバージョン目標を作成します。

  1. 前のアクティビティと同じ画面で、Session Replay and behaviorの見出しをスクロールダウンし、Conversion Goalsを選択します。 Conversion
  2. Add goalボタンをクリックし、以下を入力します。
    • Name:
      Credit card validated
      
    • Type of goal: User Action
    • Rule applies to: XHR actions
    • Rule
      • Page URL
      • contains
        easytravel/rest/validate-creditcard
    • 完成した構成は以下のようになります。 Conversion

コンバージョン目標設定の検証

アプリケーションに照らし合わせて結果を確認します。EasyTravel Angular > User behaviorについて

Conversion

この演習では、セッションプロパティとユーザーアクションプロパティを作成して、Dynatraceに追加データを公開します。これは、分析目的でユーザーに関する追加のコンテキスト(キャンペーンのソース、ユーザーが選択したさまざまなアイテムなど)をもたらすのに便利です。

Dynatraceは、タグを使ってセッションにコンテキストを与える一般的なソフトウェアのリストをあらかじめ定義しています。その一部をご紹介します。

これらは、Property packタブにあります。

アプリケーションから抽出できる追加のデータソースについては、custom defined propertiesを使用して、監視するユーザーアクションやユーザーセッションの文字列、数値、および日付のプロパティを定義します。

プロパティの値は、各ユーザーの行動の一部として取得されます。プロパティ値を活用することで、ユーザーのアプリケーションとのインタラクションの詳細を把握することができます。

  1. 前述のアクティビティと同じ画面で、Capturingの見出しに移動し、Session and Action propertiesを選択します。 Session properties
  2. ボタン Add properties をクリックします。

Property packs - Google Analytics/Adobe/UTM codes など

これらはあらかじめ用意されているので、あとはリストから選択するだけです。ここでは、以下のものを選択します。

Custom properties - 各ユーザーの取引額

完成した構成はこんな感じです。 Custom property

Custom properties - 閲覧した旅行パッケージの金額

上記の設定に続いて、引き続きCSSセレクタタイプのカスタムプロパティを追加します。

完成した構成はこんな感じです。 Custom property

Custom properties - 閲覧・予約した旅行先

完成した構成はこんな感じです。 Custom property

設定完了画面

すべての設定が完了すると、次のようなセッション/ユーザーアクションプロパティのリストができます。 Session properties

この演習では、DynatraceのSession Replayの設定について説明します。

以下の手順で、セッションリプレイを有効にしてください。

  1. 前のアクティビティと同じ画面で、Session Replay and behaviorの見出しまでスクロールし、Session Replayを選択します。
  2. Enable Session ReplayトグルON SessionReplay
  3. Recoding mask settings タブへスクロールダウン、Mask user inputを選択 SessionReplay
  4. Playback masking settingsタブをクリックし、Mask user inputを選択 SessionReplay
  5. 下までスクロールしSaveをクリック SessionReplay

Dynatraceで収集したデータを視覚化する準備が整いました。この演習では、コンバージョン目標session/action propertiesが、分析のためのITメトリクスにはるかに多くの洞察力とコンテキストを提供する方法を見ることができます。

これが、これから作成を目指すダッシュボードです。

Dashboard

Dashboard

  1. 左側のメニューからDashboardsを選択してください。
  2. Create Dashboardのボタンをクリックし、名前を入力してCreateをクリックします。
  3. User Sessions Queryタイルをドラッグして、Configure tileをクリックします。 ダッシュボード
  4. 以下のようなクエリを入力します。
   SELECT FUNNEL(useraction.name like "*journeys*" AS "Journey Search", useraction.name = "click on book now (xhr: /easytravel/rest/journeys/)" AS "Click on Book Now", useraction.name = "click on sign in (xhr: /easytravel/rest/login)" AS "Login", useraction.name="click on book journey  (xhr: /easytravel/rest/validate-creditcard)" AS "Submit Payment") FROM usersession
  1. run query ボタンをクリック。
  2. 名前の変更
    Payment funnel
    
  3. save changes to dashboard ボタンをクリック。

Dashboard

時間軸での変換

Dashboard

  1. ダッシュボードをEditモードにして、先に作成したタイルをクリックし、cloneボタンをクリックし、configure tileボタンをクリックします。 Dashboard
  2. 以下のようなクエリを入力します。
   select datetime(starttime, "E HH:mm", "10m"), count(*) as "Conversions" from usersession where useraction.matchingConversionGoals="Credit card validated" group by datetime(starttime,"E HH:mm","10m")
  1. run queryボタンをクリックします。
  2. Line chartを選びます。
  3. 名前の変更
    Conversions over time
    
  4. save changes to dashboardボタンをクリックします。

Dashboard

予約収益

Dashboard

  1. 上のタイルをクローンして、configure tileをクリックします。
  2. クエリを変更します。
   select sum (doubleProperties.booking) as Revenue from usersession
  1. run queryボタンをクリックします。
  2. Single valueを自動的に選択してくれます。
  3. 名前の変更
    Booking revenue
    
  4. save changes to dashboardボタンをクリックします。

Dashboard

放置されたカートの合計

Dashboard

  1. 上のタイルをクローンして、configure tileをクリックします。
  2. クエリを変更します。
   SELECT sum (doubleProperties.tripcost) as "Revenue Lost" from usersession where useraction.matchingConversionGoals IS NULL AND doubleProperties.tripcost > 0
  1. run queryボタンをクリックします。
  2. Single valueを自動的に選択してくれます。
  3. 名前の変更
    Abandoned cart value
    
  4. save changes to dashboardボタンをクリックします。

Dashboard

カートの放棄によって影響を受けるユーザー

Dashboard

  1. 上のタイルをクローンして、configure tileをクリックします。
  2. クエリを変更します。
   SELECT userid from usersession where useraction.name = "click on book journey  (xhr: /easytravel/rest/validate-creditcard)" and doubleProperties.booking is null
  1. run queryボタンをクリックします。
  2. Single valueを自動的に選択してくれます。
  3. 名前の変更
    Users affected by abandoned cart
    
  4. save changes to dashboardボタンをクリックします。

Dashboard

DAVIS™️に挑戦しよう!

EasyTravel Angularの実際の予約アプリケーションにアクセスする

Action on the data

Action on the data

Action on the data

シナリオ #1

コンバージョンが減少しています。そして、Revenueも減少しています。

Scenario1

しかし、ITオペレーションチームの監視ダッシュボードでは、すべてのシステムがグリーンになっています。 Scenario1

ITの問題ではないにしても、何かが原因でユーザーが不満を感じ、取引が完了しないのではないでしょうか。

ヒント:

Sample BizDevOps Dashboardのいくつかのダッシュボードは、何が起こっているかを知る手がかりになるかもしれません。

Scenario1

また、Session Replayを使用してユーザーセッションを調査すると、ログやアプリケーションコードの調査では検出できないアプリケーションの事実が判明することがあります。

シナリオ #2

DAVISが異常を検出しました! また、影響を受けて予約プロセスを放棄したユーザーがいることも確認されました。

Scenario2

ヒント:

先ほど作成したダッシュボードには、何がエラーの原因になっているかを理解するための情報がすべて含まれています。

Problemsのタイルから始めて、そこからドリルダウンすることができます。

また、問題に直面しているユーザー名をリストアップしたタイルを使って、個々のユーザーセッションを調査することもできます。

Dynatraceにビジネスアナリティクスを適用することで、以下の目標を容易に達成することができました。

BizDevOps Use case

ドロップアウトやユーザーの不満の原因の第一は、エラーです。

エラーの原因はさまざまです。

さらに言えば、コンテンツ・セキュリティ・ポリシー(CSP)違反 を引き起こすDDoS攻撃やクロスサイトスクリプティング攻撃もあります。 ウェブサイトの応答性を低下させたり、ユーザーのデータや個人情報を盗んだりします。

エラーには多くの種類があり、1つ1つ分析していては効率が悪いため、何を修正すべきか優先順位をつけるのは通常困難な作業です。

BizDevOps Use case

このワークフローは、次のような人たちに有益です。

分析を始めるためのいくつかのエントリーポイント

2つのワークフローを例に説明します。

ワークフロー #1 - 特定のアプリケーションの概要からナビゲートする

  1. Applications -> Easy Travel Angular -> Errorsへ進みます。
  2. Analyze errorsをクリックします。
  3. いくつかのエラーが表示されるので、HTTP requestタブでHTTP 500と表示されているものを選択します。
  4. dectection rulesを変更することができます。
  5. ルールの1つは、CSP errorsの検出をカバーしています。 BizDevOps Use case

ワークフロー #2 - Navigate from User Sessions

  1. User Sessionsへ進みます。
  2. 上のフィルターを使う
  3. データ設定をより詳細に操作するには、USQLを使用します。

参考

Googleは昨年、Core Web Vitalsという取り組みを発表しました。

目標は、「ウェブ上で優れたユーザー体験を提供するために不可欠な品質シグナル」を提供するための測定値を標準化することです。

Googleは最近、これらのメトリクスをユーザーエクスペリエンスシグナルとして検索結果ランキングに含めました。これは、これらのメトリクスが単にあると便利なものではなく、必要不可欠なものであることを示しています。

Dynatraceは、Google Core Web Vitalの測定結果を、アプリケーションのフロントエンドとバックエンド全体のインサイトで補完します。Dynatraceでは、3つのCore Web Vitalメトリクスをすべて活用することができ、数回のクリックで詳細を確認することができます。

ページとページグループの解析ワークフロー

  1. アプリケーションの概要ページからスタートします(Applicationsに進み、アプリケーション名を選択します)。
  2. 2. アプリケーションの概要ページには、Top 3 pagesが表示され、ページグループとページのタブがあります。必要な粒度を表示するタブを選択します。
    • グループ名を選択すると、選択したグループのページグループ概要が表示されます。
    • すべてのページグループを表示」を選択すると、すべてのページグループの多次元分析が表示されます。

分析ワークフロー

  1. View all page groupsを選択します。 BizDevOps Use case
  2. Performance metricのドロップダウンで、Largest contenful paintを選択します。その他はデフォルトのままです。
  3. homeをクリックしてください。 BizDevOps Use case
  4. Performanceセクションまでスクロールダウンし、Perform waterfall analysisをクリックします。 BizDevOps Use case
  5. ウォーターフォール分析では、これらのページのルート変更の根本的な動作を分析することができます。ここでは、詳細なパフォーマンスとエラー情報を文脈に沿って表示することができます。

BizDevOps Use case

ダッシュボード・ワークフロー

  1. 画面上部のパンくずを使って、1画面戻る。例:Applications > EasyTravel Angular > Page groups > home BizDevOps Use case 2.Performanceセクションまでスクロールダウンし、Analyze performanceをクリックします。 BizDevOps Use case
  2. 下にスクロールして、Detailed analysis...のセクションに移動します。
  3. "Analyze by" ドロップダウンから UTM sourceを選択します。
  4. Performance metric "ドロップダウンから Largest contenful paintまたは First contentful paintのいずれかを選択する。
  5. Create metricをクリックする。

BizDevOps Use case

  1. Split by UTM sourceを有効にして、5を入力します。 BizDevOps Use case
  2. Create metricをクリックして、メトリックの作成を完了します。
  3. ダッシュボードにチャート表示できるようになりました。

参考

  1. EasyTravel Angularホームページを評価する CSS
  2. 任意の旅行パッケージを選択し、bookをクリックし、ユーザー名alexとパスワードalex でログインします。 CSS
  3. 名前のAlex Elliotを右クリックし、Inspectをクリックします。
  4. ハイライトされた行の...をクリックし、Copy > Copy Selectorを選択します。 CSS
  5. これは、Webアプリケーションで定義されている任意のDOM要素に対して行うことができます。

先ほど示したように、2つのリクエスト属性 revenuedestination があらかじめ作成されています。

新しいリクエスト属性の定義

様々なデータソースからリクエスト属性を作成することができます。今回のハンズオンでは、旅行パッケージに申し込んだお客様の忠誠度を公開します。

RequestAttribute

  1. Settings > Server side service monitoring > Request Attributes を選択します。
  2. Define a new request attributeボタンをクリックします。 RequestAttribute
  3. Request attribute nameloyalty statusとして入力してください。
  4. データタイプは text のままにしておきます。
  5. Add new data sourceボタンをクリックします。 RequestAttribute
  6. Configure 1st source:
    • Request attribute source: Web request URL query parameter
    • Parameter name: loyalty
    • Saveボタンを押してください。 RequestAttribute
  7. Add new data sourceボタンをクリックします。
  8. 2ndソースの設定
    • Request attribute source: Java method parameter
    • Select method sourcesボタンをクリックします RequestAttribute
    • Select the process group: com.dynatrace.easytravel.business.backend.jar easytravelRequestAttribute
    • Continueボタンを押してください。
    • 検索ボックスにこれを入力して、Searchをクリックします。
      com.dynatrace.easytravel.business.webservice.BookingService
      
    • クラスを選択し、Continueをクリックします。 RequestAttribute
    • Use the selected classのラジオボタンをクリックし、Continueをクリックします。 RequestAttribute
    • Select the method: private void checkLoyaltyStatus
    • Finishボタンをクリックします。 RequestAttribute
    • キャプチャードロップダウンでは 2: java.lang.Stringを選択します。
    • Saveをクリックします。 RequestAttribute
  9. 最終的な設定は以下の画面のようになります。
  10. 最後に右上Saveボタンを忘れずにクリックしてください。

RequestAttribute

セッションプロパティでのリクエスト属性の追加

  1. 左のナビゲーションメニューからApplicationsを選択します。
  2. EasyTravel Angularアプリケーションを選択します。
  3. (...) ボタンをクリックし、Editを選択します。
  4. Capturingヘッダーの下にあるSession and action propertiesを探す。
  5. Add propertiesボタンをクリックする
  6. Custom defined propertyタブを選択する
  7. Expression type: にServer side request attributeを選択する
  8. Request attribute name: loyalty status

USQLによるデータの可視化

  1. ステップ2の手順で、ダッシュボードにUSQLタイルを追加します。
  2. 以下のUSQLを使用し、pie chartを選びます。
   select stringProperties.memberstatus, sum (doubleProperties.booking) as Revenue from usersession where stringProperties.memberstatus IS NOT NULL group by stringProperties.memberstatus order by sum(doubleProperties.booking) DESC
  1. 次のようなタイルが表示されます。

RequestAttribute

このラボを楽しんでいただき、お役に立てれば幸いです。ご意見、ご感想をお待ちしております。

このラボでの全体的な経験はどうでしたか?

とても良い 良い 普通 悪い とても悪い

このラボで最も役立ったことは何ですか?

デジタルビジネスアナリティクスの学習 User Session Propertiesの設定 BizDevOpsのコロケーションを向上させるDynatraceの使い方 USQLの使い方

このラボを友人や同僚に勧める可能性はどの程度ありますか?

強く勧めたい 勧めたい わからない 勧めない 全く勧めない