CSTC: トリガーの概要

設定

トリガーは、検出したい要素の可視性を参照するために、1つ以上のカンマ区切りのCSSセレクターを使用して定義されます。

動作方法

トリガーは、IntersectionObserver APIを使用して、要素がビューポート（ブラウザウィンドウ）内で表示されるときに検出します。これは、要素が表示されるようにスクロールされた結果、ポップアップとして表示される、または重なり合った要素の中から選択されることによって発生する可能性があります。

• トリガーは、Contentsquareタグが最初に読み込まれたときにページが読み込まれると実行され、問題の要素が存在するかどうかを確認します。見つかった場合、要素の可視性を検出するために観察を開始します。
• トリガーは、ページが最初に読み込まれたときに問題の要素がすでに表示されている場合、発火しません。これらは無視されます。
• トリガーはMutationObserverに登録されているため、セレクターに一致する新しく追加されたノードの可視性も検出します。
• トリガーには、特定の「自然な」ページ読み込み時にトリガーを1回または複数回発火させるかどうかを指定するための2つの設定があります（サーバーから新しいページが要求されたとき）：
  1. セレクターに一致する要素がビューポート内で表示されるたびにトリガーを発火させる
     • 特定のページで複数の要素に対してトリガーを発火させたい場合、または問題のページがシングルページアプリケーション（SPA）の場合は、この設定を選択することをお勧めします。
  2. セレクターに一致する要素がビューポート内で表示されるときに、ページビューごとに最大1回トリガーを発火させる。

制限事項

• 要素が表示されるは、ネストされた要素（子要素および子孫要素）の可視性をチェックしません。
• background-color CSSプロパティを介して表示された要素は、表示されているとは見なされません：要素に不可視のテキストがあるが、可視の背景がある場合、それは不可視として扱われます。

設定

トリガーは、検出したい要素を参照するために、1つ以上のカンマ区切りのCSSセレクタを使用して定義されます。

動作方法

• トリガーは、ページの読み込み中にContentsquareタグが読み込まれたときに実行されます。
• トリガーは、document.querySelector()メソッドを使用して指定された要素の存在を確認します。
• ターゲット要素を参照する${element}変数は、補間機能からアクセス可能です。
  • たとえば、いくつかのスニペットの値フィールド（ページイベント、動的変数など）で${element.textContent}を使用してそのテキストを取得できます。

設定

トリガーは、検出したい要素の追加/挿入を参照するために、1つ以上のカンマ区切りのCSSセレクタを使用して定義され、どの頻度でそれを行いたいかを指定します。

動作方法

• トリガーはMutationObserverに登録され、挿入されたノードが提供されたセレクタと一致するかどうかを確認します。
• 要素が存在するトリガーとは異なり、これはページに既存の要素に対してはトリガーされません（Contentsquareタグがページの読み込み中に最初に実行されるとき）。
• トリガーには、特定の「自然な」ページ読み込み（サーバーから新しいページが要求されるとき）でトリガーを1回または複数回発火させるかどうかを指定するための2つの設定があります：
  
  1. ページビューごとに1回
  2. ページビュー内で要素が挿入されるたびに
     • 特定のページで複数の要素に対してトリガーを発火させたい場合や、問題のページがシングルページアプリケーション（SPA）である場合は、この設定を選択することをお勧めします。
• ターゲット要素を参照する${element}変数は、補間機能からアクセス可能です。
  • たとえば、いくつかのスニペットのvalueフィールドで${element.textContent}を使用してそのテキストを取得できます。

設定

トリガーは、削除を検出したい要素を参照するために、1つ以上のカンマ区切りのCSSセレクタを使用して定義されます。

動作方法

• トリガーはMutationObserverに登録され、削除されたノードが提供されたセレクタと一致するかどうかを確認します。
• ${element}変数は、ターゲット要素を参照しており、補間機能からアクセス可能です。
  • 例えば、いくつかのスニペットの値フィールド（ページイベント、動的変数など）で${element.textContent}を使用してそのテキストを取得できます。

設定

トリガーは、クリックまたはタップを検出したい要素を参照するために、1つ以上のカンマ区切りのCSSセレクタを使用して定義されます。

動作方法

• トリガーはクリックイベントに依存しています。
• ${element}変数は、ターゲット要素を参照しており、補間機能からアクセス可能です。
  • 例えば、いくつかのスニペットの値フィールド（ページイベント、動的変数など）で${element.textContent}を使用してそのテキストを取得できます。

