Adobe Analyticsでシングルページアプリケーション(SPA)を追跡する際のベストプラクティスの使用

このドキュメントでは、Adobe Analyticsを使用してシングルページアプリケーション(SPA)を追跡する際に従って注意する必要がある、いくつかのベストプラクティスについて説明します。 このドキュメントでは、推奨される実装方法であるAdobeExperience Platform Launchの使用に焦点を当てます。

初期メモ:

  • 以下の項目は、サイトにExperience Platform Launchを実装することを前提としています。 Experience Platform Launchを使用しない場合でも、考慮事項は存在しますが、実装方法に合わせて調整する必要があります。
  • すべてのSPAは異なるので、ニーズに合わせて以下の項目を調整する必要が生じる場合がありますが、ベストプラクティスをいくつかお客様と共有したいと考えています。SPAページにAdobe Analyticsを実装する際に考慮する必要がある事項について説明します。

Experience Platform LaunchでのSPAの操作の簡単な図

launchでのanalytics用spa

注意: この図は、Adobe Analytics実装でのSPAページの使用方法を簡略化したもので Experience Platform Launchす。このページの以降の節では、慎重に検討または対処する必要がある手順と問題について説明します。

データレイヤーの設定

新しいコンテンツがSPAページに読み込まれる場合、またはSPAページでアクションが実行される場合、最初におこなうべきことの1つは、データレイヤーを更新することです。 これは、 Experience Platform Launchでカスタムイベントが発生し、トリガールールが発生する前に発生する必要があります。そのため、 Experience Platform Launchがデータレイヤーから新しい値を取得し、Adobe Analyticsにプッシュできます。

以下に、データレイヤーの例を示します。このレイヤーの要素は、SPAでの表示の変更や操作時に変更できます。 例えば、全画面/大部分の画面を変更する場合、Experience Platform Launchで新しい要素を取り込んでAdobe Analyticsに送信できるように、「pageName」要素を変更するのが一般的です。

<script>
    digitalData = {
        pageInstanceID: "Launch Demo Site",
        page:{
            pageInfo:{
                pageID: '2745374',
                pageName: 'acs demo - product listing page'
            },
            attributes:{
                project: "Experience Platform Launch Project"
            }
        },
        user : [ {
          "profile" : [ {
            "attributes" : {
              "gender" : "male",
              "age" : "35"
            }
          } ]
        }],
        libraries : {
          adobe : {
            launch : {
              state : 0, // 0 = not loaded , 1 = loaded
              domain : "assets.adobedtm.com"
            }
          }
        }

     };
    </script>

Experience Platform Launchでのカスタムイベントとリスンの設定

ページに新しいコンテンツが読み込まれる場合や、サイトでアクションが発生した場合は、ルールを実行してAnalyticsにデータを送信できるように、Experience Platform Launchに通知する必要があります。 これをおこなう方法はいくつかあります。直接呼び出し ルールまたはカスタムイベント。

  • 直接呼 び出しルール:では、ペ Experience Platform Launchージから直接呼び出さ れ たときに実行する直接呼び出しルールを設定できます。ページの読み込みやサイトでの操作が非常に簡単な場合、または一意で、毎回特定の命令セットを実行できる場合(eVar4をXに設定し、トリガーevent2を毎回)、直接呼び出し ルールを使用できます。 直接呼び出し ルールの作成に関するExperience Platform Launchドキュメントを参照してください。
  • カスタムイベント:機能の強化と、異なる値を持つペイロードを動的にアタッチする機能のために、Experience Platform LaunchでカスタムJavaScriptイベントを設定し、それらをリッスンする必要があります。ここでは、ペイロードを使用して変数を設定し、データをAdobe Analyticsに送信します。 この機能が必要になる可能性が高いので、このオプションがベストプラクティスと見なされます。 ただし、サイトの各機能によって、どの方法が最適かが判断されます。 このカスタムイベントメソッドを使用する必要があると仮定して、このドキュメントを進めます。

例: THIShelpドキュメ 🔗 ントには、(およびその他のExperience Cloudソリューション)を実装したSPAサイトのサンプルへのリンク、および実装内容を説明するドキュメントが含まれていま Analytics す。これらのSPAの例では、次のカスタムイベントが使用されています。

  • event-view-start:このイベントは、読み込み中のビュー/状態のビュー開始時に発生します。
  • event-view-end:このイベントは、ビュー/状態の変更が発生し、ページ上のすべてのSPAコンポーネントの読み込みが終了した場合でも実行する必要があります。これは、通常、Adobe Analyticsへの呼び出しをトリガーするイベントです。
  • event-action-trigger:このイベントは、表示/状態の読み込みを除く、ページ上でイベントが発生した場合に発生します。これは、クリックイベントや、ビューの変更なしでの小さなコンテンツの変更である可能性があります。

呼び出し方法とタイミングについて詳しくは、上記の参照ページ/ドキュメントを参照してください。 同じイベント名を使用する必要はありませんが、ここに示す機能は推奨ベストプラクティスです。 次のビデオでは、サンプルサイトと、 Experience Platform Launch内でカスタムイベントをリッスンする場所を示します。

Experience Platform Launch ルールでs.t()またはs.tl()を実行する

