ユーザー体験の地域別の違いを直感的に把握しよう！

New Relicはダッシュボード上でアプリやインフラの状態を可視化する豊富なチャートを用意してますが、ダッシュボード上で地域別のパフォーマンスなどの違いを視覚化して傾向の違いを把握できる地域別マップのチャートが登場しました！設定方法について紹介です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/de805f31-75e4-d956-d8aa-fc3886294bd9.png)

地域毎に描写できますので日本のどの地域でユーザー体験が劣化しているかまで掘り下げて把握できますよ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/2a7358ea-9e4d-fa95-22b0-af8b7bd66f15.png)

ユーザー体験が悪化した際にクライアントのネットワーク起因なのか？サーバーサイド起因なのか？切り分けに苦慮されているケースがありませんでしょうか。地域別マップを利用することでユーザー体験が悪化した際にインターネットの経路の問題で特定の国からのみネットワーク疎通が悪くクライアント⇔アプリケーション間のパフォーマンスが悪化しているのか？それは特定の地域のみ悪化しているのか？を直感的に把握することができますよ。

また、どの国・地域からのアクセスが多いのか利用傾向を分析する際にも利用できますので、ビジネス的分析の用途でも利用できます。


:::note info
最新のアップデートの詳細はこちら
[New Relic アップデート(2024年7月)
](https://newrelic.com/jp/blog/nerdlog/new-relic-update-202407 "New Relic アップデート(2024年7月)")[New Relic アップデート一覧
](https://newrelic.com/jp/blog/nerdlog/new-relic-update  "New Relic アップデート一覧")
:::

# 試してみよう！
それでは設定の仕方を見ていきます！

まずはチャートで可視化するデータをNRQLクエリで取得します。地域別マップはCountry CodeやRegion Codeが含まれているデータであれば、地域別マップを描写することができます。

どのデータにCountry CodeとRegion Codeが含まれているかは以下の公式ドキュメントに記載されておりますのでご確認ください。

- Browser
    - [countryCode](https://docs.newrelic.com/jp/attribute-dictionary/?event=PageAction&attribute=countryCode)
    - [regionCode](https://docs.newrelic.com/jp/attribute-dictionary/?event=PageView&attribute=regionCode)
- Mobile
    - [countryCode](https://docs.newrelic.com/jp/attribute-dictionary/?event=Mobile&attribute=countryCode)
    - [regionCode](https://docs.newrelic.com/jp/attribute-dictionary/?event=Mobile&attribute=regionCode)

## 設定の流れ

New Relic UI 左下にある[Query your data]をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/34d8c17b-2445-e176-c36b-d211cb5cbf73.png" width="40%">

Browserの地域別のPageView数をマップに描写してみます。

```sql
FROM PageView SELECT uniqueCount(session) 
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/81528011-05e5-499e-963c-18b2a0a3429a.png" width="60%">

「Chart type」を「Performance Map」に変更します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/5f54fda6-2fab-2d64-0908-01fa7abca86d.png" width="60%">

これだけで地域マップが作成されます。簡単ですね！
「Add to dashboard」をクリックして、ダッシュボードに追加しましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/b9d34821-69ee-79ed-3f27-4670dbf5d154.png" width="80%">

### Tips
Core Web Vitalsの値を地域マップに描写する場合は、Core Web Vitalsの数値によって3色（Good：緑、Need improvement:黄、Poor:赤)に色分けして描写することができます。

LCP(LargestContentfulPaint）の集計結果を例に描写を試してみます。

```sql
FROM PageViewTiming SELECT percentile(largestContentfulPaint, 75)
```

色分け設定は「Customize this visualization」の「Metrics types」で設定できます。
「Metric Type」で「Core Web Vitals」を選択、「Core Web vitals type」で集計したCore Web Vitalsのタイプを選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/620af52c-b527-8304-5322-2d329fbe2fd4.png" width="35%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/1d85b343-a274-0064-aa43-cf78895cb2ab.png" width="39%">

これだけの設定で、どの地域でCore Web Vitalsの値が悪化しているのかより視覚的に把握しやすくなります！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/63699170-8605-66ce-01c3-b07c968a0bd4.png" width="80%">

Ascending(昇順)かDescending(降順)で色を変更することもできます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/3fd3f406-611b-02f2-f676-ffdf1fef5b64.png" width="90%">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/8fda634c-e435-d850-56de-09c8fad1df2c.png" width="90%">

# まとめ
本記事では、New Relicで計測しているBrowserのデータを例に地域別マップのチャートの設定方法についてご案内しました。ユーザー体験が劣化する事象が生じた際に、地域別に傾向の違いがあるのかをダッシュボード上で直感的に把握することができますよ！簡単なのでぜひ試してみてください。

:::note info
[New Relic株式会社のQiita OrganizationOrganization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::

:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::