• EnglishEspañol日本語한국어Português
  • ログイン今すぐ開始

この機械翻訳は、参考として提供されています。

英語版と翻訳版に矛盾がある場合は、英語版が優先されます。詳細については、このページを参照してください。

問題を作成する

NerdletにNrqlQueryコンポーネントを追加する

ヒント

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。 まだご覧になっていない方は、概要をご覧ください。

コースの各レッスンは前回のレッスンに基づいて構築されるため、このレッスンを開始する前に、前回のレッスン「テスト終了確認モーダルの表示」を完了していることを確認してください。

このシリーズでは、A/B テストを実行しているデモ サービスからデータを取り込む本格的なNew Relicアプリケーションを構築します。 アプリは A/B テスト データを興味深い方法で表示するため、最終的には、高品質のニュースレターの購読を増やすというビジネス目標を達成するためにバージョン A とバージョン B のどちらがより効果的かを選択できるようになります。

これまでのチュートリアルでは、データを視覚化するためのグラフを作成し、それらのグラフを使用および理解できるように整理しました。 また、最も効果的なバージョンに自信が持てるようになったらテストを終了するためのフォームをアプリ内に作成しました。 ただし、これまでのところ、チャートには次のような模擬データが表示されているため、どのバージョンがより効果的であるかを判断することはできません。

const versionASignups = {
    metadata: {
        id: 'version-a-newsletter-signups',
        name: 'Version A',
        viz: 'main',
        color: 'blue',
    },
    data: [
        { x: 0, y: 0 },
        { x: 10, y: 10 },
        { x: 20, y: 15 },
        { x: 30, y: 5 },
        { x: 40, y: 30 },
        { x: 50, y: 25 },
    ],
}

チャートのdataプロパティは、このような手動で作成されたデータや、フォーマットし直されたサードパーティのデータを提供するのに便利です。 しかし、多くのチャートでは、リアルタイムの New Relic データを表示する必要があります。 たとえば、Newsletter subscriptions by version [バージョン別のニュースレター サブスクリプション には]、New Relicのデータベース (略して NRDB) に存在する サブスクリプション データが表示されます。

NRDB をクエリするには、まず、探しているデータが何であるかを知る必要があります。 デモのバックエンド サービスを覚えていますか? このサービスは、ユーザーがサイトからニュースレターを購読すると、サブスクリプション イベントをNew Relicに報告します。 デモ サービスの実行中に、New Relic でこれらのサブスクリプション イベントを表示できます。

New Relicでサブスクリプションイベントを表示する

チャートから NRDB をクエリする前に、New Relic の Web インターフェースからデータをクエリしてみることを試してみてください。

New Relicホームページの上部のナビゲーション メニューからData explorer [データ エクスプローラー]に移動します。

データ エクスプローラーを使用すると、テレメトリーデータを探索できます。

  • メトリックス

  • イベント

  • ログ

  • トレース

    バックエンドはニュースレターのサブスクリプションをイベントとして New Relic に送信するため、このビューで確認できます。

Subscription [カスタムイベント]メニューからCustom events [サブスクリプション]を選択します。

このクエリ NRDB は、過去 30 分間のサブスクリプション イベントの合計を 1 分あたりに計算し、そのデータをグラフで表示します。

Dimensions [ディメンション]をクリックすると、これらのサブスクリプション イベントに関連付けられている属性のリストが表示されます。

これらのディメンションを使用して、サブスクリプション イベントをフィルター処理およびグループ化できます。 グラフの上にあるNRQLクエリに注目してください。 これは、これらのディメンションに基づいたチャートの基になるクエリを示します。

page-version [ページ バージョン]ディメンションをクリックすると、クエリがFACET page_versionでグループ化されるように変更されます。

