すべてのプロダクト
Search
ドキュメントセンター

Quick Tracking:React Native SDK

最終更新日:Jun 08, 2025

統合

QuickTracking React Native SDK は、QuickTracking ネイティブクライアント追跡 SDK に基づく拡張機能です。 グローバルプロパティ、ページプロパティ、カスタムイベントなど、QT 追跡で一般的に使用される API をカプセル化します。

React Native SDK の統合

Npm オンラインアドレス: react-native-quicktracking-analytics-module

プロジェクトに npm パッケージをダウンロードする

# npm
npm install react-native-quicktracking-analytics-module

# yarn
yarn add react-native-quicktracking-analytics-module

# pnpm
pnpm add react-native-quicktracking-analytics-module

SDK 環境変数を導入する

import { QT } from "react-native-quicktracking-analytics-module";

Android ドックの統合

MPS コンソールに移動します。

QT バックグラウンドに入り、「[管理コンソール]」をクリックします

image

統合アプリケーション

追跡ポイントを統合するアプリケーションを見つけます。「[アプリケーション]」ページに移動し、使用する組織を選択して、「[詳細]」または「[統合]」をクリックします。

image

Maven アドレス構成

プロジェクトの build.gradle 構成スクリプトの buildscript セクションと allprojects セクションに、sdk maven リポジトリの URL を追加します。

buildscript {
    repositories {
    google()
    jcenter()
    maven { url 'https://repo1.maven.org/maven2/' }
  }
  dependencies {
      classpath 'com.android.tools.build:gradle:3.4.0'}
      // 注意: アプリケーションの依存関係をここに配置しないでください。これらは個々のモジュール build.gradle ファイルに属します
  }
}
allprojects {
    repositories {
    google()
    jcenter()
    maven { url 'https://repo1.maven.org/maven2/' }
  }
}

コンポーネントリファレンス

プロジェクトアプリに対応する build.gradle 構成スクリプトの dependencies セクションに、統合に必要な依存関係を追加します。

dependencies {
    implementation fileTree(include the following:['*.jar'], dir:'libs')

    // QuickTracking 統計分析 SDK
    implementation 'com.lydaas.qtsdk:qt-px-common:1.6.3.PX'
}

注意: package.json を使用して QuickTracking ReactNative SDK の依存関係を追加した場合は、Android 用の QuickTracking SDK を個別に統合する必要はありません

追跡検証構成

Android.manifest で、MainActivity に対応する activity タグを見つけ、次のコードを貼り付けて、appkey を独自の appkey に置き換えます

//1. 呼び出しコードはデフォルトで「atm」です。アプリに対応する appkey は変更できません。
//2. 単一の intent-filter と他の intent-filter を並べて使用します。
// 次のコードを他の intent-filter に追加しないでください。

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="atm.appkey" />
</intent-filter>

権限を追加する

統計 SDK では、ホストアプリケーションに次の権限が付与されている必要があります。

権限

目的

ACCESS_NETWORK_STATE

ネットワークモードを検出し、異常なネットワーク状態でのデータ送信を回避して、トラフィックと電力を節約します。

READ_PHONE_STATE (オプション)

ユーザー機器の IMEI が取得され、ユーザーは IMEI によって一意に識別されるため、統計分析サービスを提供できます。

ACCESS_WIFI_STATE

WIFI mac アドレスを取得します。タブレットデバイスまたは TV ボックスでは、デバイスを IMEI で識別できません。統計分析サービスを正常に提供するために、WIFI mac アドレスをユーザーの一意の識別子として使用します。

INTERNET

アプリケーションがネットワークに接続し、統計データを送信して、統計分析サービスを提供できるようにする権限。

AndroidManifest.xml マニフェストファイルの例を以下に示します。

<manifest ……> 
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <application ……>
</manifest>

難読化を構成する

アプリケーションでコードの難読化を使用する場合は、Quick Tracking SDK の難読化によって SDK が使用できなくなるのを防ぐために、次の構成を追加します。

