jQuery onHandler (jQuery 1.7以降) 拡張機能

前提条件

• jQuery バージョン1.7以上

仕組み

jQuery onHandler拡張機能は、追跡するためのjQueryセレクタ識別子を選択し、次にトリガーアクションイベントのタイプを選択することで動作します。クリック、マウスダウン、フォーカスなどの標準的なページ上のイベントは、カスタムJavaScriptコードを提供することで追跡することができます。

拡張機能の使用

始める前に、拡張機能の動作方法について理解しておいてください。

拡張機能が追加されると、いくつかの構成オプションがあります。jQuery on() メソッドに馴染みがあるなら、これらの構成は馴染み深いものになるでしょう。

• jQuery Selector: イベントをトリガーする主要な選択要素から要素をフィルタリングするためのセレクタ文字列。

• Primary Selector: (デフォルト: body) ターゲットとする要素の親セレクタ文字列。

• Trigger On: アクションをトリガーするイベントタイプ。

  • show: 隠れていた要素がページ上に表示されるとき。
  • hide: 表示されていた要素がページから隠れるとき。
  • click: マウスポインタが要素の上にあり、マウスボタンが押されてから離されるとき。
  • mousedown: マウスポインタが要素の上にあり、マウスボタンが押されるとき。
  • mouseup: マウスポインタが要素の上にあり、マウスボタンが離されるとき。
  • mouseover: マウスポインタが要素に入るとき。
  • change: <input>、<select>、<textarea> 要素内の値が変更されるとき
  • blur: 要素がフォーカスを失うとき、例えばマウスがそれから離れたときやタブキーが押されたとき。
  • focus: 要素がフォーカスを得るとき、例えばマウスクリックやタブキーで選択されたとき。

• Tracking Event: イベントがトリガーされたときのアクション。

  • link: utag.link()を呼び出す
  • view: utag.view()を呼び出す
  • custom: あなたが提供するコードを実行する

• Set To: リンクとビューのアクションと一緒に使用され、utag.view()とutag.link()に渡されるデータレイヤー変数を構成することができます。

• Condition: (オプション) 拡張機能が全体として実行されるかどうかを制御する条件を追加することができます。

生成されるコード

この拡張機能のために生成されるJavaScriptコードは、Tracking EventとSet Toの構成によって異なります。構成は以下の形式のコードを生成します：

$( "**Primary Selector**" ).on( "**Trigger On**", "**jQuery Selector**", function() {
    // ------------------
    // Tracking Event: link (or view)
    // utag.link({
    //  Variables from Set To
    //      "variable1" : "value1",
    //      "variable2" : "value2"
    //  });

    // ------------------
    // Tracking Event: custom
    // Your code here

});

Tracking Eventがlinkまたはviewに構成されているとき、実行されるコードは単純に対応するutagトラッキング呼び出し、utag.link()またはutag.view()への呼び出しです。Set Toオプションを使用してデータレイヤー変数を構成する場合、それらはトラッキングメソッドに渡されるインラインオブジェクトとして表示されます。

Tracking Eventをcustomに構成すると、テキストボックスに提供するコードが実行されます。

セレクタの決定

ページ要素のセレクタを決定する方法は多数あります。この記事要素のCSSセレクタの決定方法で詳しく読むことができます。

操作の順序

この拡張機能は常にDOM Readyで実行されることに注意してください。これは、ページの読み込み時に一度だけ実行され、All Tags拡張機能からはバンド外で実行されます。操作の順序について詳しく学びましょう。

データレイヤーとの連携

この拡張機能では、条件を作成したり、トラッキング呼び出しで値を構成したりするために、データレイヤー内の変数を参照する必要があることがよくあります。これがどのように動作するかを知っておくことは重要です。

条件

この拡張機能に条件を追加すると、値はutag.dataオブジェクトで参照されます。これは、Universal Tagがページ内で実行されるときに作成されるデータオブジェクトです。

変数の構成

ビューイベントやリンクイベントをトリガーする場合、トラッキングイベントの一部としてデータレイヤー変数を構成することもあります。変数を構成しない場合、空のトラッキングが行われます：

utag.link(); // or utag.view()

変数を構成する場合、それらは構成され、匿名データオブジェクトとしてトラッキング呼び出しに渡されます。このような形になります：

utag.link({
    "variable1" : "value1",
    "variable2" : "value2"
});

構成できる値は標準のオプションを使用します：

• Text: 値はそのまま渡されます。
• Variable: 値はutag.dataから取得されます。
• JS Code: $(this)オブジェクトを参照して、イベントアイテムに基づく動的な値にアクセスできます。

例

ページ上にフィードバックフォームがあり、その送信ボタンのクリックを追跡して、入力されたコメントと訪問のログインユーザー名を収集したいとします。呼び出したいトラッキング呼び出しは次のようになります：

utag.link({
    "tealium_event": 'feedback_submitted',
    "feedback_message": '',
    "username": ''
})

このイベントをjQuery拡張機能で構成するには、送信ボタンのセレクタと3つのデータレイヤー変数が必要です。イベントの名前はハードコーディングされ、ユーザー名はすでにページUDOに記入されていますが、フィードバックメッセージはフォームから動的に取得する必要があります。この例では、フィードバックフォームのIDはfeedbackFormです。

拡張機能でこれがどのように見えるか見てみましょう：

この例では、ボタンのセレクタを決定する必要がありました：input.submit-action。

ページ上に複数の送信ボタンがある可能性があるため、Primary Selectorも構成して、セレクタをフィードバックフォームだけに絞り込みました。

フィードバックテキストは、jQueryを使用してフォーム内のtextarea入力の値を動的に取得します。また、username変数はすでにUDOに構成されているので、その値を再利用してトラッキング呼び出しに含めることができます。この拡張機能は、ページ上で次のコードを生成します：

jQuery('#feedbackForm').on('mousedown', 'input.submit-action', function(e) {
    utag.link({
        "tealium_event"     : 'feedback_submitted',
        "feedback_message"  : $('#feedbackForm textarea').val(),
        "username"          : utag.data['username']
    })
});