データ エクスプローラーには、データのフィルタリングと並べ替えのための 2 つのオプションがあります。

  • 今選択したようなユーザーインタフェース ( UI ) の選択

  • New Relic クエリ言語 (NRQL)

    UI はデータをすばやくフィルタリングするのに役立ち、NRQL を知る必要はありません。 ただし、New Relic アプリケーションでは、NRQL クエリを使用する必要があります。

    NRQLクエリをクリックして、クエリビルダーに移動します。

    ここで、クエリを表示し、手動で編集して必要なデータを取得できます。

NewsletterSignupsを更新 NrqlQuery

NR1 アプリに New Relic データを統合する前に、設計ガイドを参照してください。

New Relic アプリケーションには、折れ線グラフ、円グラフ、表グラフなど、合計 8 つのグラフがあります。 これらの各グラフは現在模擬データを示していますが、有用であるためには実際のデータを表示する必要があります。 まず、最上位のチャートNewsletter subscriptions per version [バージョンごとのニュースレター サブスクリプション]のデータのクエリに焦点を当てます。

データ エクスプローラーで作成したクエリを使用すると、このグラフに必要なデータがすでに用意されています。

技術的詳細

クエリでは、サブスクリプションの合計 ( SELECT count(*) FROM subscriptions ) を取得し、ページ バージョン ( FACET page_version ) ごとにグループ化し、時系列を過去 30 分間 ( SINCE 30 MINUTES AGO TIMESERIES ) にフォーカスします。

NRQL クエリの詳細については、 ドキュメントをご覧ください。

次に、NRQL クエリをNewsletter subscriptions per version [バージョンごとのニュースレターのサブスクリプション]チャートに渡す方法を学習します。

コースワークリポジトリのadd-nrql-components/ab-testディレクトリに変更します:

bash
$
cd nru-programmability-course/add-nrql-components/ab-test

このディレクトリには、コースのこの時点でアプリケーションに含まれることが予想されるコードが含まれています。 各レッスンの開始時に正しいディレクトリに移動することで、カスタム コードが残され、間違ったコードがレッスン間で持ち越されることがなくなります。

nerdlets/ab-test-nerdlet/newsletter-signups.jsで、 NewsletterSignupsのLineChartを更新します。 モック データを削除し、データ エクスプローラーで作成した NRQL クエリを使用します。

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
} from 'nr1';


const ACCOUNT_ID = 123456  // <YOUR NEW RELIC ACCOUNT ID>


export default class NewsletterSignups extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <NrqlQuery
                accountIds={[ACCOUNT_ID]}
                query="SELECT count(*) FROM subscription FACET page_version SINCE 30 MINUTES AGO TIMESERIES"
            >
                {
                    ({ data }) => {
                        return <LineChart data={data} fullWidth />;
                    }
                }
            </NrqlQuery>
        </div>
    }
}

重要

<YOUR NEW RELIC ACCOUNT ID>実際の New Relicアカウント IDに置き換えてください。

NrqlQueryでは、2 つのプロパティを設定します。

  • accountIds: クエリを実行するアカウントのID
  • query: 実行するクエリ

これらを使用すると、NR1 アプリはチャートに表示するデータを照会できます。

ヒント

NRQL を使用してチャートにデータを提供するための便利なプロパティqueryがあります。 NrqlQueryコンポーネントを使用したくない場合は、代わりにqueryプロパティを試してください。

<LineChart
    accountIds={<YOUR NEW RELIC ACCOUNT ID>}
    query="SELECT count(*) FROM subscription FACET page_version SINCE 30 MINUTES AGO TIMESERIES"
/>

accountIdsを指定する必要があることに注意してください。

nru-programmability-course/add-nrql-components/ab-testにある Nerdpack のルートに移動します。

Nerdpack の新しい UUID を生成します。

bash
$
nr1 nerdpack:uuid -gf

既存の Nerdpack を含むコースワーク リポジトリを複製したため、独自の一意の識別子を生成する必要があります。 この UUID は Nerdpack を New Relic アカウントにマッピングします。

アプリケーションをローカルで提供します。

bash
$
nr1 nerdpack:serve

