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

組み込みのイベントリスナーシステムは、jQueryを使用せずにトラッキングイベントのリスニングとトリガーを行うノーコードソリューションを提供します。詳細は、イベントについてを参照してください。

必要条件

この拡張機能には以下が必要です：

• jQueryバージョン1.7以降

動作方法

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

拡張機能の使用方法

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

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

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

• 主要なセレクタ：（デフォルト：body）対象とする要素の親セレクタ文字列。

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

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

• トラッキングイベント：イベントがトリガーされたときに行うアクション。

  • link：utag.link()を呼び出す
  • view：utag.view()を呼び出す
  • custom：提供したコードを実行する

• Set：設定したい変数を選択します。

• To：変数に割り当てたい値のタイプを選択します。隣のテキストフィールドに新しい値を入力します。さらに変数を設定したい場合は、テキストボックスの最後にある**+**ボタンをクリックします。

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

生成されるコード

この拡張機能のために生成されるJavaScriptコードは、トラッキングイベントと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

});

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

トラッキングイベントをcustomに設定すると、テキストボックスに提供したコードが実行されます。

セレクタの決定

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

操作の順序

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

データレイヤーとの連携

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

条件

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

変数の設定

viewイベントやlinkイベントをトリガーする場合、トラッキングイベントの一部としてデータレイヤー変数を設定することも多いでしょう。変数を設定しない場合、空のトラッキング呼び出しが行われます：

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']
    })
});