JAVASCRIPT

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

セットアップ

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）