SPAページの計測方法

SPAページとは？ #

SPAはシングルページアプリケーションの略称です。
コンテンツ配信の速度を最適化し、ウェブサイト全体のパフォーマンスを向上させるために、現在SPAを利用するケースがますます多くなっています。

SPAページの計測に特殊対応が必要な理由 #

SPAは従来ウェブサイトとは異なる方法でコンテンツをロードする仕様になっているため、通常の計測方法ではSPAページのコンテンツとURL変更は計測ツールにデフォルトで探知できず、正しくユーザ―行為の分析にも影響を与えています。Ptengineも同じく通常の基本タグですと、SPAページを正しく計測できず、特殊対応する必要があります。
対応方法としては、Ptengine SPA対応タグを設定することで、ページコンテンツが変わる際にSPA対応タグを発火し、Ptengineに更新後のページURLなどの情報を送ることによって正常に計測できます。具体的な設定方法は以下にてご紹介いたします。

実現ロジックの説明 #

SPAページでPtengine基本タグが読み込まれた後、ページ変更する瞬間「router change」ファンクションでPtengineのSPA対応タグを呼び出します。
Google Tag Manager（以下GTMで略称します）では履歴変更を簡単に識別できるので、そちらをトリガーとして設定する方法を推奨します。もちろん手動設定することも可能ですが、技術チームの協力が必要です。

Warning：
ページコンテンツが変わってもURLが変わらない場合、以下タグを利用することでデモURLを生成し、その後データを新しいURLで計測することが可能です。ただしGTMが使えず手動設定する必要があることをご了承ください。「URL/＃所情報」について詳しくはこちら文書のsetPVTagまで。
window._pt_sp_2 && window._pt_sp_2.push('setPVTag,URL/＃所情報,replace');

GTMでの設定方法 #

• 1基本タグを設定しているGTMのコンテナで、新規タグを作成します。



• 2タグ名を設定後「カスタムHTML」を選択し、以下タグを入れた上、トリガーは「履歴の変更」で設定して保存します。

window._pt_sp_2 && window._pt_sp_2.push('setPVTag,'+ location.href +',replace');



• 3問題ないと確認した上、「公開」ボタンを押して公開してください。

手動設定方法 #

手動でsetPVTagを発火されることも可能ですので、手動で設定する場合はページ変更する瞬間「router change」ファンクションでPtengineのSPA対応タグを呼び出すように、以下タグをページロジックへ追加してください。

window._pt_sp_2 && window._pt_sp_2.push('setPVTag,'+ location.href +',replace');

なおページコンテンツが変わってもURLが変わらない場合、以下タグをご利用ください。「URL/＃所情報」について詳しくはこちらの文書にある「setPVTag」の部分をご参考ください。

window._pt_sp_2 && window._pt_sp_2.push('setPVTag,URL/＃所情報,replace');