-keep class com.umeng.** {*;}
-keep class org.repackage.** {*;}

-keep class com.quick.qt.** {*;}
-keep class rpk.quick.qt.** {*;}

-keepclassmembers class * {
   public <init> (org.json.JSONObject);
}
-keepclassmembers enum * {
    public static **[] values();
    public static ** valueOf(java.lang.String);
}

SDK は、インポートされたプロジェクトのリソースファイルを参照する必要があり、リフレクションメカニズムを介してリソース参照ファイル R.java を取得しますが、開発者が proguard などの混同最適化ツールを使用して apk を処理すると、proguard によって R.java が削除される場合があります。この問題が発生した場合は、次の構成を追加してください。

-keep public class [your app package name]. R$*{
    public stac final int 

Android 用ショートビデオ SDK を初期化する

  1. ドメイン設定

初期化前に、プライベート環境のドメインを必ず設定してください。

/**
 * 統計ログをアップロードするためのプライマリドメインと代替ドメインを設定します。SDK は最初に統計をプライマリドメインに報告します。失敗した場合は、代替ドメインへのデータの報告を再試行します。
 * プライマリドメイン primaryDomain または null または空の文字列を指定することはできません。そうしないと、SdkDomainUndefined ランタイム例外がスローされます。
 */
QtConfigure.setCustomDomain("追跡ドメイン", null); 
  1. 事前初期化

ホスティングアプリの Application.onCreate 関数で、基盤となるコンポーネントライブラリの初期化関数を呼び出します。

// SDK 事前初期化関数は、デバイス情報を追跡したり、QT バックエンドにデータを報告したりしません。
// preInit 事前初期化関数は非常に時間がかからず、アプリの最初のコールドスタートのユーザーエクスペリエンスに影響を与えません。
QtConfigure.preInit(this,"appkey","Channel");

3. 正式な初期化

// SDK を初期化します。
public static void init(Context context,String appkey,String channel,int deviceType,String pushSecret);

説明

備考

appkey

QT は、現在のアプリケーションプラットフォームによって発行される一意の識別子です。

  1. 入力パラメーターの appkey は、QT バックグラウンドと一致している必要があります。

  2. appkey は各イベントログとともに報告され、QT のアプリケーションプラットフォームデータを識別するために使用されます。

channel

アプリ配信用のアプリマーケット

QT 分析プラットフォームの「システムプロパティ」の「アップグレードチャネル」のデータソース

deviceType

QtConfigure.DEVICE_TYPE_PHONE

デフォルトでは、QtConfigure.DEVICE_TYPE_PHONE を入力できます

pushSecret

放棄されたフィールド、空を入力

放棄されたフィールド、空を入力

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
    super.onCreate();
    
    // SDK 事前初期化関数は、デバイス情報を追跡したり、QT バックエンドにデータを報告したりしません。
    // preInit 事前初期化関数は非常に時間がかからず、アプリの最初のコールドスタートのユーザーエクスペリエンスに影響を与えません。
    QtConfigure.preInit(this,"Your appkey","aliyun");
    // SDK を初期化します。
    QtConfigure.init(this, "Your appkey","aliyun",QtConfigure.DEVICE_TYPE_PHONE, "");
  }

Android 用統計分析 SDK の統合方法の詳細については、「Android SDK」をご参照ください。

iOS ドックの統合

CocoaPods 統合を使用する

iOS プロジェクトディレクトリに移動します

cd ios && pod install && cd .. 

SDK を初期化し、appKey を統合する