https://one.newrelic.com?nerdpacks=localにアクセスし、 Apps [アプリ] > Your apps [あなたのアプリ]でアプリケーションを表示します。

Newsletter subscriptions by version [バージョン別のニュースレターのサブスクリプションには]、以前に定義した模擬データではなく、New Relic のデータベースからの実際のデータが表示されるようになりました。 アプリケーションが読み込まれるとチャートはデータを取得しますが、アプリケーションが開いている間はデータの取得を継続しないことに注意してください。 別のプロップを追加することでこれを修正できます。

ヒント

何かがうまくいかない場合は、 browserのデバッグ ツールを使用して問題を特定してください。

以下の点を確認してください:

  • レッスンからコードを正しくコピーしました
  • 新しいUUIDを生成しました
  • プロジェクト内の<YOUR NEW RELIC ACCOUNT ID>のすべてのインスタンスを実際の New Relicアカウント IDに置き換えました

pollIntervalを追加します:

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
} from 'nr1';


const ACCOUNT_ID = 123456  // <YOUR NEW RELIC ACCOUNT ID>


export default class NewsletterSignups extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <NrqlQuery
                accountIds={[ACCOUNT_ID]}
                query="SELECT count(*) FROM subscription FACET page_version SINCE 30 MINUTES AGO TIMESERIES"
                pollInterval={60000}
            >
                {
                    ({ data }) => {
                        return <LineChart data={data} fullWidth />;
                    }
                }
            </NrqlQuery>
        </div>
    }
}

重要

<YOUR NEW RELIC ACCOUNT ID>を実際の New Relicアカウント IDに置き換えてください。

pollInterval 、グラフの更新間隔（ミリ秒）です。 チャートが更新されるたびに、 New Relicから最新のデータが照会されます。 この場合、1 分ごとに更新されます。

PieChartに subscription

ここまで、 New RelicデータをNewsletter subscriptions per version [バージョンごとのニュースレター サブスクリプション]に渡す方法を見てきました。次は、Total subscriptions per version [バージョンごとの合計サブスクリプション]に進みます。 これら 2 つのグラフは、バージョン別にグループ化されたサブスクリプション イベント データを比較するという点で似ています。 Newsletter subscriptions per version [バージョンごとのニュースレター サブスクリプション]とTotal subscriptions per version [バージョンごとの合計 サブスクリプション]の主な違いは次のとおりです。

  • 1つは折れ線グラフ、もう1つは円グラフです
  • 1つは時系列データを表示し、もう1つは全期間の合計を表示します

nerdlets/ab-test-nerdlet/total-subscriptions.jsで、 TestDistributionsコンポーネントを更新し、モック データを削除して、Newsletter subscriptions per version [バージョンごとのニュースレターのサブスクリプション]に使用したのと同じ NRQL クエリをPieChartに入力しますが、 TIMESERIESとSINCE句は異なります。

import React from 'react';
import {
    HeadingText,
    NrqlQuery,
    PieChart,
} from 'nr1';


const ACCOUNT_ID = 123456  // <YOUR NEW RELIC ACCOUNT ID>


export default class TotalSubscriptions extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Total subscriptions per version
            </HeadingText>
            <NrqlQuery
                accountIds={[ACCOUNT_ID]}
                query="SELECT count(*) FROM subscription FACET page_version SINCE 7 DAYS AGO"
                pollInterval={60000}
            >
                {
                    ({ data }) => {
                        return <PieChart data={data} fullWidth />
                    }
                }
            </NrqlQuery>
        </div>
    }
}

重要

<YOUR NEW RELIC ACCOUNT ID>を実際の New Relicアカウント IDに置き換えてください。

円グラフには数値データのみが表示されるため、 TIMESERIES句は必要ありません。 Total subscriptions per version [バージョンごとの合計サブスクリプションには]、これまでのサブスクリプションの合計が表示される必要があるため、 SINCE句は必要ありません。

Nerdpack をローカルで提供して、アプリケーションを表示し、実際のデータを提供するチャートを確認します。

