Show Menu
トピック×

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

条件は、イベント型ルールがいつトリガーされるかを決定するものです。
  1. マウスクリック、フォームの送信など、追跡したい操作の種類を選択します。
    詳しくは、「 イベントタイプ
  2. 必要に応じて、次のオプションを有効にします。
    要素
    説明
    遅延リンクアクティベーション
    このオプションは、イベントがリンクをアクティブにし、イベントが起動するまでリンクを遅延させる場合に有効にします。
    要素にイベントハンドラーを直接適用
    対象となる特定のイベントに要素ハンドラーを適用します。 この設定は、ブラウザーのバブリングとレイヤー化の概念に関連しています。
    例えば、 <a href="abc.html"><img src="xyz.png"/></a> というアンカータグで囲まれた画像をクリックする場合、タグがバブリングの流れの上にあるので、クリックがアンカータグに関連付けられるように思えます。しかし、開発ツールでクリックを調査すると、クリックは、実際には <img> タグにのみ影響しているかもしれません。イベントが正しく処理されるようにするには、クリックを <img> タグに関連付け、親要素へのバブリングというブラウザー仕様への依存を避けるのが得策です。クリックのようなイベントは、潜在的に <body> にまでバブリングする可能性があります。ルールが正しく実行されるように、イベントが実際にバインドされている場所を理解し、ターゲットすることが重要です。
    バブリングとは 、イベントが最初に最も内側の要素でキャプチャされ、処理された後、外側の要素に伝達されることを意味します。
  3. 追跡したいタグの名前と、さらに絞り込むための追加のプロパティを指定します。
    正しい 要素タグの検索について詳しくは 、「CSSセレクターの使用」を参照してください。
  4. Select and set up any additional criteria or condition types you wish to bind to the rule.
  5. イベントバブリングに関する優先順位を指定します。
    イベントバブリングは、HTML DOMでのイベント伝播の1つの方法です。
    問題
    ソリューション
    特定したルールセレクターの子要素に関連する操作を行って、ルールを実行する必要がある。
    子要素のイベントにバブルを許可する
    子要素が既に独自の要素をトリガーしている場合に、バブリングを防ぐイベント。
    子要素が既にイベントをトリガー
    指定したルールセレクターのイベントが、要素階層の要素自体を超えないようにする必要はありません。イベント階層の要素を超えると、
    親にバブリングをイベントに許可しない

Event types

組み込みイベントタイプのリストと定義方法。
カテゴリ
イベント
定義
マウス
click
ポインティングデバイスのボタンが要素上で押され、離された。
mouseover
ポインティングデバイスが、リスナーが接続されている要素またはその子要素の1つに移動します。
キーボード
keypress
キーが押され、そのキーは通常、文字値を生成します(代わりに入力を使用)。
_Forms
focus
要素がフォーカスを受け取りました(バブルは発生しません)。
blur
要素がフォーカスを失った(バブルは発生しない)。
submit
フォームが送信されます。
change
要素がフォーカスを失い、フォーカスを得てから値が変わった。
HTML5ビデオ
ended
メディアの終わりに達したため、再生が停止しました。
loadeddata
メディアの最初のフレームの読み込みが完了した。
play
再生が開始されました。
一時停止
再生が一時停止した。
停止
ユーザーエージェントがメディアデータを取り込もうとしていますが、データが予期せず取得されない。
volumechange
ボリュームが変更されました。
% complete
再生時間の合計に対して、指定した割合のイベントを発行します。 例えば、10%と入力した場合、このルールはビデオの全長の10%が再生された場合にのみ起動します。
時間完了
再生時間が指定されたイベントを発行します。 例えば、10と入力した場合、このルールはビデオの全長の10秒間のみが再生されたときに起動します。
Mobile
orientationchange
デバイスの向き(縦置き/横置き)が変更されました。
zoomchange
ピンチまたはスプレッドジェスチャがモバイルデバイスで実行されたとき。
ブラウザー
タブフォーカス
イベントは、コンテンツがフォーカスを得たときにトリガーされます。
タブぼかし
イベントは、コンテンツがフォーカスを失ったときにトリガーされます。
その他
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.
ビューポート
要素が最初に要素の表示に来たとき。 ページの読み込み直後に表示が発生した場合、ルールは直ちに起動します。 スクロール後に要素が表示になった場合、ルールが実行されます。 オプションで遅延を指定すると、イベントがトリガーされるまでの表示時間を決定できます(デフォルト値は1秒)。
要素が存在する
指定したセレクターの要素が、ページのマークアップ内にあるか、後で動的に挿入されるために存在する場合。 各ルールは1回だけ実行されます。
pushStateまたはhashchange
URLの末尾のURLパスまたはハッシュ(フラグメント識別子)が変更されました。 または pushState hashchange イベントは、ページが再読み込みされず、コンテンツが変更される単一ページアプリ(SPA)で使用できます。 SPAの作成に使用できる一般的な開発フレームワークには、AngularとReactが含まれます。 このイベントタイプを使用すると、開発者に依存しないイベントベースのルールを作成できます。 これらのルールは、次のようなSPAの共通機能が発生した場合に実行されます。HTML5 履歴APIの使用に基づいてURLパスが変更され pushState ました。 の使用方法の詳細については、Mozilla Developer Network pushState Adding and Modifying History Entries (履歴エントリの追加と変更)を参照してください。 ユーザーがページ上の場所や表示を変更したことが原因でハッシュが変更された。 の使用に関する詳細は、Mozilla Developer Network hashchange の「 Hashchange 」を参照してください。
経過時間
秒単位の値。 イベントは、指定された秒数が経過した後にトリガーされます。
dataelementchanged
日付要素が変更されました。 このイベントを使用すると、特定のデータ要素をトリガーとして選択できます。 使用例について詳しくは、 追加Adobe Experience Manager ContextHubツールを参照してください