統計 SDK を統合した後、アプリが工業情報化部 (MIIT) のコンプライアンス要件を満たせるようにするには、アプリの最初のコールドスタート時に、ユーザーが[プライバシーポリシー]を読み、ユーザーの承認を取得した後に、初期初期化関数が呼び出されて統計 SDK が初期化されるようにする必要があります。この場合、SDK はデバイス情報を追跡し、データを報告します。逆に、ユーザーが[プライバシーポリシー]の承認に同意しない場合、初期化関数を呼び出すことはできません

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
    /**すべてのコンポーネント製品を初期化する
      * @param appKey 開発者が QT で申請した appkey。
      * @param channel チャネル識別子。nil を「App Store」に設定できます。
      */
    [QTConfigure initWithAppkey:@"アプリケーションの AppKey" channel:@"インストールチャネル"];
 
    return YES;
}

アプリが[プライバシーポリシー]のユーザー承認を取得したら、開発者は後続のアプリのコールドスタートで初期化関数が呼び出されるようにする必要があります。

レシートドメインを構成する

#import <QTCommon/UMConfigure.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
    /**統計ログを報告するためのプライマリドメインと代替ドメインを指定します。この関数は、SDK が関数呼び出しを初期化する前に呼び出す必要があります。
      * @param primaryDomain ログが渡されるプライマリドメインのレシートアドレス。パラメーターは null または空の文字列にすることはできません。
      * @param standbyDomain ログをアップロードするためのバックアップドメインの受信アドレス。パラメーターは null または空の文字列にすることができます。このパラメーターを空のままにすると、SDK はプライマリドメインをバックアップドメインとして自動的に設定します。
      */
    [QTConfigure setCustomDomain:@"プライマリレシートドメイン" standbyDomain:@"代替レシートドメイン"];

    return YES;
}

必要に応じてログコンポーネントをインポートする

統計に必要なコンポーネントライブラリを導入します (SDK を更新するときは、pod update コマンドを使用して直接更新できます)

pod 'UMCCommonLog'

Podfile の例

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '12.0'

target 'qt_reactnative_demo' do
  config = use_native_modules!
  
  // QuickTracking 統計分析 SDK
  pod 'QTCommon', '~> 1.5.8.PX'// バージョン番号を指定する必要があります。
   
  // 開発とデバッグのために、基本 Logstore の UMCCommonLog をプロジェクトに追加できます。
  pod 'UMCCommonLog'
  
  use_react_native!(
    :path => config[:reactNativePath],
    # iOS で hermes を有効にするには、「false」を「true」に変更してから、pod をインストールします
    :hermes_enabled => flags[:hermes_enabled],
  )

  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

注意: package.json を使用して QuickTracking ReactNative SDK の依存関係を追加した場合は、iOS 用の QuickTracking SDK を個別に統合する必要はありません。

ログ出力を有効にする

#import <QTCommon/UMConfigure.h>
#import <UMCommonLog/UMCommonLogHeaders.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
    [UMCommonLogManager setUpUMCommonLogManager];
    [QTConfigure setLogEnabled:YES];
  
    return YES;
}

追跡検証構成

プロジェクトに URL スキームを追加します。URL スキームは、プロジェクト設定の target -> タブ Info -> URL Types にあります。

スキーム:atm.yourappkey。

image

AppDelegate で関数 [QTMobClick handleUrl:url] を呼び出して、URL を受信します

- (BOOL)application:(UIApplication *)application openURL:(nonnull NSURL *)url options:(nonnull NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
    if ([QTMobClick handleUrl:url]) {
        return YES;
    }
    return YES;
}

iOS 用統計分析 SDK の統合方法の詳細については、「iOS SDK」をご参照ください。

追跡検証の詳細については、「追跡検証詳細ガイド」をご参照ください。

追跡 API

SDK 初期化

正式な初期化

必ず呼び出してください。ユーザーがプライバシーポリシーに同意した後に、SDK を初期化してください。

function init(appKey: string, channel: string): void

説明

appKey

QT バックグラウンドによって提供される一意のアプリケーションキー値

channel

ダウンロードチャネル

QT.init('appkey', 'quicktracking');

ユーザーアカウント別のレポート

ユーザーログイン設定

