シングルページアプリケーション | JavaScript用Tealium (utag.js)

イベントシステムは、JQuery拡張などの以前のイベント追跡ソリューションを置き換えます。ブラウザ履歴変更、ページロード、ハッシュ変更イベントリスナーは、シングルページアプリケーションに特に有用です。

セットアップ

シングルページアプリケーション（SPA）では、ページが訪問ごとに utag.js を一度だけロードするため、自動的なページビュートラッキングの呼び出しを抑制し、アプリケーションがこれらの呼び出しを直接行うことができます。

自動的なページトラッキングをオーバーライドするには、utag.js をロードする前にページに以下の行を追加します:

window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
window.utag_cfg_ovrd.noview = true

アプリケーションがロードされ（そして utag.js がロードされたら）、ページコード内で utag.view() トラッキング呼び出しをトリガーします。これらの呼び出しは通常、DOM-readyイベントやコンテンツビューのリフレッシュを引き起こすイベントでトリガーされます。utag.js の動作を調整するための利用可能な構成については、こちらをご覧ください。

初期ページ着陸時に宣言された utag_data オブジェクトは、これらの呼び出しで再利用されません。初期ページ着陸からのデータを使用するには、それを再宣言し、関数呼び出しで再度渡す必要があります。

グローバルおよびタグスコープの拡張は、これらの呼び出し中に実行されます。プリローダーとDOM Ready拡張は、これらの呼び出し中には実行されません。

ビューの追跡

シングルページアプリケーションでのビューの追跡は、utag.view()関数を使用して行います。

以下の utag.view() 関数呼び出しは、キー-値ペアを使用してデータを渡す方法を示しています:

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

例

以下は、訪問が “政治” を検索したコンテンツサイトの例です:

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"
})

以下のReactJSの例は、Tealiumデモアプリケーションからのもので、追加、編集、保存、削除機能のイベント追跡方法を示しています。各関数呼び出しは 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)
}