Yahoo!広告

Yahoo!広告ヘルプ

「イベントバインディング」の作成

「イベントバインディング」とは、作成したイベントが有効となるページを設定することです。対象のページにおいて、イベントの条件が満たされた時点でタグが実行され、取得したデータはデータエレメントに格納されます。

イベントとは
イベントバインディングを追加する
トリガーの一覧
バインディング方法について
エレメントセレクターについて

イベントとは


通常、タグはページがすべて読み込まれた段階で実行されますが、イベントを設定することで、任意のタイミングでタグを実行させることができます。
イベントは、HTMLの「エレメント」と「トリガー」の組み合わせによって構成されます。
「エレメント」とは、HTMLの記述において、画像やボタンなどページ内の特定の「要素」を指します。
「トリガー」とは、クリックやマウスオーバーなどタグを実行させるきっかけとなる「動作」を意味します。

例として、以下のようなタイミングでタグを実行させたい場合には、そのタイミングを「エレメント」と「トリガー」に分解したうえで設定します。

タグを実行するタイミング エレメント トリガー
ECサイトで商品を「お気に入り」に設定したとき お気に入りの「ボタン」 click (クリック)
マウスカーソルがバナー広告の上に乗ったとき バナー広告の「画像」 mouseover (マウスオーバー)
カートに入っている商品の個数を変更したとき 個数の「フォーム」 change (内容の変更)


イベントの作成方法は、以下のページの操作手順を開き、「7. 条件、スケジュール、フリークエンシーキャップの設定方法」を参照してください。
タグの実行条件を設定する

イベントバインディングを追加する


イベントバインディングの追加方法は、以下のとおりです。

操作手順
  1. 画面左のメニューから「ウェブサイト」をクリックします。
    ウェブサイト
  2. ページ一覧でイベントバインディングを追加するページをクリックします。
    ページ選択
  3. 「バインディング」をクリックします。
    バインディング
  4. 「イベントバインディング」をクリックします。
    イベントバインディング
  5. 「イベントバインディングを追加」を押します。
    イベントバインディングを追加
  6. 指定したページに設定する「イベント」をプルダウンから選択します。
    a. 指定したページに作成済みのイベントを適用する場合は、該当のイベント名を選択します。
    b. 新たなイベントを作成する場合は、「新規作成」を選択します。
    イベント選択
  7. ボックスの右側にある「一覧」をクリックし、設定する「トリガー」をプルダウンから選択します。
    トリガー選択
  8. 「バインディング方法」を選択します。
    バインディング方法
  9. 「エレメントセレクター」を入力します。
    エレメントセレクター
  10. すべての設定が完了したら「保存」を押します。
    保存

トリガーの一覧


Yahoo!タグマネージャーが標準で提供するトリガーは以下のとおりです。

トリガー名 発生条件
ajaxcomplete ページ内で発生したajax処理が完了した場合
blur 指定した要素からフォーカスが外れた場合
change 内容が変更された場合
click 指定した要素がクリックされた場合
error エラーが発生した場合
focus 指定した要素がフォーカスされた場合
keyup 指定した要素にフォーカスがある時にキーが離された場合
keydown 指定した要素にフォーカスがある時にキーが押された場合
mouseup 指定した要素上でマウスボタンが放された場合
mouseout 指定した要素内からマウスカーソルが出た場合
mouseover 指定した要素内にマウスカーソルが入った場合
mousedown 指定した要素内でマウスボタンが押された場合
scroll スクロールした場合

バインディング方法について

バインディング方法には「ダイレクト」と「インダイレクト」の2種類があります。

  • 「ダイレクト」は、対象の要素がページに存在している場合、その要素が読み込まれた時点でイベントが利用可能となります。
  • 「インダイレクト」では、ページが読み込まれた後、DOMによって対象の要素が操作された時点でイベントが利用可能となります。
    最初に読み込まれたページには対象の要素が表示されておらず、後にDOMからHTMLを書き換えることで表示される場合(モーダルなど)に用います。

※初期設定では「ダイレクト」が設定されています。
※ダイレクトを指定した際、正常に動作しない場合には、インダイレクトを指定して再度お試しください。
※DOMの詳細につきましては「Yahoo!タグマネージャー ご利用ガイド 上級編」P.5をご参照ください。

エレメントセレクターについて

エレメントセレクターでは、イベントを発生させる対象であるエレメント(要素)を指定します。エレメントセレクターの書式は、CSSセレクターの記法に準じます。

エレメントセレクターの設定例

セレクターの種類 HTMLの例 エレメントセレクターの記述
idセレクタ <p id="sample"> #sample
classセレクタ <div class="sample"> .sample