この値をアップロードするための対応する製品の「ログインユーザー」: アップロードされた次の API の値の一意のカウント数を計算する、つまり「ログインユーザー」の数を計算する

function profileSignIn(ID: string, provider?: string): void

説明

ID

ユーザーアカウント。値の長さは 64 バイト未満です。 この値のアップロードに対応する製品の「ログインユーザー」: 「ログインユーザー」の数が計算されます。これは、ユーザーアカウントの重複排除の数です。

provider

フィールドは無効です。このパラメーターを null に設定できます。

ユーザーログアウト

アカウントからログオフするときは、この操作を呼び出す必要があります。この操作を呼び出すと、アカウント関連のコンテンツは送信されません。

function profileSignOff(): void

QT.profileSignIn ('ユーザー ID');
QT.profileSignOff();

ユーザープロパティのアップロード

イベントコードが「$$_user_profile」に固定されているカスタムイベントを使用してアップロードします。イベントによって伝達されるイベント属性は、ユーザー属性としてユーザーテーブルに配置されます。

function sendEvent(eventId: string, params: any): void

説明

eventId

現在の統計イベントの ID。

params

現在のイベントのパラメーターの説明。「パラメーター名: パラメーター値」の「<キーと値>」ペアとして定義されます

注: ユーザーアカウントが報告された後に、ユーザー属性をアップロードする必要があります。

QT.onProfileSignIn("Zhang San");

const user = {
  gender: "male",
  age: "8"
}
QT.sendEvent("$$_user_profile", user);

上記のアップロードのビジネス上の意味は次のとおりです。Zhang San 男 8 歳。

グローバルプロパティ

グローバルプロパティは、各イベントによって伝達されるプロパティです。

グローバル属性を登録する

function registerGlobalProperty(globalProperty: any): void

説明

globalProperty

登録するグローバルプロパティ。プロパティ名: プロパティ値の <キーと値> ペアとして定義されます。単層オブジェクト構造であり、多層ネストはサポートしていません。

  1. 文字列タイプのプロパティ名とプロパティ値。文字、数字、アンダースコアのみがサポートされています。

  2. Android では、属性値は JavaScript のブール型をサポートしていません。JS で手動で 0 または 1 に変換する必要があります。

  3. Android では、グローバルプロパティ値が null または undefined のシナリオでは、基盤となる Android SDK によってこのグローバルプロパティフィールドがフィルタリングされます。null 値分析シナリオが必要な場合は、デフォルトの null 値をカスタマイズする必要があります

  4. iOS では、グローバルプロパティ値は null と undefined をサポートしておらず、手動でフィルタリングする必要があります。

QT.registerGlobalProperty({
    name: 'MyApp',
    description: 'これはアプリです',
    aBoolean: 1, // ブール型は 0 または 1 に設定する必要があります
    aNull: '', // null または undefined 型は空の文字列にする必要があります。
    // デフォルト値は数値型です。戻り値が null または undefined の場合は、数値型のデフォルト値をカスタマイズする必要があります。
    aNumber: 66, 
});

特定のグローバル属性を削除する

function unregisterGlobalProperty(propertyName: string): void

説明

propertyName

削除するグローバル属性の名前

QT.unregisterGlobalProperty('name'); // グローバル属性名を削除する

特定のグローバルプロパティを取得する

async function getGlobalProperty(propertyName: string): Promise<any>

説明

propertyName

取得するグローバルプロパティの名前

await QT.getGlobalProperty('name'); // グローバルプロパティ名を取得し、{name: "MyApp"} を返す

すべてのグローバル属性を取得する

async function getGlobalProperties(propertyName: string): Promise<any>

await QT.getGlobalProperties(); // すべてのグローバルプロパティを取得する

すべてのグローバル属性をクリアする

function clearGlobalProperties(): void

QT.clearGlobalProperties(); // すべてのグローバル属性がクリアされます (注意して使用してください)

