Show Menu
トピック×

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

条件は、イベント型ルールがいつトリガーされるかを決定するものです。
  1. マウスクリック、フォームの送信など、追跡したい操作の種類を選択します。
    For more information, see Event Types .
  2. 必要に応じて、次のオプションを有効にします。
    要素
    説明
    リンクの有効化の遅延
    別のページに移動するリンクのクリック時に、処理に時間がかかるルールを実行する場合に有効にします。ページ移動など、クリック後に本来おこなわれるべき処理がスタートする前に待ち時間が発生するようになります。
    イベントハンドラーを要素に直接適用
    対象にした特定の要素にイベントハンドラーを適用します。この設定は、ブラウザーのバブリングおよびレイヤリング概念とも関連します。
    For example, when you click an image inside an anchor tag like <a href="abc.html"><img src="xyz.png"/></a> , you might expect the click to be associated with the anchor tag, because the tag is in the bubble stream. However, when you inspect the click in the developer tools, the click may actually affect only the <img> tag. To ensure that the event is handled correctly, associate the click with the <img> tag and do not depend on the browser to bubble up the click to a parent element. An event like a click can potentially bubble up to <body> . ルールが正しく起動するようにするには、イベントが実際にバインドされている対象を理解し、具体的にイベント型ルールを設定することが重要です。
    バブリング ​とは、イベントが最も深い要素で最初にキャプチャおよび処理され、次に外側の要素に伝達されることを意味します。
  3. 追跡したいタグの名前と、さらに絞り込むための追加のプロパティを指定します。
    See Using the CSS Selector for information about finding the correct element tag.
  4. さらに条件を追加することもできます。
  5. イベントバブリングに関する優先順位を指定します。
    イベントバブリングは、HTML DOM でのイベント伝達の方法の 1 つです。
    問題点
    ソリューション
    子要素の同じイベントでもルールを起動したい場合。
    子要素のイベントのバブリングを許可する
    子要素で既に独自のイベントがトリガーされているので、バブリングを避けたい場合。
    子要素が既にイベントをトリガーしている場合、許可しない。
    明示的にイベントを指定し、親や子要素から切り離したい場合。
    イベントに親へのバブリングを許可しない

Event types

各種の内蔵イベントタイプとその定義内容のリストです。
カテゴリ
イベント
定義
マウス
click
ポインティングデバイスのボタンが、要素の上で押下され、離された。
mouseover
ポインティングデバイスのポインターが、リスナーを付加した要素またはその子要素の上に重なった。
キーボード
keypress
キーが押下された。通常はそのキーによって文字値が発生する(この方法ではなく input を使用する)。
フォーム
focus
要素がフォーカスを得た(バブルは発生しない)。
blur
要素がフォーカスを失った(バブルは発生しない)。
submit
フォームが送信された。
change
要素がフォーカスを失った。フォーカスを得ていた間に値が変化した。
HTML5 ビデオ
ended
メディアの末尾に到達したので再生が停止した。
loadeddata
メディアの先頭フレームの読み込みが完了した。
play
再生が開始された。
pause
再生が一時停止した。
stalled
ユーザーエージェントはメディアデータの取得を試みたが、期待に反してデータを受信できなかった。
volumechange
音量が変更された。
% complete
再生時間が全体のうち所定の割合に達したことを示すイベントが発生した。例えば、10%と入力した場合、そのルールは再生時間がビデオ全長の 10%に達したときにのみ起動します。
time complete
再生時間が所定の長さに達したことを示すイベントが発生した。例えば、10 と入力した場合、そのルールは再生時間がビデオ全長の 10 秒の位置に達したときにのみ起動します。
モバイル
orientationchange
デバイスの向き(縦置き/横置き)が変更された。
zoomchange
モバイルデバイスで、ピンチインまたはピンチアウトのジェスチャー操作が実行された。
ブラウザー
tab focus
コンテンツがフォーカスを得たことでイベントが発生した。
tab blur
コンテンツがフォーカスを失ったことでイベントが発生した。
その他の
custom
DOM 上でカスタムイベントがトリガーされた。Select Custom from the Event Type drop-down list, then specify the custom event name. 詳しくは、Mozilla Developer Network で「 CustomEvent 」を参照してください。
enters viewport
要素が訪問者の目に見えるビューに初めて入った。ページの読み込み直後に要素がビューに入った場合、ルールは直ちに起動します。スクロールされた後に要素がビューに入った場合、ルールはその時点で起動します。オプションで遅延時間を指定すると、イベントをトリガーするために要素がビューに入り続けている必要がある時間の長さを変更できます(デフォルト値は 1 秒です)。
element exists
指定したセレクターの要素が、ページ内のマークアップまたは後で動的に挿入されるために存在する。1 つのルールは 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
データ要素が変化した。このイベントを使用すると、特定のデータ要素をトリガーにすることができます。For more information on a possible use case, see Add Adobe Experience Manager ContextHub Tool .

Using the CSS selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.
Web サイト上の行動やページ操作をイベントとして認識できることは、DTM の非常に大きな利点です。しかし、どの CSS 要素にルールを組み込むのが適切であるかを判断するのが難しい場合や、判断に長い時間がかかる場合も少なくありません。

Example with unique element

