Skip to content

Eum

EUM（End User Monitoring）

📚 情報ソース

このドキュメントは以下の情報源を基に作成されています：

主要ソース

補足ソース

  • EUMのベストプラクティス: JavaScriptエージェント設定とパフォーマンス最適化
  • 実運用環境の設定例: グローバルユーザー監視とコンバージョン追跡

📚 公式ドキュメント: End User Monitoring

EUM（End User Monitoring）は、実際のユーザーのブラウザやモバイルアプリケーションからのパフォーマンスデータを収集し、ユーザー体験を監視します。

基本概念

EUMは以下の情報を収集します： - ページロード時間 - JavaScriptエラー - AJAXリクエスト - ユーザーセッション - ブラウザ情報 - 地理的位置

基本設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
com.instana.plugin.eum:
  instrumentation:
    jsAgentUrl: 'https://eum.instana.io/eum.min.js'
    reportingUrl: 'https://eum-collector.instana.io'
    trackSessions: true
    autoPageDetection: true
    websites:
      - name: 'Production Website'
        key: '[Website-Key]'
        enabled: true
        selector:
          matchExpressions:
            - key: 'url/path'
              operator: 'StartWith'
              values:
                - '/'

設定項目の詳細

項目 説明 デフォルト値 推奨値 取得方法
jsAgentUrl JavaScriptエージェントURL - Instana提供URL Instanaコンソールから
reportingUrl データ送信先URL - Instana提供URL Instanaコンソールから
trackSessions セッション追跡 false true -
autoPageDetection 自動ページ検出 false true -
key ウェブサイトキー - 必須 Instanaコンソールから生成

実践的な使用例

1. 基本的なWebサイト監視

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
com.instana.plugin.eum:
  instrumentation:
    jsAgentUrl: 'https://eum.instana.io/eum.min.js'
    reportingUrl: 'https://eum-collector.instana.io'
    trackSessions: true
    autoPageDetection: true
    websites:
      - name: 'Corporate Website'
        key: 'abc123def456'
        enabled: true

HTMLへの組み込み: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <!-- Instana EUM Script -->
    <script>
        (function(s,t,a,n){s[t]||(s[t]=a,n=s[a]=function(){n.q.push(arguments)},
        n.q=[],n.v=2,n.l=1*new Date)})(window,"InstanaEumObject","ineum");
        ineum('reportingUrl', 'https://eum-collector.instana.io');
        ineum('key', 'abc123def456');
        ineum('trackSessions');
    </script>
    <script async crossorigin="anonymous" src="https://eum.instana.io/eum.min.js"></script>
</head>
<body>
    <!-- Your content -->
</body>
</html>

2. 複数ウェブサイトの監視

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
com.instana.plugin.eum:
  instrumentation:
    jsAgentUrl: 'https://eum.instana.io/eum.min.js'
    reportingUrl: 'https://eum-collector.instana.io'
    trackSessions: true
    autoPageDetection: true
    websites:
      # 本番サイト
      - name: 'Production Website'
        key: 'prod-key-123'
        enabled: true
        selector:
          matchExpressions:
            - key: 'url/host'
              operator: 'Equals'
              values:
                - 'www.example.com'

      # ステージングサイト
      - name: 'Staging Website'
        key: 'staging-key-456'
        enabled: true
        selector:
          matchExpressions:
            - key: 'url/host'
              operator: 'Equals'
              values:
                - 'staging.example.com'

      # 管理画面
      - name: 'Admin Portal'
        key: 'admin-key-789'
        enabled: true
        selector:
          matchExpressions:
            - key: 'url/path'
              operator: 'StartWith'
              values:
                - '/admin'

3. SPAアプリケーション監視

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
com.instana.plugin.eum:
  instrumentation:
    jsAgentUrl: 'https://eum.instana.io/eum.min.js'
    reportingUrl: 'https://eum-collector.instana.io'
    trackSessions: true
    autoPageDetection: true
    spa: true  # Single Page Application
    websites:
      - name: 'React Application'
        key: 'react-app-key'
        enabled: true

