インストール
React Native用Tealiumのインストール方法を学ぶ。
Tealium for React Nativeは、React NativeアプリケーションでTealiumのネイティブモバイルライブラリ(iOS、Android)を使用できます。
これはReact Native用Tealiumの現行バージョン(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)
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 Installのドキュメントに記載されています。プロジェクトの依存関係は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リファレンスを参照してください。
最終更新日 :: 2025年September月24日