• 手引き
  • プラットフォーム
  • パートナー
  • 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

目次

  • セットアップ
  • ビューのトラッキング
    • 例
  • イベントのトラッキング
    • 例
JAVASCRIPT

単一ページアプリケーション

Learn to track links and events for single-page applications.

セットアップ

utag.jsを訪問ごとに1回しか読み込まない単一ページアプリケーション(SPA)では、自動ページビュートラッキングコールを抑制することで、アプリケーションがそれらのコールを直接実行できるようにします。

自動ページトラッキングを上書きするには、utag.jsを読み込む前に、ページに以下の行を追加します。

window.utag_cfg_ovrd = {noview : true};

アプリケーションが読み込まれたら(そしてutag.jsが読み込まれたら)、ページコードでutag.view()トラッキングコールをトリガーできます。これらのコールは一般に、DOM対応イベントまたはコンテンツビューの更新を伴うイベントでトリガーされます。utag.jsの動作を調整するために使用可能な設定の詳細については、こちらを参照してください。

最初のページランディング時に宣言されたutag_dataオブジェクトは、これらのコールによって他の目的に使用されることは_ありません_。最初のページランディングからのデータを使用するには、それを再度宣言して、メソッドコールでもう一度渡す必要があります。

これらのコール中にはグローバルおよびタグをスコープとする拡張機能が実行されます。プリローダーおよびDOM対応拡張機能は、これらのコール中に実行されません。

ビューのトラッキング

単一ページアプリケーションでのビューのトラッキングには、utag.view()メソッドを使用します。

次のutag.view()メソッドコールは、キーと値のペアを使用してデータを渡す方法を示しています。

utag.view({ variable1:"VARIABLE1 VALUE", variable2:"VARIABLE2 VALUE", variable3:"VARIABLE3 VALUE" });

例

以下は、訪問者が「politics」を検索したコンテンツサイトの例です。

utag.view({tealium_event:"search", search_keyword:"politics", search_results: 42});

次の例は、ビューをトラッキングする方法を示しています。

utag.view({
    "demo_site" : "Tealium React Demo",
    "demo_event" : "View " + name
})

イベントのトラッキング

単一ページアプリケーションでのリンクとイベントのトラッキングには、utag.link()メソッドを使用します。

jQueryがインストールされている場合は、jQuery onHandler拡張機能を使用するオプションがあります。この拡張機能は、utag.link()およびutag.view()メソッドをトリガーする特定のイベントバインディング用に設定可能です。これにより、サイドコードでトラッキングロジックがハードコーディングされるのを回避できます。

次のutag.link()メソッドコールは、キーと値のペアを使用してデータを渡す方法を示しています。

utag.link({ variable1:'VARIABLE1 VALUE', variable2:'VARIABLE2 VALUE' });

例

以下は、ソーシャルメディア共有アクションをトラッキングするコンテンツサイトの例です。

utag.link({
    "content_id"         : "38121",
    "page_friendly_url" : "/travel/national_parks",
    "page_name"          : "Travel: National Parks",
    "social_network"     : "facebook",
    "tealium_event"      : "social_share"
})

Tealimデモアプリケーションの次のReactJSの例は、追加、編集、保存、および削除メソッドのイベントをトラッキングする方法を示しています。メソッドを呼び出すたびに、utag.link()メソッドがトリガーされます。

add(text) {
    utag.link({
        "page_type": "react",
        "view_name": "board",
        "event_type": "click",
        "event_name": "add_note",
        "tealium_event": "add_note"
    })
    var notes = [
        ...this.state.notes,
        {
            id: this.nextId(),
            note: text
        }
    ]
    this.setState({notes})
}

edit() {
    utag.link({
        "page_type": "react",
        "view_name": "board",
        "event_type": "click",
        "event_name": "edit_note",
        "tealium_event": "edit_note"
    })
    this.setState({editing: true});
}
save() {
    utag.link({
        "page_type": "react",
        "view_name": "board",
        "event_type": "click",
        "event_name": "save_note",
        "tealium_event": "save_note"
    })
    this.props.onChange(this.refs.newText.value, this.props.id)
    this.setState({editing: false});
}
remove() {
    utag.link({
        "page_type": "react",
        "view_name": "board",
        "event_type": "click",
        "event_name": "remove_note",
        "tealium_event": "remove_note" 
    })

    this.props.onRemove(this.props.id)
}
ユニバーサルタグ(utag.js)
データレイヤーオブジェクト(b)

 
  • モバイル
  • 始める
    • 概要
    • モバイルの概念
    • クライアントサイド
    • サーバーサイド
    • データレイヤー
    • 同意管理
    • イベントバッチ処理
    • ユーザーの位置情報とジオフェンシング
    • 機能比較
    • トラブルシューティング
  • 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リファレンス

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

最終更新日 :: 2020年August月27日       ご意見有難うございます。
  • 手引き
  • プラットフォーム
  • パートナー
  • モバイル
  • 始める
  • 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