見出し画像

【ナレッジ記事】KARTEイベントをSPAサイトに導入する方法

株式会社SORAMICHI

■本記事を読む前に：SPAサイトに計測タグを埋め込む際は以下の記事をご参考ください。
https://note.com/soramichicoltd/n/n3bcd76ff6959

SPAサイトにKARTEタグを導入する方法

はじめに

KARTEは、Webサイトやアプリ上でのユーザー行動を可視化し、体験を改善するためのCX（カスタマーエクスペリエンス）プラットフォームです。
通常のWebサイトであれば、KARTEタグを <head> に設置するだけで動作します。しかし、SPA（Single Page Application） の場合はページ遷移の仕組みが特殊で、追加の設定が必要です。
ここでは、SPAサイトにKARTEを正しく導入する方法を解説します。

📖 出典

https://support.karte.io/post/ALVPd86B5a3m4Gjj6Q7hq

1. KARTEタグの基本設置

まずは通常サイトと同じく、KARTEタグをHTMLの <head> 内に埋め込みます。
例（実際には発行されたプロジェクトIDを入れてください）：

<head>
  <script>
    window.karteAsyncInit = function() {
      karteTracker('create', 'プロジェクトID');
    };
    (function() {
      var k = document.createElement('script');
      k.async = true;
      k.src = '<https://cdn-edge.karte.io/karte.js>';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(k, s);
    })();
  </script>
</head>

💡 ポイント

  • ここまでは通常サイトと同じ導入方法です。

  • ただしSPAでは「URLが変わってもページが再読み込みされない」ため、このままではKARTEに正しく遷移情報が伝わりません。

2. SPAでの課題

SPAは「1つのHTMLの中でJavaScriptによって画面を書き換える」仕組みです。
ユーザーが画面を移動しても、ブラウザの再読み込みが発生しません。
その結果、KARTEがページ遷移を検知できず、分析や接客（ポップアップ表示など）に不具合が生じる場合があります。

3. ページ遷移イベントの通知

この問題を解決するには、遷移のたびにKARTEへ通知を送る必要があります。
具体的には以下のコードを呼び出します：

// ページ遷移のたびに実行
karteTracker('send', 'pageview', {
  title: document.title,
  url: location.href
});

💡 ポイント

  • title と url を渡すとレポートが見やすくなります。

【参考：事例紹介】SPAサイトで発生した問題と対策

ここからは実際に起きた2つのSPAサイトでのKARTE導入の失敗事例を紹介します。
エンジニア・非エンジニア両方の方に理解できるよう、背景と解決策をシンプルに整理しました。

A. ページ移動後も接客が残り続ける

◆ 問題の内容

あるページでポップアップが表示された後、別ページに移動しても非表示にならないという事象が発生。
例：

  • トップページで「キャンペーンのお知らせ」ポップアップが表示

  • 「お問い合わせ」ページに移動しても、そのまま残り続ける

◆ 原因

SPAではブラウザがリロードされないため、KARTEが「ページが切り替わった」と認識できず、接客を出し続けてしまう。

B. 「特定ページ限定の接客」が他ページでも出てしまう

◆ 問題の内容

「トップページを50％スクロールしたら接客表示」という条件を設定したところ、製品ページでも表示されてしまった。
実際の流れ：

  1. トップページを50%スクロール → 接客表示（正しい）

  2. 製品ページに移動

  3. 製品ページを50%スクロールすると、再び接客が表示される（誤り）

◆ 原因

SPAではページが切り替わっても、KARTEがページタイトルを保持したままになる場合があるため。
その結果、「条件を満たしている」と誤判定してしまう。

参考リンク

まとめ

  • SPAサイトでは、通常のタグ設置だけではKARTEがページ遷移を検知できない。

  • 解決策は「遷移完了時に karteTracker('send', 'pageview') を呼び出す」こと。

  • 実装を誤ると「接客が残り続ける」「限定条件が効かない」といった不具合が発生する。

SPAにKARTEを導入する際は、仮想ページごとにPV通知を追加することが必須です。

✉ ご相談・カスタマイズ対応も可能です

  • 本記事の内容を社内Wikiや開発仕様書に落とし込みたい

  • 自社のKARTE接客が正しく動いているか確認したい

などがありましたら、お気軽にご相談ください。運用・実装両面から支援可能です。
https://www.sora-michi.co.jp/dxsolution/karte/