Uniapp 開発フレームワークに基づくミニアプリの導入¶

更新履歴

2026.8.11：

@cloudcare/rum-uniapp：allowTraceHeaderWithoutSession 設定を追加。デフォルト値は false。有効にすると、現在の Session が RUM サンプリングにヒットしなかった場合でも、allowedTracingOrigins にヒットするリクエストには Trace Header が注入されますが、その Session の RUM データが強制的にサンプリングされたり、送信されたりすることはありません。

2022.9.29：初期化パラメータに isIntakeUrl 設定を追加。リクエストリソースの URL に基づいて、対応するリソースデータを収集するかどうかを判断します。デフォルトではすべて収集します。

2022.3.29：

traceType 設定を追加。分散トレーシングツールのタイプを設定します。設定しない場合のデフォルトは ddtrace です。現在は ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent の 6 種類のデータタイプをサポートしています。
allowedTracingOrigins を追加。トレースコレクターに必要なヘッダーを注入することを許可するすべてのリクエストのリストです。リクエストのオリジンまたは正規表現を指定できます。

前提条件¶

DataKit をインストールします。

アプリケーションの導入¶

Guance コンソールにログインし、ユーザーアクセスモニタリング（RUM） ページに移動し、左上のアプリケーションを作成をクリックして、新しいアプリケーションの作成を開始します。

右側で、インストール設定の導入方法を選択し、右側の パラメータ設定 をクリックして、関連する設定パラメータを入力した後、プロジェクトにコピーして使用できます。

使用方法¶

Uniapp プロジェクトのエントリファイル main.js の先頭に、以下の方法でコードを導入します。

NPM¶

VUE 2VUE 3

導入方法（Uniapp 公式の npm 導入方法を参照できます）

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('@cloudcare/rum-uniapp')
// RUM を初期化
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>', // 必須、Datakit ドメイン名アドレス。WeChat ミニプログラム管理バックエンドでドメインホワイトリストに追加する必要があります
  applicationId: '<アプリケーション ID>', // 必須、dataflux プラットフォームで生成されたアプリケーション ID
  env: 'testing', // オプション、ミニアプリの環境
  version: '1.0.0', // オプション、ミニアプリのバージョン
  service: 'miniapp', // 現在のアプリケーションのサービス名
  trackInteractions: true, // ユーザー行動データ
  sampleRate: 100, // メトリクスデータ収集のパーセンテージ。100 は全収集、0 は収集なし
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // オプション、トレースコレクターに必要なヘッダーを注入することを許可するすべてのリクエストのリスト。リクエストのオリジンまたは正規表現を指定できます
})
//#endif
....

導入方法（Uniapp 公式の npm 導入方法を参照できます）

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from '@cloudcare/rum-uniapp'
// RUM を初期化
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>', // 必須、Datakit ドメイン名アドレス。WeChat ミニプログラム管理バックエンドでドメインホワイトリストに追加する必要があります
  applicationId: '<アプリケーション ID>', // 必須、dataflux プラットフォームで生成されたアプリケーション ID
  env: 'testing', // オプション、ミニアプリの環境
  version: '1.0.0', // オプション、ミニアプリのバージョン
  service: 'miniapp', // 現在のアプリケーションのサービス名
  trackInteractions: true, // ユーザー行動データ
  sampleRate: 100, // メトリクスデータ収集のパーセンテージ。100 は全収集、0 は収集なし
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // オプション、トレースコレクターに必要なヘッダーを注入することを許可するすべてのリクエストのリスト。リクエストのオリジンまたは正規表現を指定できます
})
//#endif
....

CDN¶

VUE 2VUE 3

ファイルをダウンロードしてローカルに導入します（ダウンロードアドレス）

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('./dataflux-rum-miniapp.js'); // js ファイルのローカルパス
// RUM を初期化
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>', // 必須、Datakit ドメイン名アドレス。WeChat ミニプログラム管理バックエンドでドメインホワイトリストに追加する必要があります
  applicationId: '<アプリケーション ID>', // 必須、dataflux プラットフォームで生成されたアプリケーション ID
  env: 'testing', // オプション、ミニアプリの環境
  version: '1.0.0', // オプション、ミニアプリのバージョン
  service: 'miniapp', // 現在のアプリケーションのサービス名
  trackInteractions: true, // ユーザー行動データ
  sampleRate: 100, // メトリクスデータ収集のパーセンテージ。100 は全収集、0 は収集なし
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // オプション、トレースコレクターに必要なヘッダーを注入することを許可するすべてのリクエストのリスト。リクエストのオリジンまたは正規表現を指定できます
})
//#endif
....

