Guides

ビジュアルトラッキングを利用する

Suggest Edits

🚧

React Native SDK のビジュアルトラッキングは Beta 版の機能です

React Native SDK のビジュアルトラッキング は現在 Beta 版として提供しております。
そのため、今後予告なく仕様変更を伴う機能改善やAPIの破壊的変更が行われる可能性があります。

ペアリングしたデバイスから管理画面に対して送信した操作ログを利用して、イベントの発火条件を定義できます。

定義したイベント発火条件は各デバイスに反映されるため、アプリケーションをリリースすることなく、イベントの発火をコントロールすることが可能になります。

ネイティブSDKとは異なりReact Native向けのビジュアルトラッキングでは画面遷移に関しては実装が必要となりますが、
アプリケーション内でよく利用するベースとなるNavigationなどに実装しておくことでイベントの発火や、そのイベントをトリガーにしたアクションの配信が容易になります。
ボタン等のタップイベントはネイティブSDK同様に取得可能です。

導入手順

共通

npm または yarn を利用してパッケージをインストールしてください。

npm install --save @react-native-karte/visual-tracking

yarn add @react-native-karte/visual-tracking

パッケージのインストールが完了したら、対応するプラットフォーム毎の導入手順に従い設定を進めてください。

iOS

Pod をインストールしてください。

npx pod-install ios

Android

Androidでビジュアルトラッキングを有効化するには、Gradle Plugin の設定が必要です。
ルートプロジェクトの build.gradle の buildscript ブロックに以下の記述を追加してください。
Karte Gradle Plugin は 2.2.0 以降のバージョンを使用して下さい。

buildscript {
  // ...
  repositories {
    // ...
    mavenCentral()
    // ...
  }
  dependencies {
    classpath "io.karte.android:gradle-plugin:2.3.0"
    //...
  }
}

次にアプリの build.gradle を修正し、apply plugin: 'com.android.application' の下に apply plugin: 'io.karte.android' を追記してください。

apply plugin: 'com.android.application'
apply plugin: 'io.karte.android'

📘

プラグインの対応バージョン

このプラグインは Android Gradle Plugin（com.android.tools.build:gradle）のバージョン 3.1.0 以上 4.0.0 以下に対応しています。

実装手順

カスタムURLスキームの設定（Android）

ペアリングのために、カスタムURLスキームの指定が必要です。
既にカスタムURLスキームがある（intent-filter 要素にアプリ固有のスキームが指定された Activity が AndroidManifest.xml に存在する）場合は、以下の手順は不要です。

カスタムURLスキームの設定が無い場合、ペアリング用のURLスキームに任意の文字列を指定可能です。
name 属性に "io.karte.android.Tracker.PairingUrlScheme" を指定した meta-data 要素を追加し、値にURLスキームを設定してください。

<application android:label="SampleApp" ...>
    <meta-data android:name="io.karte.android.Tracker.PairingUrlScheme" android:value="sampleapp"/>
    ...
</application>

カスタムURLスキームの設定（iOS）

設定方法については カスタムURLスキームを設定する をご覧ください。

操作ログを送信する

React Native SDKにおけるビジュアルトラッキングではボタン等のタップに関する操作ログは自動で送信されますが、画面遷移に関する操作ログは自動で取得することが出来ません。
画面遷移に関する操作ログを送信するためには、下記の手順でアプリケーションにコードを追加します。

  1. SDKのインポート宣言を追加
    イベント送信処理を実装するファイルの先頭にインポート宣言を追加します。
import { VisualTracking } from '@react-native-karte/visual-tracking';
  1. 画面遷移のタイミングで操作ログの送信を実装する

画面遷移のタイミングで操作ログを送信するには、画面遷移に関する実装に応じて異なりますが、操作ログの送信には下記APIを使用します。

VisualTracking.view("onStateChange", "Home", "ホーム画面");

第１引数は遷移イベントの種類、第２引数は画面を識別するユニークなID、第３引数はオプショナルで対象を表すテキストになります。
基本的にcoreモジュールの画面表示イベントと同様ですが、あとで発火の有無を変更できることと、ペアリング時に画面キャプチャが送信される点が異なります。

例として React Navigation ライブラリによる実装例を紹介します。
NavigationContainer の onReady や onStateChange 内で次のように実装します。

export default function App() {
  const navigationRef = React.useRef();
  const routeNameRef = React.useRef<string>();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() =>
        (routeNameRef.current = navigationRef.current.getCurrentRoute().name)
      }
      onStateChange={async () => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current.getCurrentRoute().name;

        if (previousRouteName !== currentRouteName) {
          // ref: https://reactnavigation.org/docs/screen-tracking/
          VisualTracking.view('onStateChange', currentRouteName);
        }
        routeNameRef.current = currentRouteName;
      }}
    >
     // ...
    </NavigationContainer>
  );
}

実際のサンプルについては下記を確認してください。

動作確認

2点の動作が確認できれば問題なく動作していることが確認できます。

  1. ペアリングの確認
  2. 定義に基づいたイベントの送信が行われているか確認

ペアリングをはじめとした各種操作方法については、サポートサイトの ビジュアルトラッキング をご覧ください。

📘

ペアリングの動作について

ペアリング開始後、SDKはペアリングを維持するために一定間隔で通信を行います。
なおアプリケーションのプロセスが終了した場合は、ペアリングは解除されます。

Updated 12 months ago