SPAを使用する際にAnalyticsにとって最も重要な点の1つは、s.t()s.tl()の違いです。 Experience Platform Launchでこれらのメソッドの1つを呼び出してAnalyticsにデータを送信しますが、それぞれを送信するタイミングを知る必要があります。

  • s.t() - 「t」は「track」を表し、通常のページビューです。URLが変更されない場合でも、**​を新しい「ページ」と見なすほど、ビューが十分に変更されますか。 その場合は、 s.pageName変数を設定し、 s.t()を使用して呼び出しをAnalyticsに送信します。

  • s.tl() - 「tl」は「リンクを追跡」を表し、通常は、全画面表示の変更とは対照的に、ページ上のクリック数や小さなコンテンツの変更を追跡するために使用されます。ページ上の変更が小さく、完全な新しい「ページ」と見なさないようにする場合は、s.tl()を使用し、s.pageName変数の設定について心配しないでください。Analyticsでは無視されます。

ヒント: 一部のユーザーは、画面が50%を超える場合、ページビューと見なしてを使用する必要があるという一般的なガイドラインを使用し s.t()ます。画面への変更が50%未満の場合は、s.tl()を使用します。 ただし、これは完全にユーザー次第で、新しい「ページ」と見なすものと、Adobe Analyticsでのサイトの追跡方法が決まります。

次のビデオでは、Launch by Adobe内のs.t()またはs.tl()のトリガーの場所と方法を示します。

変数のクリア

Adobe Analyticsでサイトを追跡する場合、当然ながら適切なタイミングでAnalyticsに適切なデータを送信するだけで済みます。 SPA環境では、 Analytics変数で追跡された値が保持され、 Analyticsに再送される可能性があります(これが不要になった場合もあります)。 このため、Analytics Launch拡張機能に変数をクリアする関数があるので、次のイメージリクエストを実行してAnalyticsにデータを送信する際に新しいスレートが生成されます。

上の図では、ヒットを送信した​後ろの変数​をクリアし、プロセスの最後にリストされています。 実際には、ヒットが送信される前または後におこなうことができますが、Experience Platform Launchルールでは一貫性があるので、常に変数を設定して送信する前または後にクリアします。 s.t()を実行する前に​変数をクリアする場合は、まず変数をクリアし、次に新しい変数を設定してから、最後にAnalyticsに新しいデータを送信します。

注意: 実行時には必ずしも変数のクリアが必要とは限りませ s.tl()ん。これは、 s.tl() 設定される変数を指定するた linkTrackVars め、毎回変数を使用する必要があるからです(のバックグラウンドで自動的に追加されま Analytics Experience Platform Launchす)。つまり、s.tl()を使用する際には必要な変数が入ってこないのが普通ですが、SPA環境でs.t()を使用する場合は非常にお勧めします。 ただし、SPA環境では、品質の高いデータ収集を確実におこなうために、s.t()s.tl()の両方でClear Variables関数を使用することをお勧めします。

次のビデオでは、Launch内の変数をクリアする場所と方法を示します。

その他の考慮事項

Experience Platform Launchのカスタムコードウィンドウ

Launch Analytics拡張機能には、カスタムコードを挿入できる場所が2つあります。ライブラリ管理セクションと、追加の「カスタムコードを使用したトラッカーの設定」セクション。

Analyticsカスタムコードウィンドウの起動

SPAページで最初のページ読み込みが発生した場合、これらの場所のいずれかが実際には1回だけコードを実行することを把握しておくことが重要です。 ビューの変更時またはサイト上のアクションでコードを実行する必要がある場合、適切な​ルール​に追加のアクションを追加する必要があります(例:「ページ読み込み:event-view-end" rule)と呼ばれ、ruleが実行されるたびにコードが実行されます。 ルールでそのアクションを作成する場合、拡張機能=コア​および​アクションタイプ=カスタムコード​を設定します。

「ハイブリッド」SPA/通常のサイト

一部のサイトは、「通常」のページとSPAのページを組み合わせたものです。 この場合、両方のページタイプで機能する方法を使用する必要があります。 サイトでカスタムイベントを設定し、Experience Platform Launchでルールをトリガーする場合は、ハッシュの変更などに基づいて、ページからAnalyticsに二重のヒットが入らないように注意してください。 (その場合、Experience Platform Launchルールのトリガーを選択します)。 この場合、Adobe Analyticsで誤ったデータが返されないように、ページビューの1つを抑制する必要があります。

より詳細な制御が可能なように、機能を個別のルールに分割する場合は、ルールを他のルールに変更し、Analyticsデータの整合性を保護できるように、記憶と文書を作成します。

A4TによるTargetとの統合

ちょっとした引き出し線です A4Tを使用してTargetと統合する場合は、同じビュー上のTargetリクエストとAnalyticsリクエストのSDIDが同じに変更されていることを確認してください。 これにより、データがソリューション上で正しく同期されます。

ヒットを確認するには、デバッガーまたはパケットスニファープログラムを使用します。 また、HEREをダウンロードできるChrome拡張機能であるExperience Cloud Debuggerを使用することもできます。 Target は最初にページで実行される必要があるので、JavaScriptコンソールまたはデバッガーでもを確認できます。

その他のリソース

このページ