CSTCテンプレート：人工ページビュー

これは、ウェブサイト全体（または特定のフロー/ウィザード）が、ユーザーが異なるページ/ステップ間を移動する際にURLを適切に変更するために履歴の変更を使用するシングルページアプリケーションである場合に適用されます。

推奨トリガー：

• 履歴の変更（ウェブサイトがハッシュの変更を使用している稀な場合を除く（URLにハッシュ（#）記号があり、変更されるURLの部分がハッシュ記号の後にある場合））。
  • 注意、カスタム変数は現在、履歴の変更トリガーでは使用できません。
• URL変更イベント：popstate、pushStateに変更、デフォルトで選択されていない場合。これは95％のケースで推奨される設定です。
• トリガーが発火する条件：すべてのページ。特定のURLのみに制限する特別な理由がない限り、その場合は「カスタム」トリガー条件を使用できます。

URLの変更

通常、実際の新しいURLを変更せずに保持します。したがって、パス入力フィールドでは、次の構文を使用する必要があります（コピー＆ペーストし、波括弧に注意してください）：

${window.location.pathname}${window.location.hash.replace('#', '?__')}

テストとトラブルシューティングのガイドライン

• 「ハッピーパス」を確認する：ウェブサイト上で「ハッピーパス」をたどり、APVが期待通りに発火していることを確認します。
• 「ダブルトリガー」を確認する：たとえば、商品説明ページで商品バリアントを切り替えたり、チェックアウトなどの特定のページに移動したりする場合。（通常、popstateとpushStateのみを選択することでこれを軽減できます）。
• 予期しないAPV：不当なAPVが発火している場合、これはreplaceStateの履歴変更がpushStateと同時に発火していることが原因かもしれません（ウェブサイト上で）。履歴の変更トリガー内のURL変更eventslistenersを修正してreplaceState（ドロップダウンから）を除外し、再度テストしてみてください。これで通常は解決します。
• チェックアウトのあるウェブサイト：配送、請求書およびその他のステップを進む際にAPVがどのようにトリガーされるかを確認します。以前に入力したステップに戻ったとき（つまり、APVが発火するかどうかなど）に何が起こるかを確認することを忘れないでください。
• APVが複数回発火する：（一部の）ページ間を移動することでAPVが複数回発火する状況に遭遇し、replaceStateが原因でないことを確認した場合、「デバウンス」オプションを有効にし、タイムアウトを500ミリ秒までの任意の数に調整してみてください。
• ウェブサイトの履歴変更を確認する：ウェブサイトでどのような履歴変更が発生しているかを自分で確認したい場合、コンソールで次のコードを実行し、コンソールのconsole.warn（黄色）出力を確認できます：

(function(){var oldpushState=window['history']['pushState'];window['history']['pushState']=function(e){console.warn('pushState detected');return oldpushState.apply(this,arguments);};var oldreplaceState=window['history']['replaceState'];window['history']['replaceState']=function(e){console.warn('replaceState detected');return oldreplaceState.apply(this,arguments);}})();

出力は"pushState detected" または"replaceState detected"、またはその両方になります。

SPAがページ/ステップ間を移動する際にURLの変更がない場合、APVだけでは不十分です。Contentsquareのマッピング内でそれらを区別する方法が必要です。

カスタム変数 (CVAR) の代替案:

• CVARがAPVスニペットの一部としてまもなく利用可能になるまで、ユニークな値をURLに追加して、私たちに渡されるURLを修正することをお勧めします。
• これは、比較的限られたフローであれば手動で行うことができ、各ステップ/ページのユニークな特徴に基づいて各APVトリガーを個別に作成することができます（例えば、他のページ/ステップには存在しない動的に追加されたHTML要素など）。
• 例えば、Pathフィールドでこの構文を使用することができます（ここで/step1は実際のURLの末尾に追加されます）: ${window.location.pathname}/step1
• 該当するフローに各ステップを示す何か（例えば、パンくずリストウィジェット）がある場合、そのテキストをステップに追加し、補間を使用して動的にすることを検討できます。例えば（div.step-box.activeがパンくずリストのテキストを保持するCSSセレクタである場合）: ${window.location.pathname}/${document.querySelector("div.step-box.active").textContent}

推奨トリガー:

理論的にはほぼすべてのトリガーを使用できますが、通常、このような状況では最良の選択肢は要素挿入、要素が表示される、または要素削除トリガーです。最初に行うべきことは、SPAがどのように構築されているかを確認することです - ステップ（または少なくともその親コンテナ）がプリロードされているか、ステップ間を移動する際にその可視性が切り替えられるか、またはコンテンツが動的に生成され、ステップ間を移動するたびに破棄されるかどうかです。

