インストール

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

仕組み

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

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

要件

• ネイティブビルド環境へのアクセス
• React Nativeおよびツールのインストール
• Tealium iQモバイルプロファイル
• Android StudioまたはXcode
• Tealium for AndroidまたはTealium for iOS

サンプルアプリ

当社のライブラリ、トラッキングメソッド、ベストプラクティスの実装に精通していただけるよう、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;

インストール (手動)

Android

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

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

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

allprojects {
      repositories {
        mavenCentral()
        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() メソッドで初期化します。

詳細を見る：

• Consent Manager for Android
• Consent Manager for iOS

カスタムの初期化 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 リファレンス を参照してください。