Total subscriptions per version [バージョンごとの合計]サブスクリプションには、デモ アプリケーションの両方のバージョンのこれまでのサブスクリプションの合計が表示されるようになりました。

ヒント

何かがうまくいかない場合は、 browserのデバッグ ツールを使用して問題を特定してください。

以下の点を確認してください:

  • レッスンからコードを正しくコピーしました
  • 新しいUUIDを生成しました
  • プロジェクト内の<YOUR NEW RELIC ACCOUNT ID>のすべてのインスタンスを実際の New Relicアカウント IDに置き換えました

よくやった！ New Relicのデータベースから実際のサブスクリプション データをクエリするためのチャートをいくつか構成しました。

pageViewイベントデータをグラフに入力します

まだ模擬データを使用している残りのグラフを検討してください。

  • バージョンごとの合計解約数
  • バージョン A - ページビューとサブスクリプション
  • バージョン B - ページビューとサブスクリプション
  • バージョン A - ページビュー
  • バージョン B - ページビュー
  • 過去のテスト

これらのグラフの一部にはページビュー データを表示する必要があります。 幸いなことに、デモ アプリケーションでは、サブスクリプションの場合と同様に、ページ ビューごとにカスタム イベントが作成されます。 Version A - Page views vs. subscriptions [バージョン A - ページ ビューとサブスクリプション]とVersion B - Page views vs. subscriptions [バージョン B - ページ ビューとサブスクリプションには] つのソースからのデータが必要なので、今のところはこれらを無視し、Version A - Page views [バージョン A - ページ ビュー]とVersion B - Page views [バージョン B - ページ ビュー]に焦点を当てます。

page-views.jsでは、 VersionPageViewsからモック データを削除し、 NrqlQueryコンポーネントを使用してクエリを指定します。

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
} from 'nr1';


const ACCOUNT_ID = 123456  // <YOUR NEW RELIC ACCOUNT ID>


export default class VersionPageViews extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views
            </HeadingText>
            <NrqlQuery
                accountIds={[ACCOUNT_ID]}
                query={`SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' TIMESERIES`}
                pollInterval={60000}
            >
                {
                    ({ data }) => {
                        return <LineChart data={data} fullWidth />;
                    }
                }
            </NrqlQuery>
        </div>
    }
}

重要

<YOUR NEW RELIC ACCOUNT ID>実際の New Relicアカウント IDに置き換えてください。

Nerdpack をローカルで提供して、アプリケーションを表示し、実際のデータを提供するチャートを確認します。

これらの新しいクエリでは、 subscriptionイベントではなくpageViewカスタム イベントを取得します。 また、 page_versionでグループ化するFACETではなく、特定のpage_versionにフィルター処理するWHERE句も使用します。

ヒント

何かがうまくいかない場合は、 browserのデバッグ ツールを使用して問題を特定してください。

以下の点を確認してください:

  • レッスンからコードを正しくコピーしました
  • 新しいUUIDを生成しました
  • プロジェクト内の<YOUR NEW RELIC ACCOUNT ID>のすべてのインスタンスを実際の New Relicアカウント IDに置き換えました

ふう、クエリはたくさんありますが、アプリケーションは素晴らしいですね! 実際のデータが 4 つのグラフに表示されます。 2 つのソースからのデータが必要であるために無視した 2 つのグラフを覚えていますか?

  • バージョン A - ページビューとサブスクリプション
  • バージョン B - ページビューとサブスクリプション

NRQL には複数のソースからデータをクエリする方法がないため、これまで扱っていたチャートとは異なる方法でこれらを処理する必要があります。 次のレッスンでは、これら 2 つのグラフにデータを提供する方法を学習します。

コース

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。 次のレッスン「NRQL データのカスタマイズ」に進みます。

Copyright © 2024 New Relic株式会社。
採用情報サービス利用規約DMCAポリシープライバシー通知Cookie ポリシー英国現代奴隷法

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.