React統合例: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Instana EUM初期化
    if (window.ineum) {
      window.ineum('reportingUrl', 'https://eum-collector.instana.io');
      window.ineum('key', 'react-app-key');
      window.ineum('trackSessions');
      window.ineum('page', window.location.pathname);
    }
  }, []);

  return (
    <div className="App">
      {/* Your React components */}
    </div>
  );
}

4. カスタムイベント追跡

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
com.instana.plugin.eum:
  instrumentation:
    jsAgentUrl: 'https://eum.instana.io/eum.min.js'
    reportingUrl: 'https://eum-collector.instana.io'
    trackSessions: true
    autoPageDetection: true
    customEvents: true
    websites:
      - name: 'E-commerce Site'
        key: 'ecommerce-key'
        enabled: true

カスタムイベントの送信: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// 商品閲覧イベント
ineum('reportEvent', 'product_view', {
  productId: '12345',
  productName: 'Sample Product',
  category: 'Electronics'
});

// カート追加イベント
ineum('reportEvent', 'add_to_cart', {
  productId: '12345',
  quantity: 1,
  price: 99.99
});

// 購入完了イベント
ineum('reportEvent', 'purchase', {
  orderId: 'ORD-67890',
  totalAmount: 199.98,
  items: 2
});

5. ユーザー情報の追跡

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
com.instana.plugin.eum:
  instrumentation:
    jsAgentUrl: 'https://eum.instana.io/eum.min.js'
    reportingUrl: 'https://eum-collector.instana.io'
    trackSessions: true
    autoPageDetection: true
    trackUserInfo: true
    websites:
      - name: 'User Portal'
        key: 'portal-key'
        enabled: true

ユーザー情報の設定: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// ログイン後にユーザー情報を設定
ineum('user', 'user123', 'user@example.com', 'John Doe');

// またはオブジェクト形式
ineum('user', {
  id: 'user123',
  email: 'user@example.com',
  name: 'John Doe',
  plan: 'premium'
});

ベストプラクティス

パフォーマンス

  1. 非同期ロード 

    1
2
3
4
5
    <!-- 推奨: 非同期ロード -->
<script async crossorigin="anonymous" src="https://eum.instana.io/eum.min.js"></script>

<!-- 非推奨: 同期ロード（ページロードをブロック） -->
<script src="https://eum.instana.io/eum.min.js"></script>

  2. サンプリング設定 

    1
2
    // 高トラフィックサイトではサンプリングを使用
ineum('sampleRate', 0.1);  // 10%のトラフィックのみ追跡

  3. 遅延初期化 

    1
2
3
4
5
6
7
8
    // ページロード後に初期化
window.addEventListener('load', function() {
  if (window.ineum) {
    ineum('reportingUrl', 'https://eum-collector.instana.io');
    ineum('key', 'your-key');
    ineum('trackSessions');
  }
});

セキュリティ

  1. 機密情報のフィルタリング 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    // URLパラメータのフィルタリング
ineum('ignoreUrls', [
  /password/i,
  /token/i,
  /secret/i
]);

// エラーメッセージのフィルタリング
ineum('ignoreErrorMessages', [
  /password/i,
  /credit card/i
]);

  2. CORS設定 

    1
2
3
4
    # サーバー側でCORSヘッダーを設定
Access-Control-Allow-Origin: https://eum-collector.instana.io
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

プライバシー

  1. 個人情報の保護 

    1
2
3
4
5
6
    // IPアドレスの匿名化
ineum('anonymizeIP', true);

// ユーザーIDのハッシュ化
const hashedUserId = hashFunction(userId);
ineum('user', hashedUserId);

  2. Cookie同意の実装 

    1
2
3
4
5
6
    // Cookie同意後にEUMを有効化
if (userConsentedToCookies()) {
  ineum('reportingUrl', 'https://eum-collector.instana.io');
  ineum('key', 'your-key');
  ineum('trackSessions');
}

トラブルシューティング

問題1: データが送信されない

