Google Analyticsによる仮想URLを使ったコンバージョン（成果）計測

2021.11.12

2022.02.02

Fabeee社員ブログ

Google Analyticsによる仮想URLを使ったコンバージョン（成果）計測
◆このブログ記事の内容を実践するのに必要なもの

Google Analyticsで目標（コンバージョン地点）を設定できる知識
Google Tag Manager(GTM)の編集と公開の権限
JavaScriptをつかったDOMの読み取りに関する知識

はじめまして

おはようございます。こんにちは。はじめまして。
2021年の10月からFabeee株式会社にジョインしたマーケティング担当のくわぞおです。

ぼくの過去の経験からGoogle Analyticsでの計測に関わる「よくある困りごと」の解決方法をご説明していきたいと思います。今回は「URLが変わらないフォームのコンバージョン」や「１つのフォーム内に成果地点が複数設定されているフォームで成果地点ごとにコンバージョン」を計測する方法です。

WordPressや外部サービスを使って構築されたサイトでは、入力画面・確認画面・完了画面のURLが変わらないフォームを使用されていることがあります。一般的にGoogle Analyticsでは、特定のページへ遷移したことをトリガーとしてコンバージョン計測を行います。そのためフォームへの入力・入力内容の確認・完了画面でURLが切り替わらないようなフォーム（例１）の場合は、こちらの方法では正確に計測が行うことができません。

例１：URLが変わらないフォームの例

例１の場合、完了画面のURLは “form.html” なのでGoogle Analyticsのコンバージョン地点として “form.html” を設定すると、入力画面 → 確認画面 → 完了画面に遷移するごとにコンバージョンが計測されてしまいます。

社内に気軽に依頼できるエンジニアがいればさほど長い時間がかからず解決することが多い問題ですが、外注して作ってもらったフォームの場合やASPが提供しているフォームの場合、改修に費用が発生したり、そもそも改修することができないことがあります。

とはいえ、正確に計測が行えないとこれから実施しようとしている施策のパフォーマンスを正確に判断することができなくなってしまうため放置しておいても良いことはありません。

そこで今回は、Google AnalyticsとGoogle Tag Manager(GTM)を使って、この問題を短時間で解決する設定手順についてご説明していきます。

仮想URLを使って解決する

この問題を解決するのに役立つのが「仮想URL設定」です。
仮想URLを簡単に説明すると「実際のURLがどうであったかに関わらず、自分が指定したURLを集計対象としてGoogle Analyticsに送信する」設定のことです。

ちょっとわかりにくいので実際の例を見て確認していきましょう。

例１：URLが変わらないフォームの例

URLが変わらないフォームで正しくコンバージョン計測ができない理由は、完了画面への遷移をURLで判別できないことでした。仮想URLを使って、入力画面・確認画面・完了画面のURLを変更してあげることで、完了画面への遷移（”comp.html”への遷移）を正しく計測できるようになります。

仮想URLを設定しよう

それでは、実際に仮想URLを設定する方法について見ていきましょう。
仮想URLを設定するには、現在表示しているページがどのページなのかを特定する情報が必要となります。具体的には<title>タグや、特定のIDが指定されている<DIV>タグの中身などが挙げられますが、これに限らずこの画面が「入力画面なのか、確認画面なのか、完了画面」なのかを判定できる文字列や画像ファイル名などがあればOKです。

今回はわかりやすいように各フォームの<title>タグが以下のように設定されている前提でお話を進めたいと思います。
仮想URLを設定しよう

GTMで<title>タグの中身を取得する変数を作る

1.GTMにアクセスして、左のメニューから「変数」を選択します。

2.ユーザー定義変数の右上にある「新規」をクリックします

3.赤枠の部分をクリックします

4.JavaScript変数をクリックします

5.下記のように設定を行います
①グローバル変数名に[document.title]と入力します。
②この変数に適当な名前をつけます。今回は「【変数】タイトル」としました。
③「保存」ボタンを押して変数を保存します。

グローバル変数名

以上で、ページ内の<title>タグの中身を取得する変数が設定できました。
続いて、<title>タグの中身に応じてページのURLを変更するルックアップテーブル変数を設定していきます。

GTMでルックアップテーブルを設定する

「ルックアップテーブル」とは、指定された変数を読み込み、その変数の値がルックアップテーブル内で指定された値と同じであった場合に特定の値を返す変数です。文字の説明だとなんのこっちゃわからないので、実際の例を見てみましょう。

①変数を入力
読み込む変数を指定します。ここではさきほど作成した、ページの<title>タグの中身を取得する変数を指定します。

②ルックアップテーブル
入力のカラム：
①で指定した変数の値がここに記入した値と同じだったらという条件を記入していきます。

出力のカラム：
①で指定した変数の値が入力のカラムと同じであった時に出力したい値を記入してます。

つまりこの例では、ページの<title>タグの中身が

入力画面　だったら　URLは　input.html　をGoogle Analyticsに通知せよ
確認画面　だったら　URLは　confirm.html をGoogle Analyticsに通知せよ
完了画面　だったら　URLは　complete.htmlをGoogle Analyticsに通知せよ

という設定になります。
ルックアップテーブル

それでは実際の設定方法を見ていきましょう
1.ユーザー定義変数の右上にある「新規」をクリックします

2.赤枠の部分をクリックします

3.ルックアップテーブルをクリックします

4.下記のように設定を行います
①変数を入力の箇所に先ほど作成した「【変数】タイトル」を設定します。
②入力のカラムに上から