ページ閲覧イベント追跡

ページパスとページ滞在時間の統計を追跡および追跡したい開発者。この操作を呼び出すことで、手動で埋設ポイントを設定できます

function onPageStart(pageName: string): void
function onPageEnd(pageName: string): void

説明

pageName

ページエンコーディング

QT.onPageStart('MainPage');
QT.onPageEnd('MainPage');

注:

onPageStart SDK はページエントリ情報を記録します。onPageStart SDK はイベントを報告しません。onPageEnd SDK は、onPageEnd SDK を呼び出したときにのみページ閲覧イベントを報告します。

onPageStart と onPageEnd はペアで呼び出す必要があり、渡される値の pageName は同じである必要があります。onPageEnd が使用されない場合、または onPageEnd によって渡される値の pageName が onPageStart の値と一致しない場合、onPageStart に記録された情報は有効になりません。

ページプロパティのアップロード

現在のページにカスタムプロパティを添付するためのサポート

function uploadPageProperties(pageName: string, params: EventParams): void

パラメーター:

説明

pageName

ターゲットページの名前 (ページエンコーディング)。現在のページ名と同じである必要があります。そうでない場合、関数の実行は無効です。

params

現在のイベントのパラメーターの説明。「パラメーター名: パラメーター値」の「<キーと値>」ペアとして定義されます。単層オブジェクト構造であり、多層ネストはサポートしていません。

QT.uploadPageProperties('detail_page', { test: 1 })

注意してください:

  1. この API は、onPageStart と onPageEnd の間で呼び出す必要があります。

  2. 文字列タイプのプロパティ名とプロパティ値。文字、数字、アンダースコアのみがサポートされています。

  3. Android では、属性値は JavaScript のブール型をサポートしていません。JS で手動で 0 または 1 に変換する必要があります。

  4. Android では、グローバルプロパティ値が null または undefined のシナリオでは、基盤となる Android SDK によってこのグローバルプロパティフィールドがフィルタリングされます。null 値分析シナリオが必要な場合は、デフォルトの null 値をカスタマイズする必要があります

  5. iOS では、グローバルプロパティ値は null と undefined をサポートしておらず、手動でフィルタリングする必要があります。

カスタムイベント追跡

カスタムイベントを使用して、ユーザーの行動を追跡し、行動発生の具体的な詳細を記録できます。

sendEvent インターフェースを使用して、イベントの統計を追跡します。API は次のとおりです。

/**
  * カスタムイベント追跡ポイント
  * @param eventId イベントのコード。
  * @param params 現在のイベントのパラメーターの説明。「パラメーター名: パラメーター値」の「<キーと値>」ペアとして定義されます
  * @param pageName イベントコード。
  */
function sendEvent(eventId: string, params?: any, pageName?: string): void

説明

eventId

現在の統計のイベントコード。

params

現在のイベントのパラメーターの説明。「パラメーター名: パラメーター値」の「<キーと値> ペア」として定義されます。単層オブジェクト構造であり、多層ネストはサポートしていません。

pageName

現在の統計イベントのページコード。

// イベントパラメーターを伝達するカスタムイベント。
QT.sendEvent(
  'event1',
  {
    name: 'クイック追跡',
    method: 'func',
  },
);

// イベントパラメーターとページエンコーディングを伝達するカスタムイベント。
QT.sendEvent(
  'event2',
  {
    name: 'クイック追跡',
    method: 'func',
  },
  'main-page'
);

備考:

  • 複数パラメータータイプのイベントは、イベント / カウントイベントを計算する元の分析シナリオを満たすことができます。

  • 計算イベントの異なるパラメータータイプは、異なる計算方法に対応します。これらは、数値と文字の 2 つのカテゴリに分類できます。

  • 数値型: 累積値、最大値、最小値、平均値、一意のカウントの計算をサポートします。

  • 文字型: 一意のカウント計算をサポートします。

注:

