見出し画像

タグがうまく設定できない…？SPAサイトでの計測に潜む落とし穴と対策を解説！

株式会社SORAMICHI

✅ はじめに

「タグを設置したのに計測がうまくいかない」──そんな悩み、
**SPA（Single Page Application）**サイトではよく起こります。
この記事では、SPAとは何か？から、タグ発火の落とし穴、
そして正確な計測を行うための実践的な対応策までを解説します。

💡 SPA（Single Page Application）とは？

SPAとは、1枚のHTMLページ内でJavaScriptによって
コンテンツを書き換えて表示するサイトのことです。

SPAの主な特徴：

  • ✅ ページ遷移が高速（UXが良い）

  • ✅ ページ全体が読み込まれない

  • ✅ アプリのような操作感

例： SaaS系プロダクト、ECサイト、X（旧Twitter）など

🔍 SPAかどうかの見分け方

SPAかどうかを見た目だけで判断するのは難しいですが、
以下のような傾向があります

◼️ ページ遷移時に画面全体が再読み込みされない

  • MPA：クリック時に白い画面や読み込みマークが表示されがち

  • SPA：表示切り替えがスムーズ（ただしAPI遅延で白画面が出ることもある）

◼️ URLが変わってもwindow.onloadなどのイベントが発生しない

SPAでは、history.pushState()でURLが変わっても
HTMLが再読み込みされないため、通常のタグトリガーが機能しません。

◼️ 戻る・進むボタンでも再読み込みがない

SPAでは、ブラウザのナビゲーション操作もJavaScriptで制御されるため、リロードを伴わない切り替えが行われます。

◼️ 開発者ツールでの確認がもっとも確実です

1. ChromeでF12 → 「Network」タブを開く
2. ページ遷移を行う
3. `.html`ファイルのリクエストが出ていなければ、SPAの可能性が高い

※ Next.js / Nuxt.js などのハイブリッド構成では挙動が混在することも

💡 最近ではSPA構成のサイトが増えています

「SPAって一部のWebアプリだけじゃないの？」と思われがちですが、
最近では以下のような一般的なWebサイトにもSPA構成が採用されることが増えています。

  • 企業のサービスサイトや採用ページ

  • CMSと組み合わせたブランドLP

  • ユーザー登録画面や会員向けダッシュボード

  • カートや決済ページだけSPA化されたECサイト

つまり、あなたの身近なサイトも、知らぬ間にSPAである可能性があるということです。

🧭 Webサイトにとってタグは“目”のような存在

私たちが日常的に見るWebサイトの裏側では、
数多くのタグが動いています。
そもそもWEBサイトそのものが無数のHTMLタグで構成されていたり、
以下のような**マーケティングや改善施策の“判断材料”**を計測しているのもタグの役割です。

  • ページビュー（PV）

  • コンバージョン（CV）

  • 離脱や滞在時間の計測

  • スクロールやクリックなどの行動ログ

🎯 正しくタグを発火できないと、すべての分析がズレる

  • タグが発火しない → CVが「ゼロ」に

  • PVが正確でない → 回遊や直帰のデータが狂う

  • イベントが取得できない → ABテストや改善が不可能に

つまり、「タグがちゃんと動くかどうか」が、
データドリブンなWeb運用の前提条件なのです。

🧨 なぜSPAサイトでタグ発火がうまくいかないのか？

SPAでは、ページを移動してもHTMLが再読み込みされないため、
タグマネージャーや計測スクリプトが自動で再実行されません。
その結果、以下のような問題が起こります：

  • ❌ PVが1回しかカウントされない

  • ❌ URLが変わってもタグが発火しない

  • ❌ ボタンクリックや送信イベントが取れない

🛠️ 正しいタグ発火のための実践対策

✅ GTMの「履歴の変更」トリガーを使う

GTMでは「履歴の変更（History Change）」トリガーを有効にすることで、仮想的なページ遷移にも対応できます。

✅ カスタムイベントで明示的に発火させる

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'virtualPageview',
  page: '/new-url'
});

GTM側でこのイベントをトリガーとして設定することで、手動での仮想PV計測が可能になります。

✅ GA4との連携例（仮想PVの送信）

gtag('event', 'page_view', {
  page_title: document.title,
  page_location: window.location.href,
  page_path: window.location.pathname
});

※ GA4の公式ドキュメントでも紹介されている標準実装です

🧪 タグ検証・テスト時の注意点

  • GTMプレビューで自分で再読み込みしてしまうと正しい検証ができない

  • dataLayer.push()が重複送信されていないか確認

🔧 推奨ツール：

  • Google Tag Assistant

  • GA Debugger

  • Chromeの開発者ツール（Console / Network）

💬 まとめ：SPA対応のタグ設計は“これからの必須知識のひとつ”

SPAの普及により、従来型のタグ実装だけでは通用しない場面が増えています。

正確な計測のために押さえるべきポイント：

  • SPAの仕組みと挙動を理解する

  • GTMで履歴イベントやカスタムイベントを活用

  • テストで再発火や重複を確認

  • サイトの構造を把握し、適切な実装を選ぶ

SPA対応のタグ設計は、これからのマーケターや開発担当者にとって
“知っておくと役立つ知識”のひとつです。
正しく計測ができることが、施策改善の出発点。
確かなデータ基盤を整えて、マーケティングのPDCAをしっかり回していきましょう。

データ活用やタグ実装はSORAMICHIへ

データ活用・Googleタグマネージャー（GTM）コンサル・運用支援について、様々な業界で数多くのご支援実績がありますので、お気軽にご相談ください。
また、GTM支援に留まらず、顧客理解をベースに上流の戦略設計から施策の企画・実装まで総合的にご支援することを得意としているコンサルティングファームですので、まずは壁打ちのような形も可能です。
まずはお気軽にご相談いただけますと幸いです。

▼Googleタグマネージャー（GTM）コンサル・運用支援の詳細はこちら