トラッキング

ビューのトラッキング

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

utag.view() は、ユーザーがサイト内で移動するときに URL が更新されない Ajax ページ フローに対して一般的に使用されます。例としては、単一ページチェックアウトや単一ページアプリケーションがあります。

最初のページ読み込み時に宣言されたユニバーサルデータオブジェクト（UDO）utag_dataは、これらのコールによって他の目的に使用されることはありません。この関数には新しいデータ オブジェクトを明示的に渡す必要があります。  

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

次の例は、コールバック関数を使用する「製品クイック ビュー」のビューをトラッキングしています。このコールは、タグ34および12によってのみトラッキングされます。

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() 関数は、非ページ ビュー、ページでのインタラクション、その他の動的ページ イベントなどのイベントをトラッキングします。イベントのトラッキングにより、ページ 内での 訪問のインタラクションに関する情報を収集できます。ページビューのトラッキングでは訪問の移動パスに関する情報を収集するのに対し、イベントトラッキングでは訪問が移動中に実行することを監視します。

以下は、コールバック関数を使用しない、すべてのタグによりトラッキングされる「カートに追加」イベントをトラッキングする例です。 

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イベント拡張機能を使用してください。

次の例では、トラッキングコールのイベントに関連した情報が追加されます。

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

データレイヤーと Tealium イベントの詳細は、こちらから参照してください。

実装のオプション

ページビューのトラッキングではトラッキング対象のページに関するコンテキストを提供するためにデータレイヤーオブジェクトが必要であるのと同様に、イベントのトラッキングでも、トラッキングコールにデータレイヤーオブジェクトを含める必要があります。トラッキングコールのデータオブジェクトにイベントに関する変数を含めます。

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

jQueryとHTML5

jQuery拡張機能を使用して、クリック、展開、選択など、ページ内での基本的なインタラクションをトラッキングします。トラッキング対象の要素の情報プロパティを実装するには、HTML5のデータ属性を使用します。セマンティックなHTMLを使用したウェブページが必要です。

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

データ属性のある要素は、ページのコード内では次のように表示されます。

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

このリンクのクリックをトラッキングし、“JS Code"オプションを使用して関連するイベントデータを構成するには、これらの属性をjQuery拡張機能で参照します。

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

ページコード

ページ コードは、動的なページ コンテンツの更新、Ajax のページ、モーダル フォームの送信など、まだページに存在しない追加データを取得するためにクライアントのウェブ サーバーへのラウンドトリップの要求/応答が必要なイベントに使用します。

• モーダルフォーム、製品のクイックビュー、シングルページウェブサイト、製品ページ以外のページからのカートへの追加での使用に最適です。
• リンクのトラッキングには推奨されません。

動画のトラッキング

動画のトラッキングでは、多くの場合、動画プラットフォームのAPIの仕様に合わせたカスタムソリューションのコーディングが必要になります。

YouTube ビデオ トラッキング構成ガイドで、Tealium の現在のソリューションの詳細を参照してください。

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

単一ページ アプリケーションでのビューとイベントのトラッキングについて説明します。