Contentsquare
こんにちは！お困りですか？
よく検索されるトピック: CS Live, 指標リスト, インテグレーションのリクエスト

最新情報: リリース & アップデート Contentsquare グロースプラン
English (GB) Français

このセクションの記事

  • 更新

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

AIを使用して英語から翻訳されました

この記事はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。

この記事は、CSTC機能の使用についてであり、ProおよびEnterpriseプランで利用可能です。

人工ページビュー（APV）は、ユーザーがページと対話してもそれを別のユニークなページビューとして登録しない場合に、追加の「ページビュー」を送信および追跡することを可能にします。

これらの指示は、前提条件やスニペット作成の詳細を含むContentsquareタグコンフィギュレーターの記事と併せて使用されるべきです。

一般的に使用される場合：

  • アクションがページ上に表示されるコンテンツを完全に変更し、URLを変更せずにリフレッシュする場合（例：Ajaxリクエスト）
  • サイトがシングルページアプリケーション（SPA）および関連フレームワーク（例：React、Angular）で構築されている場合
  • ユーザーがページをリフレッシュせずにファネルの別のステップにリダイレクトされる場合
  • サイトがページをリフレッシュせずにすべてのURL変更を再ルーティングする場合
  • サイトがプログレッシブウェブアプリ（PWA）として構築されている場合
  • 重要なモーダル/ポップアップウィンドウが表示される場合

テンプレートの使用方法

新しいスニペットを作成し、人工ページビューのテンプレートを選択したら、以下のガイドラインを使用して推奨される一般的な使用例に従ってください。

ステップ1：テンプレート入力フィールドを完了する

1. パス：人工ページビューが発火したときにContentsquareに送信されるパス引数を入力します。

2. 現在のページビュー：デフォルトで「True」に設定されていますが、現在のページビューでのみ有効にしたくない場合は「False」を選択します。

3. DecodeURI：デフォルトで「False」に設定されていますが、ページビューを送信する前にパスにDecodeURIを使用したい場合は「True」を選択します。これにより、URI形式のパスがUTF-8に変換されます。

ステップ2：トリガーを選択して構成する

利用可能なトリガーの中から選択し、ニーズに応じてその条件を定義します。

このテンプレートの利用可能なトリガー

ステップ 3: スニペットを保存

スニペットの設定に変更を保存し、準備ができたら、デプロイする手順に従ってください。

テンプレートとトリガーのガイドライン

シングルページアプリケーション (SPA) の URL 変更

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

トリガー

  • 履歴の変更: ウェブサイトがハッシュ変更を使用している稀な場合を除きます（URLにハッシュ（#）記号があり、変更されるURLの部分がハッシュ記号の後にあることが確認できます）。
    • 注意、 カスタム変数は現在、履歴の変更トリガーでは利用できません。
  • トリガーが発火する条件: すべてのページ。特定のURLのみに制限する特別な理由がない限り、”カスタム”トリガー条件を使用できます。

URLの変更

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

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

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

  • 「ハッピーパス」を確認する: ウェブサイト上で「ハッピーパス」をたどり、APVが期待通りに発火していることを確認します。
  • 「ダブルトリガー」を確認する: たとえば、商品説明ページで商品バリアントを切り替えたり、チェックアウトなどの特定のページに移動したりする際です。
  • 予期しないAPV: 不当なAPVが発火しているのを見つけた場合、これはreplaceStateの履歴変更がpushStateのものと同時に発火していることが原因かもしれません（ウェブサイト上で）。履歴の変更トリガー内のURL変更イベントリスナーを修正して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変更

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

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

  • CVARが利用できないため、ユニークな値を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}

トリガー:

要素が削除された:

  • まず、ページ上の要素を特定する必要があります：
    • APVをトリガーしたいステップに移動する前には存在しない
    • 移動する際に動的に追加される
    • 他のステップ/ページには存在しない
  • トリガーは、該当する要素がページに追加されるたびに複数回発火します（テスト時に偽陽性トリガーに注意してください）
  • テスト時には、フローを上に移動する際だけでなく、前後に移動する際にもAPVが発火していることを確認してください。

要素が表示される:

  • このトリガーは、実際のフローがなく、1回以上再トリガーする必要がないモーダルポップアップに最適です（例えば、これは「カートに追加」モーダルポップアップである可能性があります）。

モーダルポップアップやその他の一回限りのユースケースのためにAPVを発火させる

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

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

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

${window.location.pathname}/add_to_cart

理論的にはほぼすべてのトリガーを使用することができますが、通常、このような状況では選択肢はElement Becomes Visibleトリガーに限られます。

  • Element Becomes Visibleトリガーは、モーダルポップアップHTMLが最初にトリガーされる前にすでにページ上に存在する場合に理想的なオプションです。
  • ただし、これは「自然な」ページビューごとに1回のみ発火することを強調する必要があります。つまり、一度トリガーされると、同じページビューでは再度トリガーされません。これはほとんどのウェブサイトには問題ありませんが、SPAウェブサイトを扱っている場合は、1回使用するとその後のモーダルトリガーは再度トリガーされないため、非常に問題のある選択肢になります。
  • モーダルが閉じられたときにもAPVを発火させるのは良いアイデアであり、ここでElement Removedトリガーが役立ちます。同じことが適用され、元のページに戻っているため、URLを変更する必要はなく、以下をPathに入力する必要があります：

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

関連する記事