設定

Contentsquareは2種類のページビューを区別しており、このスニペットを使用すると、ユースケースに応じてどちらかまたは両方で実行するかを選択できます：

• 自然 - GET/POSTリクエストとサーバーからの応答の後に「ゼロから」ページが読み込まれるとき。これはほとんどのウェブサイトが構築される方法です。通常、追跡したいすべてのページにContentsquareタグが挿入され、ページが読み込まれてレンダリングされるときにページビューが発火します。
• 人工 - シングルページアプリケーション（全体のウェブサイトまたは特定の訪問者フロー）の訪問者の旅を個々のページ/ステップに「分解/分割」するように設計されています。また、モーダルポップアップやその他のユーザーエクスペリエンスを、より詳細なJourney Analysisとレポートのための明確なステップとして指定するためにも使用できます。

動作方法

• 新しいページビューがContentsquareに送信される前に即座にトリガーされます。
• このトリガーは、次のページビューが発火する前に設定する必要があるカスタム変数に特に便利です。
• これは、初期の「自然」ページビューの前に設定する必要があるため、すべてのマスキング/アンマスキングテンプレートに利用可能な唯一のトリガーでもあります。

トリガー条件ガイドライン

マスキング目的で使用する場合、このトリガーは「すべてのページ」で発火するように常に設定する必要があります。これにより、メインのCSタグが読み込まれる前にマスキングCSSセレクタが設定されます。「カスタム」トリガー条件は、カスタム変数のような非マスキングテンプレートに使用できます。

設定

トリガーは、検出したい<form>要素を参照するCSSセレクタを使用して定義されます。

動作方法

トリガーは、<form>が送信されるときに発火するsubmitイベントをリッスンしています。

Contentsquareは、3種類のページビューを区別します：

• 自然ページビュー - GET/POSTリクエストとサーバーからの応答の後に「ゼロから」ページが読み込まれるとき。これはほとんどのウェブサイトが構築される方法です。通常、追跡したいすべてのページにContentsquareタグが挿入され、ページが読み込まれレンダリングされるとページビューが発火します。
• 人工ページビュー - シングルページアプリケーション（全体のウェブサイトまたは特定の訪問者フロー）の訪問者の旅を個々のページ/ステップに「分解/分割」するために設計されています。モーダルポップアップやその他のユーザーエクスペリエンスを、より詳細なJourney Analysisとレポートのための明確なステップとして指定するためにも使用できます。
• 更新ページビュー - ページ/タブで30分以上アイドル状態が続いた後にセッションが終了し、再度ページに対して操作が行われると再起動されるとき。新しいページビューがこのタイプで発信される新しい訪問者セッションが作成されます。

設定

• このトリガーは、スニペットがトリガーされる履歴変更の組み合わせを選択することを可能にします：
  • pushState - シングルページアプリケーション内でURLを変更しながら、前のURLを保持する方法。
  • replaceState - シングルページアプリケーション内でURLを変更しながら、前のURLを上書きして後方ナビゲーションを防ぐ方法。
  • popstate - ブラウザの戻るボタンを使用したときに発火するイベント。
  • hashchange - URLのフラグメント識別子が変更されたときに発火するイベント。
• さらに、複数の履歴変更が迅速に発生する場合に複数のトリガーを防ぐために、デバウンスウィンドウ（最大400ms）を定義できます。デバウンスされた履歴変更トリガーは、最後のイベントのみを考慮し、最初のものをスキップします。つまり、デバウンスされたイベントは、実際にイベントが発生した後最大400msで発火します。

動作方法

トリガーする前に、移動先の新しいURLが移動元のURLと異なるかどうかを確認し、新しいURLと前のURLが同じでない場合にのみ発火します。

リスナーの選択

• URL変更を伴うシングルページウェブサイト（またはそのセクション）で人工ページビューに使用する際の推奨組み合わせはpushState + popstateです。
• replaceStateを含めると、不要なトリガーが発生し、追加の人工ページビューが発火する可能性があります。

設定

トリガーは、ホバーを検出したい要素を参照するために、1つ以上のカンマ区切りのCSSセレクタを使用して定義されます。

動作の仕組み

• トリガーはmouseover eventに依存しています。
• また、element.closestメソッドを使用して、ホバーされた要素が選択された要素の内部にネストされているかどうかを確認し、単一のホバーで複数回トリガーされるのを防ぎます。