症状: - Instanaコンソールにデータが表示されない - ブラウザコンソールにエラーなし

原因と解決策:

  1. 設定の確認 

    1
2
3
4
5
6
    // ブラウザコンソールで確認
console.log(window.ineum);
console.log(window.InstanaEumObject);

// 設定が正しいか確認
ineum('getConfig');

  2. ネットワークタブの確認 

    1
2
    ブラウザの開発者ツール → Network タブ
eum-collector.instana.io へのリクエストを確認

  3. キーの確認 

    1
2
    // 正しいキーが設定されているか確認
ineum('key', 'correct-key-here');

問題2: ページロード時間が正確でない

症状: - ページロード時間が異常に長い/短い

原因と解決策:

  1. スクリプトの配置 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
    <!-- 推奨: <head>内の早い位置 -->
<head>
    <script>
        (function(s,t,a,n){s[t]||(s[t]=a,n=s[a]=function(){n.q.push(arguments)},
        n.q=[],n.v=2,n.l=1*new Date)})(window,"InstanaEumObject","ineum");
        ineum('reportingUrl', 'https://eum-collector.instana.io');
        ineum('key', 'your-key');
    </script>
    <script async src="https://eum.instana.io/eum.min.js"></script>
</head>

  2. タイミングAPIの確認 

    1
2
3
4
5
6
    // Performance APIが利用可能か確認
if (window.performance && window.performance.timing) {
  console.log('Performance API available');
} else {
  console.log('Performance API not available');
}

問題3: SPAでページ遷移が追跡されない

症状: - Single Page Applicationでページ遷移が記録されない

原因と解決策:

  1. 手動ページ追跡 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    // React Router例
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    if (window.ineum) {
      ineum('page', location.pathname);
    }
  }, [location]);
}

// Vue Router例
router.afterEach((to, from) => {
  if (window.ineum) {
    window.ineum('page', to.path);
  }
});

  2. 自動ページ検出の有効化 

    1
    ineum('autoPageDetection', true);

FAQ

Q1: EUMとSynthetic監視の違いは？

A: - EUM: 実際のユーザーの体験を測定。実際のデバイス、ネットワーク、ブラウザ。 - Synthetic: シミュレーションによる定期的なチェック。問題の事前検出。

両方を組み合わせることで、包括的な監視が可能です。

Q2: モバイルアプリも監視できますか？

A: はい、Instanaはモバイルアプリ用のSDKも提供しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// iOS (Swift)
import InstanaAgent

Instana.setup(
    key: "your-key",
    reportingURL: URL(string: "https://eum-collector.instana.io")!
)

// Android (Kotlin)
import com.instana.android.Instana

Instana.setup(
    this,
    InstanaConfig(
        reportingURL = "https://eum-collector.instana.io",
        key = "your-key"
    )
)

Q3: パフォーマンスへの影響は？

A: 適切に実装すれば、影響は最小限です：

  • 非同期ロード: ページロードをブロックしない
  • 軽量: スクリプトサイズは約30KB（gzip圧縮後）
  • サンプリング: 高トラフィックサイトではサンプリングを使用
1
2
// サンプリング設定
ineum('sampleRate', 0.1);  // 10%のみ追跡

Q4: GDPRに準拠していますか？

A: はい、以下の機能でGDPR準拠をサポートします：

1
2
3
4
5
6
7
8
9
// IPアドレスの匿名化
ineum('anonymizeIP', true);

// Cookie同意の実装
if (userConsented) {
  ineum('trackSessions');
}

// データ保持期間の設定（Instanaコンソールで設定）

Q5: カスタムメトリクスを送信できますか？

A: はい、カスタムイベントとメトリクスを送信できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// カスタムイベント
ineum('reportEvent', 'custom_action', {
  action: 'button_click',
  value: 'submit_form'
});

// カスタムメトリクス
ineum('reportMetric', 'custom_metric', 123.45);

// カスタムエラー
ineum('reportError', new Error('Custom error message'));

関連ドキュメント: - Synthetic監視 - トレーシング設定 - ベストプラクティス