単一ページアプリケーション(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」としてのイベントタイプを選択します。

Picture1

手順 2:ルールの条件下において「Hash」としての基準を選択し、ハッシュパタメータを特定します。

picture2

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」は、イベントが発信される場所であるため、「要素のタイプあるいはセレクター」フィールドで指定されます。「要素に直接イベント処理を適用する」のチェックボックスを選択します、そのルールはその選択なしでは実行されません。

Picture3

手順 2:ルールの解析セクションにおいて、この使用の場合は、「ページビュー」を追跡するのに必要とされるものとして、「s.t()」トラッキングのラジオボタンを確認します。

Picture 4

手順 3:イベントを作成し、発信するサイトにコードを入力してください。

Snap1

弊社では、ルールの分析セクションで %event.detail.pageName% を使用してイベントによって送信されたデータを参照できます。

Snap2

注意:前述の使用されている 3 件のメソッドのいずれかに関係なく、解析ツールがデフォルトに設定したい初期ページビューのビーコンを非表示にする必要があります。それ以外の場合は、開発者がすべてのページビューで直接呼び出したり EBR ルールが送信している上記の例で、先頭ページの2つのビーコン、すべての後続のページの1つのビーコンを取得します。解析ツールから、最初のページビュービーコンを非表示にするサンプルコードを参照してください。

  •  「Fault を返します」を、そのページで実行されるすべての解析ツールにカスタムコードブロックに追加します。
Picture7

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー