トラッキング

ページビューの追跡

utag.view() 関数は、ページビュー、仮想ページビュー、Ajaxページフローを追跡します。この関数を呼び出すと、構成したベンダータグ内の対応するページ追跡機能がトリガーされます。utag.jsは、ページの読み込み時に自動的にこの関数をトリガーします。

utag.view()は、ユーザーがサイトをナビゲートしてもURLが更新されないAjaxページフローでよく使用されます。例えば、シングルページのチェックアウトやシングルページアプリケーションなどです。

初期ページの読み込み時に宣言されるUniversal Data Object (UDO)、utag_dataは、これらの呼び出しで再利用されません。新しいデータオブジェクトをこの関数に明示的に渡す必要があります。

ベストプラクティスとして、重要なページビューイベントを識別するために変数tealium_eventを使用し、ページテンプレートを一意に識別するためにpage_typeを使用します。

以下の例は、“Product Quick View"ビューを追跡します：

utag.view({
    "tealium_event": "product_view",
    "page_type"    : "product_quick_view",
    "page_name"    : "Quick View: Shirts: Lucky Shirt",
    "product_id"   : ["12345"],
    "product_name" : ["Lucky Shirt"]
});

イベントの追跡

utag.link() 関数は、非ページビュー、ページのインタラクション、その他の動的なページイベントなどのイベントを追跡します。イベント追跡は、訪問がページ内で行うインタラクションに関する情報を収集します。ページビュー追跡が訪問のナビゲーションパスに関する情報を収集するのに対し、イベント追跡はナビゲーションステップの間に訪問が何を行ったかを監視します。

以下の例は、“Add to Cart"イベントを追跡します：

utag.link({
    "tealium_event"    : "cart_add",
    "product_id"       : ["12345"],
    "product_name"     : ["Lucky Shirt"],
    "product_quantity" : ["2"],
    "product_price"    : ["12.99"]
});

tealium_event

追跡する各種のインタラクションを一意に識別するために、予約変数tealium_eventを使用します。この変数は、Tealium iQ内でロードルール、拡張機能、データマッピングを構成するために参照されます。その他のイベントデータには、自由に選んだ変数名を使用します。

推奨されるtealium_eventの値には、以下のようなものがありますが、これに限定されるものではありません：

Tealium Events extensionを使用して、より標準的なイベントを構成します。

以下の例は、追跡呼び出しにイベントに関連する追加情報を追加します：

utag.link({
    "tealium_event"  : "social_share",
    "social_network" : "LinkedIn",
    "shared_link"    : "https://tealium.com/"
});

データレイヤーとTealiumイベントについて詳しく学びましょう。

実装オプション

ページビュー追跡が追跡されるページについてのコンテキストを提供するためにデータレイヤーオブジェクトを必要とするのと同様に、イベント追跡も追跡呼び出しにデータレイヤーオブジェクトを含める必要があります。追跡呼び出しのデータオブジェクトにイベントに関連する変数を含めます。

以下のセクションでは、Tealiumのイベント追跡をウェブサイトに実装するためのアプローチについて説明します。

jQueryとHTML5

jQuery Extensionを使用して、クリック、展開、選択などのページ内の基本的なインタラクションを追跡します。HTML5のdata attributesを使用して、追跡要素の情報プロパティを実装します。semantic HTMLを持つウェブページが必要です。

• リンククリック、ボタンクリック、フォームフィールドのインタラクションに最適。
• Ajaxページフロー、フォームの送信には推奨されません。

データ属性を持つ要素は、ページコード内で以下のように表示されるかもしれません：

<a href="/logout" data-click_name="Sign Out" data-click_category="header">Log out</a> 

jQuery Extensionでこのリンクのクリックを追跡し、“JS Code"オプションを使用して関連するイベントデータを構成するために、これらの属性を参照します。

• 特定のデータ属性を持つ要素を識別するためにセレクタを使用します。例えば、a[data-click_name]。
• “JS Code"オプションを使用して、クリックされた要素のデータ属性を参照する変数を構成します。例えば、$(this).data('click_name')。

ページコード

ページコードは、動的なページコンテンツのリフレッシュ、Ajaxページ、モーダルフォームの送信、またはクライアントのウェブサーバーにリクエスト/レスポンスを行ってページに既に存在しない追加データを取得する必要があるイベントの追跡に使用されます。

• モーダルフォーム、商品のクイックビュー、シングルページウェブサイト、非商品ページからのカートへの追加に最適。
• リンク追跡には推奨されません。

ビデオ追跡

ビデオ追跡は、ビデオプラットフォームAPIの仕様に合わせたカスタムソリューションのコーディングを必要とすることがよくあります。

Tealiumの現在のソリューションについては、YouTube Video Tracking Setup Guideを参照してください。

シングルページアプリケーション

シングルページアプリケーションのビューとイベントの追跡について学びましょう。