グローバルプロパティと同様に、イベントプロパティも Android と iOS の異なるプラットフォームでのタイプの処理に違いがあります。

  1. Android では、JavaScript のブール型はサポートされていません。JS で手動で 0 と 1 に変換する必要があります。

  2. Android では、グローバルプロパティ値が null または undefined のシナリオでは、基盤となる Android SDK によってこのグローバルプロパティフィールドがフィルタリングされます。null 値分析シナリオが必要な場合は、デフォルトの null 値をカスタマイズする必要があります

  3. iOS では、グローバルプロパティ値は null と undefined をサポートしておらず、手動でフィルタリングする必要があります。

ブリッジイベント追跡

ブリッジイベントは、h5 ブリッジ RN のシナリオで使用されます。このインターフェースは、H5 ログをアプリに送信するために使用されます。

/**
  * ブリッジイベント追跡ポイント
  * @param data 転送されたイベントの H5 ログ本文。
  */
function sendEventForH5(data: string): void

説明

data

H5 転送イベントのログ本文

const content = data.nativeEvent.data;
QT.sendEventForH5(content);

RN アプリに h5 ページを埋め込む (RN ブリッジモード)

H5 統合 QuickTracking Web SDK

この手順については、「Web SDK」をご参照ください。

H5 ログを React Native WebView に転送する

<script charset="UTF-8">
  ...
  // SDK アクセスと構成
  ...
  
  // ページでカスタムイベントを送信する (クリック、要素の露出、その他のイベント)
  aplus_queue.push({
    action: 'aplus.aplus_pubsub.subscribe',
    arguments: ['mw_change_hjlj', function (content) {
      var eventData = content && content.what_to_send && content.what_to_send.hjljdataToUmNative;
      if (/*iOS 環境 */) {
        window.ReactNativeWebView.postMessage(JSON.stringify(eventData), '*'); 
      } else {
        window.ReactNativeWebView.postMessage(JSON.stringify(eventData));
      }
    }]
  })
  
  aplus_queue.push({
    action: 'aplus.aplus_pubsub.subscribe',
    arguments: ['mw_change_pv', function (content) {
      var pvData = content && content.what_to_send && content.what_to_send.pvdataToUmNative;
      if (/*iOS 環境 */) {
        window.ReactNativeWebView.postMessage(JSON.stringify(pvData), '*');    
      } else {
        window.ReactNativeWebView.postMessage(JSON.stringify(pvData));
      }
    }]
  })
</script>

React Native WebView がメッセージを受信し、QT SDK を呼び出してログを報告する

import * as React from 'react'
import { WebView } from 'react-native-webview';
import { QT } from 'react-native-quicktracking-analytics-module';
import { Platform, SafeAreaView } from 'react-native';

export default function WebPage() {
  const onMessage = (data) => {
    try {
      const content = data.nativeEvent.data;
      QT.sendEventForH5(content);
    } catch (error) {
      console.log('webview message error:', error);
    }
  };
  
  return (
    <SafeAreaView style={{ flex: 1 }}>
    	<WebView
      	...
        onMessage={onMessage}
      	...
      />
    </SafeAreaView>
  );
}

RN 自動追跡

QuickTracking ReactNative SDK 2.0.0 以降が必要です。

ページビューイベントの自動追跡

React Navigation ライブラリ自体の豊富なシナリオサポートとコミュニティにおける影響を考慮して、SDK のページ閲覧イベントの自動追跡は、React Navigation のオープンインターフェース機能を直接使用します。次の例を参照してください。

