REACT NATIVE

インストール

Tealium for React Nativeを導入すると、Tealiumネイティブモバイルライブラリ（iOS、Android）をReact Nativeアプリケーション内で利用できるようになります。

仕組み

TealiumモバイルライブラリをReact Nativeアプリケーションに統合する方法は以下の2つがあり、どちらを使用しても問題ありません。

  • NPMパッケージ（推奨）
  • GitHub経由で手動で実施

要件

サンプルアプリ

当社のライブラリ、トラッキングメソッド、ベストプラクティスの実装に精通していただけるよう、React Nativeサンプルアプリをダウンロードすることをお勧めします。

インストール（NPM/YARN）

React Native向けTealiumライブラリをNPMによってインストールするには：

  1. React Nativeプロジェクトのルートに移動します。

  2. 次のコマンドを使用して、tealium-react-nativeパッケージのダウンロードとインストールを行います。

    yarn install tealium-react-native

  3. React Native AutolinkingはNPMパッケージのバージョン1.0.7で有効になっており、React Nativeのバージョン0.60以降を使用している場合はreact-native linkを実行するために必要とされなくなりました。

Android

Android Mavenインストールに関するドキュメントの説明に従って、Androidプロジェクトのルートbuild.gradleファイルにTealiumのMavenレポジトリへの参照を追加します。プロジェクトの依存関係はAutolinkingプロセスによって自動的に処理されます。

iOS

React Native 0.60以降のAutolinking機能は、CocoaPodsの必要な依存関係をiOSアプリケーションワークスペースに自動的に追加します。

ポッドをインストールするには、次のコマンドを実行します。

// From your React Native application folder:
cd ios && pod install

場合によっては、フレームワークモジュールで非モジュール式のインクルードを許可するために、Clangパラメータを有効にすることが必要となります。Clangパラメータを有効にするには、次の操作を実行します。

  1. Xcodeで、アプリの.xcworkspaceファイルを開いて、ナビゲータからPodsを選択します。

  2. [Targets]でtealium-react-nativeターゲットを選択して、[Build Settings]タブをクリックします。

  3. [Apple Clang - Language - Modules] > [Allow Non-modular Includes In Framework Modules]で次の設定を見つけて更新します。

    CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = YES;

Install (Manual)

Android

Androidアプリの場合は、次の手動によるインストール手順に従います。

  1. TealiumをAndroidアプリケーションに統合するには、以下をTealium Mavenレポジトリに追加します。

  2. プロジェクトのルートのbuild.gradleで、Tealium MavenのURLを追加します。

    allprojects {
  repositories {
    jcenter()
    maven {
        url "http://maven.tealiumiq.com/android/releases/"
    }
  }
}

  3. Tealiumコアライブラリの依存関係をプロジェクトモジュールのbuild.gradleファイルに追加します。Tealiumライフサイクルの依存関係も追加します（必要な場合）。

    dependencies {
    compile 'com.tealium:library:5.5.2'
    compile 'com.tealium:lifecycle:1.1'
}

ブリッジングロジックをコピーするには：

  1. Androidフォルダから、TealiumModule.javaとTealiumPackage.javaをプロジェクトファイルに追加します。

  2. TealiumPackageをMainApplication.javaファイルのgetPackages()メソッドにインクルードします。

    @Override
protected List getPackages() {
  return Arrays.asList(
      new MainReactPackage(),
      new TealiumPackage()    // <--- Add TealiumPackage
  );
}

iOS

Tealium for iOSをReact Nativeプロジェクトに追加するには、非React Nativeアプリケーションの場合と同じ手順を実施する必要があります（ブリッジングファイルは除く）。完全な詳細については、iOSアプリへのTealiumの追加を参照してください。

コアライブラリは必須ですが、任意のモジュールは必要に応じて追加されます。これらはiOS用のGitHubレポジトリから入手できます。

サンプルアプリは開発者の実験用であり、App Storeでの公開用ではありません。そのため、サンプルアプリではTealiumIOS.frameworkおよびTealiumIOSLifecycle.frameworkモジュールを使用しています（シミュレーターには適していますが、公開には適していません）。App Storeでの公開を目的としてアプリを開発する場合は、必ずDevicesOnlyフォルダ内のフレームワークを使用してください。

インストール（CocoaPods）

CocoaPodsは、インストールを実行するもう1つの方法です。Tealiumのポッドは”TealiumIOS”という名前です。完全な詳細については、Tealium for iOSのガイドを参照してください。create-react-native-appコマンドではPodfileが作成されないため、サンプルアプリは手動インストールを使用してビルドしています。多数の依存関係を持つ複雑な製品版アプリには、CocoaPodsの使用を推奨しています。

ブリッジングロジックのコピー

GitHubレポジトリには2つのファイルがあり、TealiumのネイティブiOS SDKと、React NativeアプリのTealiumModule.mおよびTealiumModule.h内のJavascriptのブリッジングを提供します。

これら2つのファイルをアプリのメインプロジェクトにコピーします。

JavaScript

モジュールをアプリにインポートする方法は、どのようにインストールしたかにより変わります。

NPM経由でインストールした場合は、以下の行をコードに追加します。

import Tealium from 'tealium-react-native';

手動でインストールした場合は、GitHubレポジトリのnpm-packageフォルダでindex.jsファイルを探し、名前をTealiumModule.jsに変更したうえで、React NativeのJavaScriptプロジェクトにコピーします。

次に、TealiumのJavaScriptモジュールをインポートするために、以下の行をコードに追加します。

import Tealium from './TealiumModule';

初期化

アプリがインストールされたら、次の例に示すように、initialize()メソッドを使用してTealiumインスタンスを初期化します。

Tealium.initialize("ACCOUNT",
                   "PROFILE",
                   "ENVIRONMENT",
                   "IOS_DATA_SOURCE_KEY",
                   "ANDROID_DATA_SOURCE_KEY")

同意管理 同意管理を使用するには、同じパラメータを使用してinitializeWithConsentManager()メソッドで初期化します。

詳細を見る：

カスタムの初期化 initializeCustom()メソッドではすべての初期化オプションが利用可能です。

Tealium.initializeCustom('ACCOUNT',
                         'PROFILE',
                         'ENVIRONMENT',
                         'IOS_DATA_SOURCE_KEY',
                         'ANDROID_DATA_SOURCE_KEY',
                         'INSTANCE',
                         ENABLE_LIFECYCLE,        // enable lifecycle tracking
                         'PUBLISH_SETTINGS_URL',  // custom publish settings URL
                         'TAG_MANAGEMENT_URL',    // custom tag management URL
                         USE_COLLECT_ENDPOINT,    // toggle between data endpoints, true: Tealium Collect, false: Visitor Data
                         ENABLE_CONSENT_MANAGER); // enable Consent Management

詳細については、APIリファレンスを参照してください。

トラッキング