インストール | React Native用Tealium

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

このセクションは、React Native用Tealiumの現行バージョン（2.x）についてです。以前のバージョンについては、React Native用Tealium 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）

NPMを使用してReact Native用Tealiumライブラリをインストールするには：

React Nativeプロジェクトのルートに移動します。
次のコマンドでtealium-react-nativeパッケージをダウンロードしてインストールします：
```
yarn install tealium-react-native
```
NPMパッケージのバージョン1.0.7からReact Native Autolinkingが有効になっており、React Nativeのバージョン0.60+を使用している場合、react-native linkを実行する必要はありません。

Android

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

iOS

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

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

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

バージョン2.2.0から2.5.1までは、Podfileに次の参照を追加します：pod "tealium-react-native-swift", :path => '../node_modules/tealium-react-native/tealium-react-native-swift.podspec'。バージョン2.6.0以降では、この追加の依存関係は不要になり、削除する必要があります。

場合によっては、フレームワークモジュール内の非モジュラーなインクルードを許可するためにclangパラメータを有効にする必要があります。clangパラメータを有効にするには：

Xcodeでアプリの.xcworkspaceファイルを開き、ナビゲーターからPodsを選択します。
Targetsの下でtealium-react-nativeターゲットを選択し、Build Settingsタブをクリックします。
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プロジェクトにブリッジングヘッダーファイルを作成します。

Xcodeで**File > New > File…**をメニューから選択します。
テンプレートとしてSwift Fileを選択し、Nextをクリックします。
Groupドロップダウンでアプリのトップレベルフォルダを選択します（プロジェクトではありません）。
“Objective-Dブリッジングヘッダーを構成しますか？“というプロンプトが表示されたら、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'をあなたのTealiumアカウント名に置き換えてください
      account: 'ACCOUNT',
      // 'PROFILE'をあなたのTealiumプロファイル名に置き換えてください
      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リファレンスを参照してください。