イベント型ルールの条件の作成

条件は、イベント型ルールがいつトリガーされるかを決定するものです。

マウスクリック、フォームの送信など、追跡したい操作の種類を選択します。

詳しくは、イベントタイプを参照してください。

必要に応じて、次のオプションを有効にします。

要素	説明
遅延リンクアクティベーション	イベントがリンクをアクティブ化し、イベントが起動する時間があるまでリンクを遅延させる場合に有効にします。
イベントハンドラーを要素に直接適用	対象となる特定のイベントに要素ハンドラーを適用します。この設定は、ブラウザーのバブリングおよびレイヤー化の概念に関連しています。

例えば、<a href="abc.html"><img src="xyz.png"/></a> というアンカータグで囲まれた画像をクリックする場合、タグがバブリングの流れの上にあるので、クリックがアンカータグに関連付けられるように思えます。しかし、開発ツールでクリックを調査すると、クリックは、実際には <img> タグにのみ影響しているかもしれません。イベントが正しく処理されるようにするには、クリックを <img> タグに関連付け、親要素へのバブリングというブラウザー仕様への依存を避けるのが得策です。クリックのようなイベントは、潜在的に <body> にまでバブリングする可能性があります。イベントが実際にバインドされている場所を理解し、ルールが正しく実行されるようにターゲットすることが重要です。

バブリングとは 、イベントが最初に最も内側の要素でキャプチャおよび処理され、次に外側の要素に伝播されることを意味します。

追跡したいタグの名前と、さらに絞り込むための追加のプロパティを指定します。

正しい要素タグの検索について詳しくは、「CSSセレクターの使用」を参照してください。
Select and set up any additional criteria or condition types you wish to bind to the rule.

イベントバブリングに関する優先順位を指定します。

イベントバブリングは、HTML DOMでのイベント伝達の1つの方法です。

問題	ソリューション
子要素に関連する操作をルールの起動に追加したい。	子要素のイベントにバブリングを許可する
子要素が既に独自のイベントをトリガーしている場合に、バブリングを防ぐ必要があります。	子要素が既にイベントをトリガーしている場合に許可しない
特定したルールセレクターのイベントが、イベント階層の要素自体を超えないようにする必要があります。	イベントが親にバブリングを行わないようにする

イベントタイプ

組み込みイベントタイプのリストと各定義方法。

カテゴリ	イベント	定義
マウス	click	ポインティングデバイスのボタンが要素上で押され、離された。
	mouseover	ポインティングデバイスが、リスナーがアタッチされた要素上、またはその子要素上に移動します。
キーボード	keypress	キーが押され、そのキーは通常、文字値を生成します（代わりにinputを使用します）。
フォーム	focus	要素がフォーカスを受け取った（バブルは発生しない）。
	blur	要素がフォーカスを失った（バブルは発生しない）。
	submit	フォームが送信されます。
	change	要素がフォーカスを失い、フォーカスを得てから値が変わった。
HTML5ビデオ	ended	メディアの終わりに達したため、再生が停止しました。
	loadeddata	メディアの最初のフレームの読み込みが完了した。
	play	再生が開始されました。
	pause	再生が一時停止した。
	stalled	ユーザーエージェントがメディアデータの取得を試みているが、データが予期せず取得されない。
	volumechange	ボリュームが変更されました。
	% complete	再生時間全体に対して、指定した割合のイベントが発生した。例えば、10%と入力した場合、このルールは再生時間がビデオ全長の10%に達した場合にのみ起動します。
	time complete	再生時間が指定された時間に達したときにイベントが発生した。例えば、10と入力した場合、このルールは再生時間がビデオ全長の10秒に達したときにのみ起動します。
Mobile	orientationchange	デバイス（縦置き/横置き）の向きが変更されました。
	zoomchange	モバイルデバイスでピンチまたはスプレッド操作が実行されたとき。
Browser	タブフォーカス	イベントは、コンテンツがフォーカスを得たときにトリガーされます。
	tab blur	コンテンツがフォーカスを失ったときにイベントがトリガーされます。
その他	custom	カスタムイベントがDOMでトリガーされた。 Select Custom from the Event Type drop-down list, then specify the custom event name. For more information, see CustomEvent on the Mozilla Developer Network.
	enters viewport	要素が最初に訪問者の表示に来たとき。ページの読み込み直後に要素が表示になった場合、ルールは直ちに起動します。スクロール後に表示になった場合、ルールはその時点で起動します。オプションで遅延を指定すると、イベントがトリガーされるまでの表示時間を決定できます（デフォルト値は1秒です）。
	element exists	指定したセレクターの要素が、ページのマークアップ内にあるか、後で動的に挿入されるために存在する場合。各ルールは1回だけ起動します。
	pushStateまたはhashchange	URLの末尾のURLパスまたはハッシュ（フラグメント識別子）が変更された。または `pushState` `hashchange` イベントは、ページを再読み込みせずにコンテンツを変更する単一ページアプリ(SPA)で使用できます。 SPAの作成に使用できる一般的な開発フレームワークには、AngularとReactがあります。このイベントタイプを使用すると、開発者に頼らずにイベント型ルールを作成できます。これらのルールは、SPAで次のような一般的な機能が実行された場合に起動します。 HTML5履歴 `pushState` APIを使用してURLパスが変更された。の使用について詳し `pushState`くは、Mozilla Developer Networkで「Adding and Modifying History Entries 🔗 」を参照してください。ユーザーがページ上の表示や場所を変更したことが原因でハッシュが変更された。の使用について詳し `hashchange`くは、Mozilla Developer Networkの Hashchange を参照してください。
	time passed	秒単位の値。イベントは、指定された秒数が経過した後にトリガーされます。
	dataelementchanged	日付要素が変更されました。このイベントを使用すると、特定のデータ要素をトリガーとして使用できます。使用例について詳しくは、 Adobe Experience Manager追加 ContextHubツールを参照してください。

