単一ページアプリケーション（SPA）は、最初のページロード時にサイト内での移動に必要なすべてのリソースを読み込む Web アプリケーションまたは Web サイトです。ユーザーがリンクをクリックしてページを操作すると、それ以降のコンテンツは動的に読み込まれます。多くの場合、アプリケーションはアドレスバーの URL を更新して従来のページのナビゲーションをエミュレートしますが、他の完全なページ作成は行われません。
単一ページアプリケーションで DTM を使用する方法がいくつかありますが、この記事ではこれらのオプションのいくつかを参照します。
メソッド 1 - 直接呼び出しルール（DCR’s）
_satellite.track（「ページビュー」）などの直接呼び出しルールすべて、新規の DOM であるかどうかにかかわらず、表示されます。
直接の直接的な呼び出しのルールについて詳しくは、リンクを参照してください
メソッド2 - PushState あるいは Hashchange
pushState または hashchange イベントは、ページを再読み込みせずにコンテンツを変化させる単一ページアプリ（SPA）で使用できます。SPA の作成に使用できる一般的な開発フレームワークとしては、Angular や React があります。このイベントタイプを使用すると、デベロッパーの手を借りることなくイベントベースのルールを作成できます。ルールが起動するのは、以下のような SPA の共通機能が使用されたときです。
- HTML5 履歴 pushState API を使用して URL パスが変更されたとき。
- ページのビューや場所がユーザーによって変更され、ハッシュが変化したとき。
手順 1：ルールを基に新規イベントを作成し、「PushState あるいは Hashchange」としてのイベントタイプを選択します。
手順 2：ルールの条件下において「Hash」としての基準を選択し、ハッシュパタメータを特定します。
SPA の 2 つ以上のイメージリクエストが同じページで行われる場合に注意してください。したがって、以前に設定された変数の値をクリアする必要があります。
s.tl () の場合、リンクトラッキングコールは次のようになりま。
- 簡単な JavaScript 関数を作成して、Adobe の変数をクリアします。
- s_code.js／アプリ測定ファイルでまだ行っていない場合は、linkTrackVars 変数と linkTrackEvents 変数を設定します。
- 変更されたコンテンツに適切な値（すなわち、pageName 変数）を設定します。
- 変数を設定した後、tl() 関数を呼び出します。
サンプルコード :
s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="event1"; s.prop1="some value"; s.eVar1="another value"; s.events="event1"; s.tl(this,'o','My Link Name');
s.t () で、次のようにページビューが呼び出されます。
永続化させたくない S オブジェクトの値を消去します。JavaScript 版 AppMeasurement を使用している場合は、s.clearVars() を呼び出すことができます。H コードを使用している場合は、変数を空の文字列に設定する簡単なルーチンを記述します。
サンプルコード :
s.clearVars(); s.pageName="New Page" s.prop1="some value" void(s.t());
メソッド 3 - カスタムイベントベースのルール
DTM は、ページで発生するカスタムイベントにも対応できます。DOM からトリガーされたカスタムイベント、「カスタムイベント」としたイベントタイプのルールをベースにしたイベントを使用して追跡できます。
新しいページを読み込むことなく、SPA 上の1 つのページから別のページ閲覧するときに、アイディアが「ページビュー」の呼び出しを行う Ecommerce SPA の例を見てみましょう。
手順 1：ルールを基に新規イベントを作成し、「カスタムイベント」としてのイベントタイプを選択します、ついでイベントタイプをトリガーするためわかりやすい名称、「Custom_Page_View」をしてください。「# content」は、イベントが発信される場所であるため、「要素のタイプあるいはセレクター」フィールドで指定されます。「要素に直接イベント処理を適用する」のチェックボックスを選択します、そのルールはその選択なしでは実行されません。
手順 2：ルールの解析セクションにおいて、この使用の場合は、「ページビュー」を追跡するのに必要とされるものとして、「s.t()」トラッキングのラジオボタンを確認します。
手順 3：イベントを作成し、発信するサイトにコードを入力してください。
弊社では、ルールの分析セクションで %event.detail.pageName% を使用してイベントによって送信されたデータを参照できます。
注意：前述の使用されている 3 件のメソッドのいずれかに関係なく、解析ツールがデフォルトに設定したい初期ページビューのビーコンを非表示にする必要があります。それ以外の場合は、開発者がすべてのページビューで直接呼び出したり EBR ルールが送信している上記の例で、先頭ページの2つのビーコン、すべての後続のページの1つのビーコンを取得します。解析ツールから、最初のページビュービーコンを非表示にするサンプルコードを参照してください。
- 「Fault を返します」を、そのページで実行されるすべての解析ツールにカスタムコードブロックに追加します。