例えば、Web サイト上に次の図のような「Sign in or Register」(サインインまたは登録)リンクを置き、ここがユーザーによってクリックされたらトリガーされるようなルールを作成するとします。これはシンプルな例で、「Sign in or Register」(サインインまたは登録)リンクに似た他の要素は CSS 内に存在しません。
The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

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

  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
    In this example, we are creating an event-based rule that uses the Click event type to trigger the rule when users click the "Sign in or Register" link.
  2. Specify the website's URL, then click Load .
    できるだけイベントを開始するWebページに固有のものです。Web サイトの内容やアーキテクチャによって、適用される CSS スタイルシートはページごとに異なる場合があります。どのくらいの頻度でスタイルシートの変更が発生するかを実験してみると参考になります。
    これで、CSS セレクターウィジェットを埋め込んだ Web サイトが iFrame 内に読み込まれます。いろいろな要素の上にマウスカーソルを重ねてみて、ツールが機能する様子を確認してください。
    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.
  3. Sign In or Register ​をクリックします。
    セレクターの一致検査を実行するページ要素をクリックすると、その要素が緑色に変化します。The CSS Selector then generates a minimal CSS selector for that element.
    下部に、選択した要素に関する情報と、DTM に情報を送信するためのボタンを含んだパネルが表示されています。
    The number in parenthesis next to Clear indicates the number of items selected. この例の場合、指定したページに「Sign in or Register」(サインインまたは登録)リンクに似た他の要素は存在しないので、「1」が表示されます。Click Clear to remove selected items. Click Toggle Position to move the panel to the top or bottom of the iFrame as desired. クリック ? CSS Selectorを参照してください。
  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  5. Finish configuring the rule as described in Create conditions for event-based rules .
    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click Sign In or Register .

Example with similar elements

ここで、ユーザーが上部またはWebサイトの「男性」タブをクリックしたときにトリガーされるルールを作成します。この例と、上で説明したシンプルな例との違いは、「Men's」(男性用)タブと似た要素がページ上に多数存在することです。
  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
  2. Specify the website's URL, then click Load .
  3. 「男性用」タブをクリックして選択します。
    ページ上にある多くの要素が選択され、黄色にハイライトされています。The number next to Clear in parenthesis is 28 in this example, which means there are 28 elements on the page that use the "a" tag.
    「Men's」(男性用)タブがユーザーによってクリックされたらルールがトリガーされるようにするので、ここでは、これに似た他の要素を選択解除する必要があります。
    ハイライトされている類似の要素(「Women's」(女性用)など)にマウスカーソルを重ねると、その要素の周囲に赤色のボックスが表示されます。
    セレクターの一致検査を実行するページ要素をクリックすると、その要素が緑色に変化します。The CSS Selector then generates a minimal CSS selector for that element. さらに、その要素と一致するすべてのアイテムが黄色にハイライトされます。CSS Selector 範囲が広がり、選択範囲を絞り込むことができます。
    ハイライトされている要素をクリックして除外するか(赤色)、ハイライトされていない要素をクリックして選択範囲に含めます(緑色)。こうして選択と除外の操作を繰り返すことにより、ニーズに合った適切な CSS セレクターを作成できます。Shift キーを押しながらマウスカーソルを動かすと、他の選択済み要素の内側にある要素を選択できます。
  4. 赤色のボックスで囲まれた要素(「Women's」(女性用))をクリックして選択解除します。その他の類似要素もすべて同様に選択解除します。
    Notice that the number in parenthesis next to Clear is now 1.
  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  6. Finish configuring the rule as described in Create conditions for event-based rules .

CSS Selector limitations

The CSS Selector is in Beta and might not work well for some sites due to technical limitations.

Dynamically populate variables

変数には、要素の属性を動的に代入することができます。
要素の属性から変数への動的な代入を実行するには、次の構文を使用します。
%this.attributeName%

例えば、外部の Web サイトへのリンクが複数ある検索結果ページがあるとします。クリックされた要素の​ id ​で eVar を動的に設定することにより、どのリンクがクリックされているかを追跡します。
Example Link: <a id='myFirstLink' href='www.exampleLink.com'>
これを実現するには、イベント型ルールを作成して、ページ上のリンクをクリックするとトリガーされるようにします。Then, within the Analytics section of the rule, set the eVar to %this.id% .
For non-standard attributes, you can similarly leverage the JavaScript function this.getAttribute() by wrapping it in '%' characters, as follows:
%this.getAttribute(attributeName)%

例えば、前の例と同じような検索結果ページがあるとします。ただし、クリックされたリンクに基づいて eVar に動的に設定したいのは、これらのリンクに含まれている非標準の属性​ loc ​であるとします。
Example link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
これを実現するには、イベント型ルールを作成して、ページ上のリンクをクリックするとトリガーされるようにします。Then, within the Analytics section of the rule, set the eVar to %this.get Attribute(loc)% .
目的の属性が標準か非標準かわからない場合は、 w3schools.com を参照して、標準の HTML 属性について確認します。ただし、不確かな場合は、非標準の​ getAttribute() ​フォーマットを使用できます。これはどちらのシナリオでも動作します。
この機能は、以下のようなDynamic Tag Managementルールフィールドで利用できます。

Analytics variables

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

Custom script

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