Yahoo!広告

Yahoo!広告ヘルプ

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

「イベントバインディング」とは、作成したイベントが有効となるページを設定することです。対象のページにおいて、イベントの条件が満たされた時点でタグタグとは、特殊な記法によってウェブサイト内に記述され、情報の意味づけや分類などに用いられる短い単語・フレーズなどを指します。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