CSTC: トリガー概要

構成

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

仕組み

トリガーはIntersectionObserver APIを使用して、要素がビューポート（ブラウザウィンドウ）内で可視になるタイミングを検出します。これは、要素がスクロールで表示される場合、ポップアップとして表示される場合、または重なり合う要素（ページ上のタブ付きコンテンツのような）から選択される場合などが含まれます。

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

制限事項

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

構成

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

動作の仕組み

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

構成

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

動作方法

• トリガーはMutationObserverに登録され、挿入されたノードが指定されたセレクタに一致するかどうかをチェックします。
• Element Existsトリガーとは異なり、このトリガーはページロード時にContentsquareタグが最初に実行された時点で既に存在する要素にはトリガーされません。
• トリガーには、サーバーから新しいページがリクエストされた「自然な」ページロード時にトリガーを一度だけ発火させるか、複数回発火させるかを指定する2つの設定があります:
  1. ページビューごとに一度
  2. ページビュー内で要素が挿入されるたびに
     • 特定のページで複数の要素に対してトリガーしたい場合や、そのページがシングルページアプリケーション（SPA）の場合は、この設定を選択することを推奨します。
• ${element}変数は対象要素を参照し、Interpolation機能からアクセス可能です。
  • 例えば、いくつかのスニペット（ページイベント、動的変数など）のvalueフィールドで${element.textContent}を使用して、そのテキストを取得できます。

構成

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

仕組み

• トリガーはMutationObserverに登録され、削除されたノードが指定されたセレクタに一致するかどうかをチェックします。
• ${element} 変数は対象要素を参照し、Interpolation機能からアクセス可能です。
  • 例えば、いくつかのスニペット（Page Event、Dynamic Variableなど）のvalueフィールドで${element.textContent}を使ってテキストを取得できます。

構成

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

仕組み

• トリガーはクリックイベントに依存しています。
• ${element} 変数は対象要素を参照し、Interpolation機能からアクセス可能です。
  • 例えば、いくつかのスニペット（Page Event、Dynamic Variableなど）のvalueフィールドで${element.textContent}を使ってテキストを取得できます。

構成

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

• ナチュラル - サーバーからのGET/POSTリクエストとレスポンスの後に「最初から」ページが読み込まれる場合。これはほとんどのウェブサイトの構築方法です。通常、Contentsquareタグは追跡したいすべてのページに挿入され、ページが読み込まれてレンダリングされるとページビューを発火します。
• アーティフィシャル - シングルページアプリケーション（ウェブサイト全体または特定の訪問者フロー）上の訪問者ジャーニーを個別のページ/ステップに「分解/分割」するために設計されています。モーダルポップアップやその他の顧客体験をより詳細なジャーニー分析およびレポートのために明確なステップとして指定することもできます。

動作方法

• 新しいページビューがContentsquareに送信される直前にトリガーされます。
• このトリガーは、次のページビューが発火する前に設定する必要があるカスタム変数に特に有用で、それに正しく関連付けられます。
• また、すべてのマスキング/アンマスキングテンプレートで利用可能な唯一のトリガーでもあり、これらも最初の「ナチュラル」ページビューの前に設定する必要があります。

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

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

構成

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

動作方法

トリガーは、<form>が提出されたときに発火するsubmitイベントを監視しています。

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

• ナチュラルページビュー - サーバーからのGET/POSTリクエストとレスポンス後にページが「最初から」読み込まれたとき。これはほとんどのウェブサイトの構築方法です。通常、Contentsquareタグは追跡したいすべてのページに挿入され、ページが読み込まれてレンダリングされるとページビューを発火します。
• 人工ページビュー - シングルページアプリケーション（ウェブサイト全体または特定の訪問者フロー）上の訪問者ジャーニーを個別のページ/ステップに「分解/分割」するために設計されています。また、モーダルポップアップやその他のユーザー体験をより詳細なジャーニー分析およびレポートのために明確なステップとして指定するためにも使用できます。
• リニューアルページビュー - ページ/タブで30分以上のアイドル時間後にセッションが終了し、その後ページが再度操作されると再開される場合。このタイプで新しい訪問者セッションが作成され、新しいページビューが送信されます。

構成

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

動作の仕組み

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

リスナーの選択

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

構成

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

動作の仕組み

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