入力画面
確認画面
完了画面

と入力します。

出力のカラムに上から

input.html
comfirm.html
complete.html

と入力します。

行が足りない場合は「行を追加」ボタンをクリックして行を追加してください。
③「デフォルト値を設定」にチェックを入れて、値に{{page Path}}を設定します。
④この変数に適当な名前をつけます。今回は「【変数】LUT_仮想URL」としました。
⑤「保存」ボタンを押して変数を保存します。

「デフォルト値を設定」にチェックを入れて、値に{{page Path}}を設定します。

以上で仮想URL出力用ルックアップテーブルの設定が完了しました。

Google Analyticsタグにルックアップテーブルを登録する

いよいよ最後の手順です。
ここからはお使いのGoogle AnalyticsがUA（ユニバーサルアナリティクス：旧版のGoogle Analytics）またはGA4（最新版アナリティクス）かで設定方法が変わってきます。それぞれで解説していますので、お使いのGoogle Analyticsに合わせた設定を行ってください。

UA（ユニバーサルアナリティクスの場合）
ユニバーサルアナリティクスをお使いの場合は、下記の手順に沿って設定を行います。

1.ページ左側のタグをクリックして、Google Analyticsタグをクリックします。

2.Google Analyticsの設定フィールドに下記を追加します
フィールド名：Page
値：さきほど作成したルックアップテーブル
設定後「保存」ボタンをクリックします。

以上で仮想URLの設定が完了しました。

GA4の場合
GA4をお使いの場合は、UA（ユニバーサルアナリティクス）をお使いの場合に比べて設定が少し煩雑になります。
1.イベントトリガーを作成します
GTMの左メニューから「トリガー」を選択します。

2.赤枠の「新規」ボタンをクリックします。

3.画面中央の赤枠部分をクリックします

4.トリガーのタイプ一覧が表示されますので「ページビュー」を選択します。

5.トリガーを下記のように設定します。
ここでは入力画面にアクセスした際に仮想URLが[/test/input.html]である場合のトリガーを作成します。
このトリガーの発生場所：一部のページビュー
イベント発生時のこれらすべての条件がtrueの場合にこのトリガーを配信します：

一番左：さきほど設定したルックアップテーブルを選択
真ん中：含む
一番右：/test/input.html

設定後、名前をつけて保存します。
確認画面・完了画面についても同様に設定してください。
なお、正規表現を使える方は、正規表現を使ってトリガーを１つにまとめても問題ありません。
トリガーの設定

6.GTMの左メニューから「タグ」を選択します。

7.赤枠の「新規」ボタンをクリックします

8.タグタイプは「GA4イベント」を選択して、下記のように設定します。
設定タグ　：計測使用しているGA4タグ
イベント名：page_view
イベントパラメータ：
・パラメータ名 = page_location
・値　　　　　 = ルックアップを選択
トリガー：さきほど作成した入力画面、確認画面、完了画面のトリガー

設定完了後、適当な名前をつけて保存してください。
タグの設定

9.GTMよりサイト全体の計測に使用しているGA4タグを選択します。

10.トリガーの除外条件に下記を設定します。
除外条件に設定するトリガー：入力画面、確認画面、完了画面のトリガー

ユニバーサルアナリティクスでは、仮想URLを設定すると元のURLのPV情報は自動的に除外されるのですが、GA4の場合は仮想URLで設定したPV情報と元のURLで発生したPV情報の両方がサーバに送信されてしまいフォームのPV数をダブルカウントされてしまいます。これをふせぐために、サイト全体の計測に使用しているGA4タグによる計測を除外してやる必要があります。
トリガーの除外条件に下記を設定します。

以上でGA4の設定は完了です。

動作を確認してみよう

GTMのプレビューモードを使って動作を確認します。
プレビューモードとは、今回設定したタグを本番環境に反映せず、自分のブラウザだけを対象に設定したタグの動作を行うことができる機能です。

1.画面右上にある「プレビュー」ボタンをクリックします。

2.プレビューを行うURLを入力して「Connect」ボタンをクリックします。

3.
(Universal Analyticsの場合)
仮想URLを設定したページにアクセスして、Google Analyticsからリアルタイムを選択します。アクティブなページの一覧に仮想URLで設定したURLが表示されていれば成功です。

(GA4の場合)
仮想URLを設定したページにアクセスして、Google Analticsからリアルタイムを選択します。イベントの箇所にコンバージョンポイントに到達した際に発生するイベントが計測されていれば成功です。

まとめ

今回はURLが変わらないフォームで正確にコンバージョン計測を行う方法について解説してきました。成果地点の<title>タグの中身を見てコンバージョンを計測する方法もありますが、仮想URLを使って入力画面・確認画面・完了画面を分割してあげることにより、お客様がフォームのどこで離脱しているのかも可視化できるようになるため、少し面倒ですが仮想URLによるコンバージョン計測の実装方法をおすすめします。

また仮想URLを使うことで、１つのフォーム内に「資料請求」や「お問い合わせ」などといった複数のコンバージョン地点が設定されているような場合も計測を行うことも可能です。今回紹介した設定方法より面倒な設定が必要になることが多いですが、ぜひチャレンジしてみてください。

Fabeee株式会社では、Webサイトの計測をはじめ、サイト構築からSEOや広告運用に至るまで各種マーケティング支援など幅広く承っております。ご興味のある方は、ぜひお問い合わせください。