팁
이 강의는 처음부터 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의 웹 인터페이스에서 데이터 쿼리를 실험해 보세요.
New Relic 홈페이지의 상단 탐색 메뉴에서 Data explorer [데이터 탐색기] 로 이동하세요.
데이터 탐색기를 사용 하면 텔레메트리 데이터를 탐색할 수 있습니다.
측정항목
이벤트
로그
트레이스
백앤드가 New Relic에 뉴스레터 구독 이벤트를 제출하므로 이 화면에서 보실 수 있습니다.
Subscription [맞춤형 대시보드] 메뉴에서 Custom events [구독을] 선택하세요.
이는 지난 30분 동안의 분당 구독 이벤트 합계를 NRDB에 쿼리하고 해당 데이터를 차트에 표시합니다.
이러한 구독 이벤트와 연관된 속성 목록을 보려면 Dimensions [차원을] 클릭하십시오.
이러한 차원을 사용하여 구독 이벤트를 필터링하고 그룹화할 수 있습니다. 차트 위에 있는 NRQL 쿼리를 확인하세요. 이는 이러한 측정기준을 기반으로 하는 차트의 기본 쿼리를 보여줍니다.
page-version [페이지 버전 측정] 기준을 클릭하면 FACET page_version 기준으로 그룹화되는 쿼리 변경사항을 볼 수 있습니다.
데이터 탐색기에는 데이터 필터링 및 정렬을 위한 두 가지 옵션이 제공됩니다.
방금 만든 것과 같은 사용자 인터페이스(UI) 선택
NRQL(New Relic 쿼리 언어)
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 쿼리에 대해 자세히 알아보려면 설명서를 살펴보세요.
다음으로, Newsletter subscriptions per version [버전별 뉴스레터 구독] 차트에 NRQL 쿼리를 전달하는 방법을 알아봅니다.
교과 과정 저장소 의 add-nrql-components/ab-test 디렉터리로 변경합니다.
$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> 실제 뉴렐릭 계정 ID 로 바꿔야 합니다.
NrqlQuery 에서는 두 개의 소품을 설정합니다.
accountIds: 쿼리하는 계정의 IDquery: 수행할 쿼리
이를 통해 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를 생성하십시오.
$nr1 nerdpack:uuid -gf기존 Nerdpack이 포함된 교과 과정 저장소를 복제했으므로 고유한 식별자를 생성해야 합니다. 이 UUID는 Nerdpack을 New Relic 계정에 매핑합니다.
애플리케이션을 로컬로 제공합니다.
$nr1 nerdpack:servehttps://one.newrelic.com?nerdpacks=local 로 이동하여 Apps [앱] > Your apps [클릭하면] 아래에서 애플리케이션을 확인하세요.
Newsletter subscriptions by version [버전별 뉴스레터 구독은] 이제 이전에 정의한 모의 데이터가 아닌 New Relic 데이터베이스의 실제 데이터를 표시합니다. 차트는 애플리케이션이 로드될 때 데이터를 가져오지만 애플리케이션이 열려 있는 동안에는 데이터를 계속 가져오지 않습니다. 다른 소품을 추가하여 이 문제를 해결할 수 있습니다.
팁
문제가 작동하지 않으면 브라우저의 디버그 도구를 사용하여 문제를 식별해 보세요.
다음 사항을 확인하세요.
- 강의에서 코드를 올바르게 복사했습니다.
- 새로운 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
Newsletter subscriptions per version [버전별 뉴스레터 구독] 에 New Relic 데이터를 전달하는 방법을 살펴보았으므로 이제 Total subscriptions per version [버전별 전체 구독] 으로 넘어갈 차례입니다. 이 두 차트는 구독 이벤트 데이터를 버전별로 그룹화하여 비교한다는 점에서 유사합니다. Newsletter subscriptions per version [버전별 뉴스레터 구독 수] 와 Total subscriptions per version [버전별 총 구독 수] 의 주요 차이점은 다음과 같습니다.
- 하나는 꺾은선형 차트이고 하나는 원형 차트입니다.
- 하나는 시계열 데이터를 표시하고 다른 하나는 전체 시간 합계를 표시합니다.
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 [버전별 총 구독자 수는] 두 데모 버전 모두의 전체 구독자 수 합계를 표시합니다.
팁
문제가 작동하지 않으면 브라우저의 디버그 도구를 사용하여 문제를 식별해 보세요.
다음 사항을 확인하세요.
- 강의에서 코드를 올바르게 복사했습니다.
- 새로운 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> 실제 뉴렐릭 계정 ID 로 바꿔야 합니다.
Nerdpack이 로컬로 제공되면 애플리케이션을 보고 실제 데이터를 제공하는 차트를 확인하세요 .
이러한 새 쿼리에서는 subscription 이벤트 대신 pageView 사용자 정의 대시보드를 가져옵니다. 또한 WHERE 절을 사용하여 FACET 대신 특정 page_version 로 필터링하여 page_version 별로 그룹화합니다.
팁
문제가 작동하지 않으면 브라우저의 디버그 도구를 사용하여 문제를 식별해 보세요.
다음 사항을 확인하세요.
- 강의에서 코드를 올바르게 복사했습니다.
- 새로운 UUID를 생성했습니다.
- 프로젝트에 있는 모든
<YOUR NEW RELIC ACCOUNT ID>을(를) 실제 New Relic 계정 ID로 대체했습니다.
휴, 쿼리가 너무 많지만 애플리케이션이 정말 멋져 보이네요! 이제 4개의 차트에 실제 데이터가 표시됩니다. 두 가지 소스의 데이터가 필요하기 때문에 무시했던 두 차트를 기억하시나요?
- 버전 A - 페이지 조회수와 구독수
- 버전 B - 페이지 조회수와 구독수
NRQL에는 여러 소스에서 데이터를 쿼리하는 방법이 없기 때문에 지금까지 다루었던 차트에서와 다르게 이를 처리해야 합니다. 다음 강의에서는 이 두 차트에 데이터를 제공하는 방법을 배우게 됩니다.
코스
이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 다음 강의인 NRQL 데이터 맞춤설정으로 계속 진행하세요.