SPA（Single Page Application）やSSR(Server Side Rendering)のページをSiTest で計測するには、別途専用のタグ設置が必要です。
| ❗️SPA/SSR の計測は「新タグ」のみ対応しています。「旧タグ」は対応していません。 |
SPA/SSR とは
SPA（Single Page Application）
1つのページ内で動的な要素書き換えを行い、ブラウザのページ読み込みを伴わない仮想的なページ遷移（見た目の変更）を実現しているようなサイトやWebアプリケーションを指します。
SSR (Server Side Rendering)
ブラウザではなくサーバー側でHTMLのレンダリング（生成）を行うため、ページ遷移時にページ読み込みが発生しないようなサイトやWebアプリケーションを指します。
いずれも見た目（ページ）が切り替わる際にブラウザの読み込みが行われないため、通常のトラッキングコード設置のみではデータを個別のページのものとして計測することができません。
「Google タグマネージャー」について、詳しくは「タグマネージャー ヘルプ」をご確認ください。
SPA/SSR 計測方法の概要
SPA/SSR となっているページでトラッキングコードが読み込まれた後、仮想的なページ遷移のタイミングで 計測イベントタグによってAPIを実行し、データを取得します。
具体的なコードの埋め込み箇所については、SPA/SSRの実装および使用しているフレームワーク(Vue.js, Angular, jQuery-mobileなど)に依存します。
SPA/SSR 計測イベントタグ
SPA/SSR 計測イベントタグ のテンプレート
window.sitest.refresh("{{PROJECT_ID}}", "{{URL_NAME}}");
{{PROJECT_ID}}：プロジェクト番号
{{URL_NAME}}：管理画面内に表示させるURL名
GTM を使った設定
Googleタグマネージャーを導入しているサイトの場合は、トリガーに「履歴の変更」を指定してSPA/SSR 計測イベントタグ を配信することで、サイト側を変更せずにSPA対応が完了する可能性があります。ただしSPAサイトの実装によっては、この方法では仮想的なページ遷移時にGTMのタグがトリガーされない場合もあります。検証の上、問題なければご利用ください。
1.トラッキングコードをGTMから配信する
トラッキングコードの配信は、「Google タグマネージャ」でトラッキングコードを配信する をご確認ください。
2.SPA/SSR 計測イベントタグを設定する
「タグの種類」を「カスタム HTML」に設定します
「詳細設定」をクリックし、タグ配信の優先度を設定します。
トラッキングコードよりあとに実行されるよう低い数値を設定してください。
3.タグが仮想的なページ遷移時に配信されるようにトリガーを設定する
トリガータイプは 履歴の変更 を指定します。
URLの変更を伴うすべての仮想的なページ遷移をトラッキングする場合は「すべての履歴の変更」を選択します。
5. サイト改修の必要がある場合
次のような場合は、サイト改修が必要です。
サイト構築を担当しているエンジニアの方に作業をご依頼ください。
GTMが導入されていない場合
GTMが導入されているが、「履歴の変更」トリガーが意図通りに発火しない場合