# SPAサイトにおけるPtengine計測設定ガイド

## SPAサイトにおけるPtengine計測設定ガイド

## **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が使えず[手動設定](/faq/tag-and-domain/spa-tracking.md)する必要があることをご了承ください。「URL/＃所情報」について詳しくはこちら文書の[setPVTag](/faq/tag-and-domain/spa-tracking.md)まで。

`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/＃所情報」について詳しくは[こちら](/faq/tag-and-domain/spa-tracking.md)の文書にある「setPVTag」の部分をご参考ください。

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helps.ptengine.com/faq/tag-and-domain/spa-tracking.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.