GAの目標の遷移を利用して、フォームのどこで離脱しているか知りたいという場面に遭遇しました。
確認画面にしか表示されない、項目(申し込みボタン)があったためそれを利用して、仮想PVを作成したいと思います。
仮想PV取得までの現状とゴール確認
ほとんどの項目はGTM(Google Tag Manager)にて行います。
現状の確認
sample.com/form → 入力画面
sample.com/form → 確認画面
sample.com/form_thanks → 完了
画面確認画面にしかないボタン → <button class=”btn”>申込む</button>
目指す形
sample.com/form 入力画面
sample.com/form_confirm 確認画面
sample.com/form_thanks 完了画面
確認画面のURLを「form_confirm」とすることで、確認画面で離脱しているのかGoogleAnalyticsで解析出来るようにします。
仮想PV取得をするために用意するもの
データレイヤー
ページに実装します。たまにGTMスニペットコードのしたに記載する記事をみかけますが、データレイヤーはGTMスニペットコードよりも上に記載することが望ましいです。
データレイヤーをGTMコンテナスニペットよりもしたに設置すると、最悪の場合タグが発火しません。
Google公式ヘルプ
https://support.google.com/tagmanager/answer/6164391?hl=ja&authuser=0
以下のデータレイヤーを<head>内のGTMよりも上に記載します。
<!-- データレイヤー_仮想ページビュー -->
<script> window.dataLayer = window.dataLayer || [];
dataLayer.push({ 'trackPageview': '/form_confirm' });
</script>
<!-- End データレイヤー_仮想ページビュー -->
変数
データレイヤーに記載された値を取得するために利用します。
データレイヤー変数
名前は今回は、仮想PV_データレイヤー とします。
変数 > 新規作成 > データレイヤー変数
データレイヤーの変数名
trackPageview と入力します。
データレイヤーで記載した、’trackPageview’: ‘/form_confirm’,
の/form_confirmを取得します。
DOM要素
名前は今回、仮想PV_DOM要素 とします。
変数 > 新規作成 > DOM要素
選択方法
CSSセレクタ
要素セレクタ
button.btn を入力
トリガー
どのページでタグを発火させるかを指定するものです。
名前は今回、仮想PV_トリガーとします。
トリガーのタイプ
ページビューを選択
このトリガーの発生場所
一部のページビュー
Page URL
対象のページを指定 今回の場合は sample.com/form
DOM要素
先程作成した2のDOM要素(仮想PV_DOM要素)を選択し、申込む を記載
タグ
名前は今回、仮想PV_GAタグとします。
Googleアナリティクスを選択
トラッキングタイプ
ページビュー
このタグをオーバライドするにチェック
データを送りたいGAのトラッキングIDを直接記載 直接記入しないと上書きされません。
設定するフィールド
page と記載
{{仮想PV_データレイヤ}} を記載 +の部分をクリックすると選択できます。選択したら自動で{{ }}が付きます。
gtag(グローバルサイトタグ)の場合は、page_path がフィールド名なのですが、GTMでサポートしているのが未だにユニバーサルタグのため、page で記載します。
トリガー
先程作成した、仮想PVトリガーを選択します
このままだと、通常の計測用のtagと仮想PV用のタグが2重で発火してしまうため、通常の計測用のタグのトリガーの例外に、仮想PVトリガーを設定します。
実際に仮想PVが計測されるか確認
GTMのプレビュー機能でキチンと発火されるか確認します。発火されていたら次は、GAのリアルタイム計測でURLが変わっているか確認します。
仮想PVの設定方法は色々な記事が書かれていますが、トリガーをカスタムイベントにしている記事が多いです。
残念ながら、トリガーをカスタムイベントの場合、タグの発火はされても、URLが書き変わらない事もあります。
もし書き変わらなかった場合は、トリガーを今回行ったように「ページビュー」にして試してみてください。