計測タグ(SPAサイトの場合)

SPAサイトの場合の設置方法

タグ設定の変更

下記の「アプリケーションへの実装」もしくは「GTMを利用する場合」の設定を行うと、タグから自動的に送信されるviewイベントとイベントデータが重複するため、タグによるviewイベントの自動送信を無効化する設定を行なってください。

  1. 左メニュー上部のプロジェクト名をクリック

  2. 開いたポップアップメニュー内のプロジェクト名の右にある歯車マークをクリック

  3. 遷移した設定画面内の「計測タグ」をクリック

  4. 基本設定の「viewイベント自動送信を無効化」のチェックをONにし、保存ボタンをクリック

以上で、設定は完了です。

アプリケーションへの実装

タグ自体はSPAでも動作しますが、仮想的なページ遷移時をpageviewとして計測する場合、明示的にviewイベントを発生させる必要があります。

具体的なコードの埋め込み箇所については、SPAの実装および使用しているフレームワーク(Vue.js, Angular, jQuery-mobileなど)に依存します。

多くの場合フレームワークのルータには、ルーティング完了時にコードを実行するためのイベントハンドラの設定があります。その中で

krt('view');

を実行するようにして下さい。

実装時の注意点

  • 仮想的なページ遷移が完全に完了する前にviewイベントタグを実行した場合、1ページ前のタイトルがviewイベントで連携されてしまうことがあります。

    • たとえば、document.titleが書き換わる前にviewイベントを発火させた場合、変更前のページタイトルやURLで記録されてしまいます

  • 実際のページ遷移に対して重複してviewイベントを送信してしまう可能性にご注意ください。変化前後のURLの差分をチェックし、差がある場合のみ実行する制御が必要な場合があります。

GTMを利用する場合

1. Wicleタグがページ読み込み時に実行されるようにする

GTM画面にてタグを作成し、Wicleの計測タグをGTMから配信します。

  • タグの設定

    • タグの種類をカスタム HTMLに設定します

    • HTMLにはWicleの設定画面で確認できるタグをコピーし、貼り付けます

  • 詳細設定を選択し、タグ配信の優先度を設定します

    • 他のタグ実行に必要なため、十分に高い数値(10など)を設定してください。

  • トリガー

2. viewイベントタグが仮想的なページ遷移時に実行されるようにする

GTM画面にてタグを作成し、viewイベントタグをGTMから配信します。

  • タグの設定

    • タグの種類をカスタム HTMLに設定します

    • 詳細設定を選択し、タグ配信の優先度を設定します

    • 1.のWicleのタグの後に実行されるように、より低い数値を設定してください。

  • HTMLには次のようなタグを設定します

<script type="text/javascript">
krt('send', 'view');
</script>
  • トリガー トリガータイプは 履歴の変更 を指定します。 URLの変更を伴うすべての仮想的なページビューをトラッキングする場合はすべての履歴の変更を選択します。

※ Wicleで計測したくないページがある場合は、条件を追加し除外してください。

※ サイトの実装によっては、すべての履歴の変更ではなく一部の履歴の変更(History)イベントにトリガー条件を絞り込む必要があります。GTMプレビューでHistoryイベントの発生状況を確認しつつ、サイトに合わせたトリガー設定を実施してください。

最終更新

役に立ちましたか?