• 各ステップが動的に追加/削除される場合、要素挿入トリガーが最良の選択肢です。
• SPAステップがプリロードされている場合、同様の方法で要素が表示されるトリガーを使用することをお勧めします。

ただし、両方のトリガーについて次の点を考慮する必要があります:

• • 要素挿入トリガーを使用するには、まず、1) APVをトリガーするステップに移動する前に存在しない要素、2) 移動中に動的に追加される要素、3) 他のステップ/ページには存在しない要素を特定する必要があります。
  • 要素挿入トリガーをページビューごとに複数回発火するように設定する場合（問題の要素がページに追加されるたびに）、テスト時に誤検知トリガーに注意してください。
  • テスト時には、フローを上に移動する際だけでなく、前後に移動する際にもAPVが発火していることを確認してください。
  • 要素挿入トリガー自体は設定が簡単です - 上記で説明した要素のCSSセレクタと、どこで発火させたいかを定義するだけです（URL変更のないSPAがウェブサイトの特定の部分に限定されている場合、全体のウェブサイトではなくそのURLでのみ発火させるためにカスタム条件を使用することをお勧めします。そうすることで、他の場所での不要なトリガーを避けることができます）。
  • 要素挿入と同様の論理がここにも適用されます。
• 要素削除トリガーは要素追加トリガーに似ているため、すべて同じことが適用されます。ただし、通常はこのトリガーを使用する必要はありません。挿入トリガーで十分です。

設定する必要がある項目は2つです：

• ページと区別するためにURLを変更する
• 最も適切なトリガーを使用する

この値は、比較的限られたフローであれば手動にすることができ、各ステップ/ページのユニークな特徴に基づいて各APVトリガーを個別に作成することができます（他のページ/ステップには存在しない動的に追加されたHTML要素のように）。例えば、Pathフィールドでこの構文を使用することができます（/add_to_cartが実際のURLの末尾に追加されます）：

${window.location.pathname}/add_to_cart

推奨トリガー：

理論的にはほぼすべてのトリガーを使用することができますが、通常、このような状況では選択肢は要素が表示されるおよび要素の挿入トリガーに限られます。（例えば、要素のクリックまたはタップは、実際にはページに問題がありポップアップが機能しなかった場合でも発火するため、信頼性が低くなります）。

どのトリガーを使用すべきかを判断するために、問題のコンテンツ（モーダルポップアップなど）がページが最初に読み込まれたときにHTMLに存在するかどうかを調査することができます。これは、要素が事前に読み込まれているが隠されていることが多いため、要素の挿入トリガーは機能しないことを意味します。これを達成するためには、次の手順に従います：

1. ページを新しいタブに複製します（タブを右クリック > 複製、または他の方法でも可）

2. APVを発火させたいコンテンツをトリガーします。

3. ページの他の場所には存在しない新しく追加されたコンテンツ内のユニークな要素を探します。

4. その同じ要素を複製したタブで確認します（モーダルをトリガーせずに）。

要素がページの読み込み時に存在しない場合（つまり動的に追加された場合）、要素の挿入トリガーを使用する必要があります。一方、問題のコンテンツがHTMLに存在するが単に隠されている場合は、要素が表示されるトリガーを使用することになります。

• 要素の挿入トリガーを使用するには、まずモーダル内で開く前に存在しない要素を特定する必要があります。
• 要素の挿入トリガー自体は設定が簡単です - 上述の要素のCSSセレクターを取得し、それをどこでも発火させるか特定のページに制限するかを定義するだけです。
• 要素が表示されるトリガーは、モーダルポップアップのHTMLが最初にトリガーされる前からページに既に存在する場合に使用するべきです。
• 要素の挿入および要素が表示されるトリガーについては、問題の要素がページに追加されるたびに発火させるか、ページビューごとに一度だけ発火させるかを選択できます。 - これは、モーダルが開かれるたびにAPVが発生することを意味します（ただし閉じられた場合は除く）。
• 要素が表示されるトリガーは、問題の要素がページの読み込み時に存在しない場合は機能しません。これは、まれに問題の要素がタグが実行された後にページに追加される状況に遭遇する可能性があることを意味します。この場合は、CSQ成功マネージャーに連絡して助けを求めることができます。

モーダルが閉じられたときにもAPVを発火させるのは良いアイデアであり、ここで要素が削除されるトリガーが役立ちます。同じことが適用され、"元の"ページに戻っているため、URLを変更する必要はなく、次のようにPathに入力する必要があります：

 ${window.location.pathname}${window.location.hash.replace('#', '?__')}