ファイルをダウンロードしてローカルに導入します（ダウンロードアドレス）

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from './dataflux-rum-miniapp.js'; // js ファイルのローカルパス
// RUM を初期化
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>', // 必須、Datakit ドメイン名アドレス。WeChat ミニプログラム管理バックエンドでドメインホワイトリストに追加する必要があります
  applicationId: '<アプリケーション ID>', // 必須、dataflux プラットフォームで生成されたアプリケーション ID
  env: 'testing', // オプション、ミニアプリの環境
  version: '1.0.0', // オプション、ミニアプリのバージョン
  service: 'miniapp', // 現在のアプリケーションのサービス名
  trackInteractions: true, // ユーザー行動データ
  sampleRate: 100, // メトリクスデータ収集のパーセンテージ。100 は全収集、0 は収集なし
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // オプション、トレースコレクターに必要なヘッダーを注入することを許可するすべてのリクエストのリスト。リクエストのオリジンまたは正規表現を指定できます
})
//#endif
....

設定¶

初期化パラメータ¶

パラメータ	タイプ	必須	デフォルト値	説明
`applicationId`	String	はい		Guance で作成されたアプリケーション ID。
`datakitOrigin`	String	はい		DataKit データ送信 Origin； ❗️ ミニプログラム管理バックエンドで request のホワイトリストに追加する必要があります。
`env`	String	いいえ		ミニアプリアプリケーションの現在の環境。例：prod：本番環境；gray：カナリア環境；pre：ステージング環境；common：日常環境；local：ローカル環境。
`version`	String	いいえ		ミニアプリアプリケーションのバージョン番号。
`service`	String	いいえ		現在のアプリケーションのサービス名。デフォルトは `miniapp` で、カスタム設定をサポートします。
`sampleRate`	Number	いいえ	`100`	メトリクスデータ収集のパーセンテージ。
`100` は全収集、`0` は収集なし
`trackInteractions`	Boolean	いいえ	`false`	ユーザー行動収集を有効にするかどうか。
`traceType`	Enum	いいえ	`ddtrace`	分散トレーシングツールのタイプを設定します。設定しない場合のデフォルトは `ddtrace` です。現在は `ddtrace`、`zipkin`、`skywalking_v3`、`jaeger`、`zipkin_single_header`、`w3c_traceparent` の 6 種類のデータタイプをサポートしています。 ❗️ 1. `opentelemetry` は `zipkin_single_header`、`w3c_traceparent`、`zipkin`、`jaeger` の 4 種類をサポートしています。 2. 対応するタイプの traceType を設定するには、対応する API サービスに異なる `Access-Control-Allow-Headers` を設定する必要があります。詳細は APM と RUM の関連付けを参照してください。
`traceId128Bit`	Boolean	いいえ	`false`	`traceID` を 128 バイトで生成するかどうか。`traceType` に対応します。現在サポートしているタイプは `zipkin`、`jaeger` です。
`allowedTracingOrigins`	Array	いいえ	[`[]`	`ddtrace` コレクターに必要なヘッダーを注入することを許可するすべてのリクエストのリスト。リクエストのオリジンまたは正規表現を指定できます。オリジン：`プロトコル（// を含む）、ドメイン名（または IP アドレス）[およびポート番号]`。例：`["https://api.example.com", /https:\\/\\/.\\.my-api-domain\\.com/]`*
`allowTraceHeaderWithoutSession`	Boolean	いいえ	`false`	現在の Session がサンプリングにヒットしなかった場合でも、`allowedTracingOrigins` にヒットするリクエストに Trace Header を注入するかどうか。有効にしても、その Session の RUM データが強制的にサンプリングされたり送信されたりすることはありません。
`isIntakeUrl`	Function	いいえ	`function(url) {return false}`	リクエストリソースの URL に基づいて、対応するリソースデータを収集するかどうかを判断するカスタムメソッド。デフォルトではすべて収集します。戻り値：`false` は収集する、`true` は収集しないことを意味します。 ❗️ 1. このパラメータメソッドの戻り値は Boolean 型である必要があります。そうでない場合は無効なパラメータと見なされます。 2. バージョン要件は 2.1.13 以上です。

注意：

datakitOrigin に対応する DataKit ドメイン名は、ミニプログラム管理バックエンドで request のホワイトリストに追加する必要があります。
現在、各プラットフォームのミニアプリはパフォーマンスデータ API の公開が完全に統一されていないため、一部のパフォーマンスデータ（ミニアプリ起動、ミニアプリパッケージダウンロード、スクリプトインジェクション など）を完全に収集できない場合があります。これらのデータは、WeChat プラットフォーム以外では欠落する可能性があります。
現在、各プラットフォームのミニアプリのリクエストリソース API uni.request、uni.downloadFile の戻りデータの profile フィールドは、WeChat ミニプログラムの iOS システムでのみ戻りがサポートされていません。そのため、収集されるリソース情報のうち、timing 関連のデータが完全に収集されない可能性があります。現在のところ解決策はありません：request、downloadFile、API サポート状況。
trackInteractions ユーザー行動収集を有効にした場合、WeChat ミニプログラムの制限により、コントロールの内容や構造データを収集できません。そのため、ミニアプリ SDK では宣言的プログラミングを採用しています。テンプレートに data-name 属性を設定することで、インタラクティブ要素に名前を追加し、後で操作レコードを特定しやすくします。例：

 <button bindtap="bindSetData" data-name="setData">setData</button>