計測タグ(SPAサイトの場合)
SPAサイトの場合の設置方法
タグ設定の変更
下記の「アプリケーションへの実装」もしくは「GTMを利用する場合」の設定を行うと、タグから自動的に送信されるviewイベントとイベントデータが重複するため、タグによるviewイベントの自動送信を無効化する設定を行なってください。
左メニュー上部のプロジェクト名をクリック
開いたポップアップメニュー内のプロジェクト名の右にある歯車マークをクリック
遷移した設定画面内の「計測タグ」をクリック
「viewイベント自動送信を無効化」のチェックをONにし、保存ボタンをクリック
以上で、設定は完了です。
アプリケーションへの実装
タグ自体はSPAでも動作しますが、仮想的なページ遷移時をpageviewとして計測する場合、明示的にviewイベントを発生させる必要があります。
具体的なコードの埋め込み箇所については、SPAの実装および使用しているフレームワーク(Vue.js, Angular, jQuery-mobileなど)に依存します。
多くの場合フレームワークのルータには、ルーティング完了時にコードを実行するためのイベントハンドラの設定があります。その中で
を実行するようにして下さい。
状態変化に連動して実行するなどの時、実際のページ遷移に対して重複してviewイベントを送信してしまう可能性にご注意ください。変化前後のURLの差分をチェックし、差がある場合のみ実行する制御を入れて頂く必要があるケースがあります。
GTMを利用する場合
1. Wicleタグがページ読み込み時に実行されるようにする
GTM画面にてタグを作成し、Wicleの計測タグをGTMから配信します。
タグの設定
タグの種類を
カスタム HTML
に設定しますHTML
にはWicleの設定画面で確認できるタグをコピーし、貼り付けます
詳細設定
を選択し、タグ配信の優先度を設定します他のタグ実行に必要なため、十分に高い数値(10など)を設定してください。
トリガー
トリガータイプは ページビュー を指定します。
2. viewイベントタグが仮想的なページ遷移時に実行されるようにする
GTM画面にてタグを作成し、viewイベントタグ
をGTMから配信します。
タグの設定
タグの種類を
カスタム HTML
に設定します詳細設定
を選択し、タグ配信の優先度を設定します1.のWicleのタグ
の後に実行されるように、より低い数値を設定してください。
HTML
には次のようなタグを設定します
トリガー トリガータイプは 履歴の変更 を指定します。 URLの変更を伴うすべての仮想的なページビューをトラッキングする場合は
すべての履歴の変更
を選択します。
※ Wicleで計測したくないページがある場合は、条件を追加し除外してください。
※ サイトの実装によっては、すべての履歴の変更
ではなく一部の履歴の変更(History)
イベントにトリガー条件を絞り込む必要があります。GTMプレビューでHistoryイベントの発生状況を確認しつつ、サイトに合わせたトリガー設定を実施してください。
注意点
次のような場合は、サイト改修が必要です。サイト構築を担当しているエンジニアの方に作業をご依頼ください。
GTMが導入されていない場合
GTMが導入されているが、「履歴の変更」トリガーが意図通りに発火しない場合
最終更新