CSSセレクターの使用

DTMルールビル CSS Selector ダーを離れることなく、イベントベースのルールのトリガーとして使用するCSS要素をすばやく簡単に選択できます。
DTMの最大の利点の1つは、Webサイト上での行動やページのインタラクションをイベントできることです。 ただし、ルールに含めたいCSS要素を見つけるのは困難で時間がかかる場合があります。

一意の要素を持つ例

例えば、次の図に示すように、Webサイト上の「Sign in or Register」(サインインまたは登録)リンクをユーザーがクリックしたときにトリガーされるルールを作成します。 この例は、「Sign in or Register」(サインインまたは登録)リンクがCSSに類似した要素を持たないので、簡単です。
以下に示すより複雑な例は、ページ上部のタブ(「Men's」、「Women's」、「Equipment」など)など、類似する要素が多数ある場合に、を使用する方法を示しています。 CSS Selector

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

  1. ルールの作成 CSS Selector 中にアイコンをクリックして、DTM内 Target のウィジェ ットにアクセスします
    この例では、イベントが「サインインまたは登録」リンクをクリックしたときにイベントタイプを使用してルールをトリガーする、ユーザーベースのルールを作成しています。 Click
  2. WebサイトのURLを指定し、をクリックしま Load ​す。
    できる限りイベントするWebページに固有です。 Webサイトとそのアーキテクチャによっては、CSSスタイルシートがページ間で変化する場合があります。 スタイルシートが変更される頻度を試してみると役に立ちます。
    これで、CSSセレクターウィジェットが埋め込まれた状態で、WebサイトがiFrameに読み込まれます。 様々な要素にマウスを移動して、ツールの動作を確認します。
    を使用せずにこのルールを作成する場合は、目 CSS Selector的のページ要素を調べて、使用する適切なCSSを判断します。 を使用し CSS Selectorて、ルールをトリガーするページ上の要素をクリックします。
  3. Sign In or Register 」をクリックします。
    セレクターを一致させるページ要素をクリックすると、その要素が緑色に変わります。 その後、 CSS Selector がその要素の最小限のCSSセレクターを生成します。
    下部のパネルには、選択した要素に関する情報と、DTMに情報を送信するためのボタンが含まれています。
    の横の括弧付きの数字は、選択さ Clear れた項目の数を示しています。 この例では、「Sign in or Register」(サインインまたは登録)リンクは、指定したページに似たものがないので、「1」が表示されます。 選択した項 Clear 目を削除するには、をクリックします。 必要に Toggle Position 応じて、パネルをiFrameの上部または下部に移動します。 Click ? を表示のヘルプ情報に追加しま CSS Selectorす。
  4. をクリ Send to DTM ックして、CSSをDTM内のフィールド Element Tag or Selector にコピーします。
  5. ルールの設定を完了します。詳しくは、「 イベント型ルールの条件を作成 」を参照。
    コードを記述したり、要素を検査したりしないで、ユーザーがクリックしたときにトリガーされるイベント型ルールを作成しまし Sign In or Register ​た。

類似した要素の例

次に、ユーザーが上部の「男性用」タブをクリックしたとき、またはWebサイトでトリガーされるルールを作成するとします。 この例と上記で説明した簡単な例との違いは、「Men's」タブに似た要素がページ上に多数あることです。
  1. ルールの作成 CSS Selector 中にアイコンをクリックして、DTM内 Target のウィジェ ットにアクセスします
  2. WebサイトのURLを指定し、をクリックしま Load ​す。
  3. 「Men's」タブをクリックして選択します。
    ページ上の多くの要素が選択され、黄色でハイライト表示されています。 この例では、括弧で囲ま Clear れた数字は28で、「a」タグを使用する要素がページ上に28個あることを意味します。
    ユーザーが「Men's」(男性用)リンクをクリックしたときにルールをトリガーするので、他の類似要素の選択を解除する必要があります。
    ハイライト表示されている類似の要素(「Women's」など)にマウスを移動すると、その要素の周りに赤いボックスが表示されます。
    セレクターを一致させるページ要素をクリックすると、その要素が緑色に変わります。 その後、 CSS Selector がその要素の最小限のCSSセレクターを生成します。 さらに、その要素に一致するすべての要素が黄色でハイライトされます。 開始 CSS Selector が広くなり、選択を絞り込むことができます。
    ハイライト表示された要素をクリックして拒否するか(赤)、ハイライト表示されていない要素をクリックして追加します(緑)。 この選択と除外のプロセスを通じて、ニーズに合った最適なCSSセレクターを作成できます。 Shiftキーを押しながらマウスを動かすと、選択した他の要素の内側にある要素を選択できます。
  4. 赤いボックス(「Women's」)を持つ要素と、その他すべての類似した要素をクリックして選択解除します。
    の横の括弧で囲まれた数字が1にな Clear ったことに注意します。
  5. をクリ Send to DTM ックして、CSSをDTM内のフィールド Element Tag or Selector にコピーします。
  6. ルールの設定を完了します。詳しくは、「 イベント型ルールの条件を作成 」を参照。

CSSセレクターの制限事項

はベー 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のルールフィールドで利用できます。

Analytics 変数

  • Adobe Analytics:
    • リンクトラッキング、ページデータ、階層
    • グローバル変数とイベント
  • Google Analytics
    • ページビュー、イベント、カスタム変数

カスタムスクリプト

標準属性は、カスタムコードの通常のJavaScriptを使用して参照することもできます。