• 手引き
  • プラットフォーム
  • パートナー
  • English
  • TLC Tealium Learning Center Tealium Learning
    Community
  • Discussions & Ideas Dicussions & Ideas
  • Product Guides Product Guides
  • Knowledge Base Knowledge Base
  • Developer Docs Developer Docs
  • Education Education
  • TLC Blog TLC Blog
  • Support Desk Support Desk
  • CDH Customer Data Hub Customer Data Hub

目次

  • 仕組み
  • 要件
  • サンプルアプリ
  • インストール(NPM/YARN)
    • Android
    • iOS
  • Install (Manual)
    • Android
    • iOS
  • インストール(CocoaPods)
  • JavaScript
  • 初期化
REACT NATIVE

インストール

Tealium for React Nativeのインストールについて説明します。

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

仕組み

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

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

要件

  • ネイティブビルド環境へのアクセス
  • React Nativeおよびツールのインストール
  • 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;

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

詳細を見る:

  • 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リファレンスを参照してください。

トラッキング

 
  • モバイル
  • 始める
    • 概要
    • モバイルの概念
    • クライアントサイド
    • サーバーサイド
    • データレイヤー
    • 同意管理
    • イベントバッチ処理
    • ユーザーの位置情報とジオフェンシング
    • 機能比較
    • トラブルシューティング
  • Remote Commands
    • 概要
    • 仕組み
    • リモートコマンド
      • リモートコマンド:AppsFlyer
      • リモートコマンド:Braze
      • リモートコマンド:Contentsquare
      • リモートコマンド:Facebook
      • Firebase
      • リモートコマンド:Usabilla
  • Android (Java)
    • 概要
    • インストール
    • トラッキング
    • データレイヤー
    • データ管理
    • 同意管理
    • モジュールのリスト
      • Ad Identifierモジュール
      • Crash Reporterモジュール
      • Install Referrerモジュール
      • Lifecycle Trackingモジュール
      • Locationモジュール
      • Optimizely X Trackingモジュール
    • Android TV
    • Android Wear
    • APIリファレンス
      • ConsentManager
      • DataSources
      • LifeCycle
      • Tealium
      • Tealium.Config
      • TealiumLocation
    • リリースノート
  • Cordova
    • 概要
    • インストール
    • トラッキング
    • データ管理
    • モジュールのリスト
      • Ad Identifierモジュール
      • Crash Reporterモジュール
      • Install Referrerモジュール
    • APIリファレンス
    • リリースノート
  • Flutter
    • 概要
    • インストール
    • トラッキング
    • 同意管理
    • データ管理
    • APIリファレンス
    • リリースノート
  • iOS (Objective-C)
    • 概要
    • インストール
    • トラッキング
    • データレイヤー
    • データ管理
    • 同意管理
    • Tag Management
    • モジュールのリスト
      • Lifecycle Trackingモジュール
      • Optimizely X Trackingモジュール
    • tvOS
    • watchOS
    • APIリファレンス
    • リリースノート
  • iOS (Swift)
    • 概要
    • インストール
    • トラッキング
    • データレイヤー
    • データ管理
    • アイデンティティの解決
    • アプリ拡張機能
    • 同意管理
    • モジュール
    • モジュールのリスト
      • AppDataモジュール
      • Attributionモジュール
      • AutoTrackingモジュール
      • Collectモジュール
      • Connectivityモジュール
      • CrashReporterモジュール
      • DataSourceモジュール
      • DefaultStorageモジュール
      • Delegateモジュール
      • DeviceDataモジュール
      • DispatchQueueモジュール
      • FileStorageモジュール
      • Lifecycleモジュール
      • Locationモジュール
      • Loggerモジュール
      • PersistentDataモジュール
      • RemoteCommandsモジュール
      • TagManagementモジュール
      • VisitorServiceモジュール
      • VolatileDataモジュール
    • Objective-Cとの連携
    • 機能比較
    • APIリファレンス
      • TealiumConfig
      • TealiumConsentCategories
      • TealiumConsentManagerDelegate
      • TealiumConsentManager
      • TealiumInstanceManager
      • TealiumPersistentData
      • TealiumVolatileData
      • Tealium
    • リリースノート
  • React Native
    • 概要
    • インストール
    • トラッキング
    • APIリファレンス
    • リリースノート
  • Xamarin
    • 概要
    • インストール
    • トラッキング
    • データ管理
    • 同意管理
    • APIリファレンス
    • リリースノート
  • ウェブ
  • AMP
    • 概要
    • インストール
    • トラッキング
    • データレイヤー
  • Angular
    • 概要
    • インストール
    • トラッキング
    • APIリファレンス
  • JavaScript (Web)
    • 概要
    • インストール
    • トラッキング
    • データレイヤー
    • ユニバーサルデータオブジェクト(utag_data)
    • ユニバーサルタグ(utag.js)
    • データレイヤーオブジェクト(b)
    • 単一ページアプリケーション
    • 設定
    • デバッグ
    • APIリファレンス
    • リリースノート
  • サーバーサイド
  • C#
    • 概要
    • インストール
    • トラッキング
    • データレイヤー
    • APIリファレンス
    • リリースノート
  • HTTP API
    • 概要
    • エンドポイント
    • データレイヤー
  • Java
    • 概要
    • インストール
    • トラッキング
    • APIリファレンス
    • リリースノート
  • Node
    • 概要
    • インストール
    • トラッキング
    • APIリファレンス
  • Python
    • 概要
    • インストール
    • トラッキング
    • APIリファレンス
  • Roku
    • 概要
    • インストール
    • トラッキング
    • APIリファレンス
  • Ruby
    • 概要
    • インストール
    • トラッキング
    • APIリファレンス
  • Unity
    • 概要
    • インストール
    • トラッキング
    • APIリファレンス

このページはお役にたちましたでしょうか?

最終更新日 :: 2021年March月10日       ご意見有難うございます。
  • 手引き
  • プラットフォーム
  • パートナー
  • モバイル
  • 始める
  • Remote Commands
  • Android (Java)
  • Cordova
  • Flutter
  • iOS (Objective-C)
  • iOS (Swift)
  • React Native
  • Xamarin
  • ウェブ
  • AMP
  • Angular
  • JavaScript (Web)
  • サーバーサイド
  • C#
  • HTTP API
  • Java
  • Node
  • Python
  • Roku
  • Ruby
  • Unity