CSSセレクターの使用

DTMルールビルダーを使用す CSS Selector ると、イベント型ルールのトリガーとして使用するCSS要素を、すばやく簡単に、DTMルールビルダーから選択できます。

DTMの最も大きな利点の1つは、Webサイト上での行動やページ操作をイベントできることです。ただし、ルールに含めるCSS要素を探すのは難しく、時間がかかる場合があります。

一意の要素を持つ例

例えば、Webサイト上の「Sign in or Register」（サインインまたは登録）リンクをクリックしたときにトリガーされるルールを作成するとします。次の図を参照してください。この例は単純です。「Sign in or Register」（サインインまたは登録）リンクに似たような要素がCSS内にないからです。

以下に説明するより複雑な例は、上部のタブ（「Men's」、「Women's」、「Equipment」など）など、ページに類似する要素が多数ある場合の使用方法を示しています。 CSS Selector

CSSセレクターを使用するには：

ルールの CSS Selector 作成中にアイコンをクリックして、DTM内の Target ウィジェットにアクセスします 🔗。

この例では、「Sign in or Register」（サインインまたは登録）リンクがクリックされた場合に、 Click イベントタイプを使用してルールをトリガーするイベント型ルールを作成します。
WebサイトのURLを指定し、をクリックし Loadます。

メモ

イベントするWebページをできるだけ具体的に指定します。 Webサイトとそのアーキテクチャに応じて、CSSスタイルシートがページ間で変化する場合があります。スタイルシートが変更される頻度を試してみると便利です。

これで、CSSセレクターウィジェットを埋め込んだWebサイトがiFrameに読み込まれました。異なる要素にマウスを移動すると、ツールの動作を確認できます。

を使用せずにこのルールを作成する場合 CSS Selectorは、目的のページ要素を調べ、使用する適切なCSSを判断します。を使用 CSS Selectorする場合は、ページ上でルールをトリガーする要素をクリックします。
「Sign In or Register」をクリックします。

セレクターを一致させるページ要素をクリックすると、その要素が緑に変わります。そ CSS Selector の後、がその要素に対して最小限のCSSセレクターを生成します。

下部に、選択した要素に関する情報と、DTMに情報を送信するためのボタンが含まれたパネルが表示されます。

の横の括弧付き数字は、選択した項目数 Clear を示します。この例では、「Sign in or Register」（サインインまたは登録）リンクは、指定されたページに似たものがないので、「1」が表示されます。クリック Clear して、選択した項目を削除します。必要に応じ Toggle Position て、パネルをiFrameの上部または下部に移動します。 Click ? を、に関する表示ヘルプ情報に追加し CSS Selectorます。
をクリック Send to DTM して、CSSをDTM内の Element Tag or Selector フィールドにコピーします。
「イベント型ルールの条件を作成する」の説明に従って、ルールの設定を完了します。

コードを記述したり要素を検査したりしないで、ユーザーがクリックしたときにトリガーされるイベント型ルールを作成し Sign In or Registerました。

類似の要素を持つ例

次に、ユーザーが上部またはWebサイトの「Men's」（男性用）タブをクリックしたときにトリガーされるルールを作成するとします。この例と上記で説明した単純な例との違いは、「Men's」（男性用）タブに似た要素がページ上に多数あるという点です。

ルールの CSS Selector 作成中にアイコンをクリックして、DTM内の Target ウィジェットにアクセスします 🔗。
WebサイトのURLを指定し、をクリックし Loadます。
「Men's」（男性用）タブをクリックして選択します。

ページ上の多くの要素が選択され、黄色でハイライト表示されています。この例では、括弧で囲ま Clear れた数字は28です。これは、「a」タグを使用する要素がページに28個あることを意味します。

ユーザーが「Men's」（男性用）リンクをクリックしたときにルールをトリガーするので、他の類似した要素の選択を解除する必要があります。

ハイライト表示された類似の要素(「Women's」（女性用）など)の上にマウスを移動すると、その要素の周りに赤いボックスが表示されています。

セレクターを一致させるページ要素をクリックすると、その要素が緑に変わります。そ CSS Selector の後、がその要素に対して最小限のCSSセレクターを生成します。さらに、その要素に一致するすべての要素が黄色でハイライトされます。開始が広い範囲に広がり、選択範囲を絞り込むことができます。 CSS Selector

ハイライトされた要素をクリックして除外するか（赤）、ハイライトされていない要素をクリックして追加します（緑）。この選択と除外のプロセスを通じて、ニーズに合った最適なCSSセレクターを作成できます。 Shiftキーを押しながらマウスを動かすと、選択した他の要素の内側にある要素を選択できます。
赤いボックスが付いた要素(「Women's」（女性用）)をクリックして、選択を解除し、その他の類似要素をすべて選択解除します。

の横の括弧付き数字が1にな Clear ったことに注意してください。
をクリック Send to DTM して、CSSをDTM内の Element Tag or Selector フィールドにコピーします。
「イベント型ルールの条件を作成する」の説明に従って、ルールの設定を完了します。