単一ページアプリケーション
セットアップ
utag.js
を訪問ごとに1回しか読み込まない単一ページアプリケーション(SPA)では、自動ページビュートラッキングコールを抑制することで、アプリケーションがそれらのコールを直接実行できるようにします。
自動ページトラッキングを上書きするには、utag.js
を読み込む前に、ページに以下の行を追加します。
window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
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)
}
このページはお役にたちましたでしょうか?
最終更新日 :: 2022年August月29日