import {QT} from 'react-native-quicktracking-analytics-module';
import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const App = () => {
  const navigationRef = useNavigationContainerRef();
  const routeNameRef = useRef('');

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = currentRouteName;
        // ページエンコーディングを設定します。
        QT.onPageStart(currentRouteName);
      }}
      onStateChange={() => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.getCurrentRoute()?.name;
        // 必要に応じてページプロパティを設定します (オプション)
        QT.uploadPageProperties(previousRouteName, {
          test_page_p_1: 1,
          test_page_p_2: "test"
        });
        // ページ閲覧イベントを追跡します。
        QT.onPageEnd(previousRouteName);
        if (currentRouteName) {
          if (previousRouteName !== currentRouteName) {
            // 新しいページエンコーディングを更新します
            QT.onPageStart(currentRouteName);
            routeNameRef.current = currentRouteName;
          }
        }
      }}
    >
      ...
    </NavigationContainer>
  )
}

コントロールクリックイベントの自動追跡

埋設するプロジェクトのパスで node コマンドを実行します

node node_modules/react-native-quicktracking-analytics-module/src/hook.js -run

注: 元のファイルを復元する必要がある場合は、reset コマンドを実行できます。

node node_modules/react-native-quicktracking-analytics-module/src/hook.js -reset

RN コントロールの自動追跡追跡を無視する

混合開発シナリオのため、React Native コントロールクリックイベントの自動追跡を個別に無効にすることができます。追跡するプロジェクトの package.json に QTSDKConfig 構成を追加します。

{
  "name": "reactnative_demo",
  "QTSDKConfig": {
    "enableAutoCLK": true
  }
}

enableAutoCLK フィールドの有効な値:

  • true: RN コントロールの自動追跡を有効にする

  • false: RN コントロールの自動追跡を無効にする

注: RN コントロールクリックイベントの自動追跡機能を有効にするには、上記の node コマンドと組み合わせて使用する必要があります。

iOS コントロールのクリックイベントの自動追跡を有効にする

#import <QTCommon/UMConfigure.h>
#import <QTCommon/MobClick.h>
#import <UMCommonLog/UMCommonLogHeaders.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

    // ネイティブコントロールが完全に埋め込まれている場合に、自動追跡機能を有効にします。
    [QTMobClick setAutoEventEnabled:YES];
    
    return YES;
}

Android コントロールのクリックイベントの自動追跡を有効にする

import com.quick.qt.analytics.QtTrackAgent;

public class MainApplication extends Application implements ReactApplication {
  ...
    
  @Override
  public void onCreate() {
    super.onCreate();
    ...
    // ネイティブコントロールが完全に埋め込まれている場合に、自動追跡機能を有効にします。
    QtTrackAgent.setAutoEventEnabled(true);
    ...
  }

  ...
}

ReactNative コントロールのカスタムプロパティを設定する

注: TouchableHighlight、TouchableOpacity、Pressable などの React Native コントロールのみがサポートされています

<Pressable
  onPress={()=>{}}
  qtParams={{
    pressable: "press_1",
  }}
>
  {({pressed}) => (
    <Text style={styles.text}>
      {pressed ?  'Pressable コントロールをクリックしてください! ' : 'Pressable コントロール'}
    </Text>
  )}
</Pressable>

<TouchableHighlight 
  onPress={()=>{}} 
  qtParams={{aTouchableHighlight: 1, b: 2}}>
  <Text>TouchableHighlight コントロール</Text>
</TouchableHighlight>

<TouchableOpacity 
  onPress={()=>{}} 
  qtParams={{aTouchableOpacity: 1, b: 2}}>
  <Text>TouchableOpacity コントロール</Text>
</TouchableOpacity>

<TouchableWithoutFeedback 
  onPress={()=>{}} 
  qtParams={{aTouchableWithoutFeedback: 1, b: 2}}>
  <Text>TouchableWithoutFeedback コントロール</Text>
</TouchableWithoutFeedback>

単一のコントロールの自動追跡を無視する

イベント属性に ignore フィールドを true に設定して追加します

<TouchableHighlight 
  onPress={()=>{}} 
  qtParams={{
    aTouchableHighlight: 1, 
    b: 2,
    ignore: true
  }}>
  <Text>TouchableHighlight コントロール</Text>
</TouchableHighlight>