インストール

Tealium for React Nativeは、React NativeアプリケーションでTealiumのネイティブモバイルライブラリ（iOS、Android）を使用できるようにします。

これはTealium for React Nativeの現行バージョン（2.x）です。
前のバージョンについては、Tealium for React Native 1.xを参照してください。

仕組み

Tealiumのモバイルライブラリは、以下の2つの方法のいずれかを使用してReact Nativeアプリケーションに統合されます：

• NPMパッケージ（推奨）
• 手動でGitHubから

必要条件

• ネイティブビルド環境へのアクセス
• React Native 0.63+とツールのインストール
• Tealium iQ Mobile Profile
• 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. NPMパッケージのバージョン1.0.7ではReact Native Autolinkingが有効化されており、React Nativeのバージョン0.60+を使用している場合、react-native linkを実行する必要はありません。

Android

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

iOS

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

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

// React Nativeアプリケーションフォルダから：
cd ios && pod install

バージョン2.2.0以降では、Podfileに次の参照を追加します：pod "tealium-react-native-swift", :path => '../node_modules/tealium-react-native/tealium-react-native-swift.podspec'

場合によっては、フレームワークモジュール内の非モジュールインクルードを許可するために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;
   

ブリッジングヘッダー

TealiumReactNativeモジュールはTealium iOS (Swift)ライブラリを使用します。React NativeからSwiftへのObjective-Cファイルを公開するために、Xcodeを使用してiOSプロジェクトにブリッジングヘッダーファイルを作成します。

1. Xcodeで、メニューから**File > New > File…**を選択します。
2. テンプレートとしてSwift Fileを選択し、Nextをクリックします。
3. Groupのドロップダウンで、アプリのトップレベルフォルダ（プロジェクトではない）を選択します。
4. “Would you like to configure an Objective-D bridging header?“というプロンプトが表示されたら、Create Bridging Headerを選択してブリッジングヘッダーファイルを生成します。

ブリッジングヘッダーファイルの名前はYourProject-Bridging-Header.hの形式です。ファイル名を変更しないでください。Xcodeは生成されたファイル名でプロジェクトを構成します。

ブリッジングヘッダーの追加はプロジェクトごとに一度だけ求められます。

JavaScript

モジュールをアプリにインポートする方法は、インストール方法によります。

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

import Tealium from 'tealium-react-native';

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

インストール後、次のようにTealiumモジュールをアプリのJavaScriptコードにインポートします：

import Tealium from 'tealium-react-native';
import { TealiumConfig, TealiumView, TealiumEvent, ConsentCategories, Dispatchers, Collectors, ConsentPolicy, Expiry, ConsentExpiry, TimeUnit, ConsentStatus, TealiumEnvironment } from 'tealium-react-native/common';

初期化

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

let config: TealiumConfig = {
	account: 'ACCOUNT',
	profile: 'PROFILE',
	environment: TealiumEnvironment.dev,
	dispatchers: [Dispatchers.Collect, Dispatchers.RemoteCommands, Dispatchers.TagManagement],
	collectors: [Collectors.AppData, Collectors.DeviceData, Collectors.Lifecycle, Collectors.Connectivity],
	consentPolicy: ConsentPolicy.gdpr,
	visitorServiceEnabled: true
};
Tealium.initialize(config);

詳細な情報や追加の構成オプションについては、API Referenceを参照してください。