条件は、イベント型ルールがいつトリガーされるかを決定するものです。
マウスクリック、フォームの送信など、追跡したい操作の種類を選択します。
詳しくは、 イベントタイプを参照してください。
必要に応じて、次のオプションを有効にします。
要素 | 説明 |
---|---|
遅延リンクアクティベーション | イベントがリンクをアクティブ化し、イベントが起動する時間があるまでリンクを遅延させる場合に有効にします。 |
イベントハンドラーを要素に直接適用 | 対象となる特定のイベントに要素ハンドラーを適用します。 この設定は、ブラウザーのバブリングおよびレイヤー化の概念に関連しています。 |
例えば、<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ツールを参照してください。 |
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 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 フィールドにコピーします。
「イベント型ルールの条件を 作成する」の説明に従って、ルールの設定を完了します。
はベータ版 CSS Selector で、技術的な制限により一部のサイトでは正しく動作しない場合があります。
要素の属性を動的に変数に割り当てることができます。
要素の属性を変数に動的に割り当てるには、次の構文を使用します。
%this.attributeName%
例えば、外部Webサイトへのリンクが複数ある検索結果ページがあるとします。 クリックされた要素のeVarを動的に埋め込むことで、クリックされたリンク id
を追跡する必要がある。
リンク例:<a id='myFirstLink' href='www.exampleLink.com'>
これを行うには、ページ上のリンクのクリック時にトリガーされるイベント型ルールを作成します。 次に、ルールの Analytics セクション内で、eVarをに設定し %this.id%
ます。
非標準の属性の場合、同様に、次のようにJavaScript関数を「%」文字 this.getAttribute()
で囲むことで、JavaScript関数を利用できます。
%this.getAttribute(attributeName)%
例えば、前の例と同じような検索結果ページがあるとします。 ただし、これらのリンクには非標準の属性が含まれ loc
ており、クリックされたリンクに基づいて動的にeVarを設定したい場合があります。
リンク例:<a id='myFirstLink' loc='top' href='www.exampleLink.com'>
これを行うには、ページ上のリンクのクリック時にトリガーされるイベント型ルールを作成します。 次に、ルールの Analytics セクション内で、eVarをに設定し %this.get Attribute(loc)%
ます。
目的の属性が標準か非標準かが不明な場合は、 w3schools.comを参照して、標準的なHTML属性について詳しく知ってください。 ただし、不確かな場合は、どちらのシナリオでも機能する非標準 getAttribute()
形式を使用できます。
この機能は、次のようなDynamic Tag Managementのルールフィールドで利用できます。
Adobe Analytics:
Google Analytics
標準属性は、カスタムコードで標準のJavaScriptを使用して参照することもできます。