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

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

最初のメモ:

  • 以下の項目は、Experience Platform Launch を使用してサイトに実装していることを前提としています。Experience Platform Launch を使用していない場合でも考慮事項は存在しますが、実装方法に合わせて調整する必要があります。
  • SPA はそれぞれ異なるため、必要に応じて次の項目を微調整する必要が生じる場合がありますが、SPA ページに Adobe Analytics を実装する際に考える必要がある、いくつかのベストプラクティスを紹介します。

Experience Platform Launch でのSPAの操作に関する簡単な図

ローンチでの分析用 SPA

メモ: 前述のように、これは Experience Platform Launch を使用した Adobe Analytics 実装において、SPA ページがどのように処理されるかを簡略化した図です。このページの以降の節では、慎重に検討または行動すべき手順と問題について説明します。

データレイヤーの設定

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

以下はデータレイヤーのサンプルで、ビューの変更または SPA でのアクションによってその要素が変更される可能性があります。例えば、全画面または大画面の変更では、「pageName」要素を変更して、新しい要素を Experience Platform Launch でキャプチャして Adobe Analytics に送信できるようにするのが一般的です。

<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 に通知する必要があります。これを行うには、直接呼出し ルール とカスタムイベントの 2 つの方法があります。

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

例: このヘルプ ドキュメントには、Analytics(およびその他の Experience Cloud ソリューション)を実装した SPA サイトのサンプルへのリンクと、実装内容を説明するドキュメントがあります。これらの 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 でこれらのメソッドのいずれかをトリガーして Analytics にデータを送ることになりますが、それぞれのメソッドをいつ送信するかを知っておく必要があります。

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

  • s.tl() - 「tl」は「リンクをトラック」を表し、通常は全画面の変更とは異なり、ページ上のクリックまたは小さなコンテンツ変更のトラッキングに使用されます。ページ上の変更が小さく、完全に新しい「ページ」と見なされない場合は、s.tl() を使用します。Analytics は無視されるので、s.pageName 変数の設定について心配する必要はありません。

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

次のビデオでは、Experience Platform Launch で s.t() または s.tl() をトリガーする場所/方法を説明します。

変数のクリア

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

上の図では、プロセスの最後にリストされており、ヒットを送信した に変数をクリアしています。実際には、ヒットが送信される前または後に実行できますが、Experience Platform Launch ルールで一貫性を維持する必要があるため、変数を設定して送信する前または後に常にクリアする必要があります。s.t() を実行する に変数をクリアする場合は、必ず最初に変数をクリアし、次に新しい変数を設定して、最後に新しいデータを Analytics に送信してください。

メモ: s.tl() では、どの変数が設定されるか(Experience Platform Launch のバックグラウンドで自動的に追加される)を Analytics に通知するために、毎回 linkTrackVars 変数を一緒に使用する必要があるため、s.tl() を実行するときに変数をクリアする必要はありません。つまり、s.tl() を使用する場合、通常は誤った変数は含まれませんが、SPA 環境で s.t() を使用する場合は非常に推奨されます。そうは言っても、質の高いデータ収集を確実に行うために、SPA 環境で s.t()s.tl() の両方に変数のクリア関数を使用することをベストプラクティスとしてお勧めします。

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

その他の考慮事項

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

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

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

SPA ページで最初のページの読み込みが行われる際に、これらの場所のいずれかが実際にコードを実行するのは 1 回だけであることを知っておくことが重要です。ビューの変更またはサイトのアクションでコードを実行する必要がある場合は、適切な ルール にアクションを(例:「ページの読み込み:イベント/表示/終了」 ルール)を追加し、その ルール が実行されるたびにコードが実行されるようにする必要があります。ルール でそのアクションを作成するときは、 拡張機能 = Core および アクションタイプ = カスタムコード を設定します。

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

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

機能を個別の ルール に分割して、より詳細に制御できるようにする場合は、これを行ったことを忘れずに文書化してください。これにより、一方の ルール に変更を加えて、もう一方の ルール にも変更を加えると、 Analytics データの整合性を保護できます。

A4T 経由での Target との統合

ここでは、簡単に説明します。A4T を使用して Target と統合する場合は、同じ表示変更での Target リクエストと Analytics リクエストの SDID が同じであることを確認してください。これにより、データがソリューション上で適切に同期されるようになります。

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

その他のリソース

このページ