アークウェブのブログ

URLが変化しない動的ページの計測の仕方

まず，手法のおさらいです。
URLが同じでも，状況ごとに異なる値をアナリティクスに計上する方法は二つあります。

アナリティクス ヘルプ ＞
URL の目標の設定例 「複数のステップで同一の URL」
https://support.google.com/analytics/answer/1116091?hl=ja#identical

1. イベントトラッキングを使う方法
画面ごとに，"異なるイベントが発生した" ものとして計上する方法です。

2. 仮想ページビューを使う方法
画面ごとに，"異なるURLへのアクセスがあった" ものとして計上する方法です。実際には存在しないURLを仮想的に割り当てます。

仮想ページビュー方式の方は一般のページと同様 URL ベースなので，初心者にもレポートの設定やフィルタリングが扱いやすいと思います。今回は2の仮想ページビューを使う方法で，説明していきます。

基本編: テンプレート内にベタに書いてみる

Googleユニバーサルアナリティクスでは，
デフォルトのトラッキングコードの

ga('send', 'pageview');

部分を，

ga('send', 'pageview', {
     'page': '/仮想のパス',
     'title': '任意のタイトル'
  });

とすることで，任意のURL(パス)やタイトルで計上できます。

A-Formの確認画面，完了画面は 通常は次のURLになります。
https://YOUR_DOMAIN/MT/plugins/AForm/aform_engine.cgi

これを，Google アナリティクス上では

確認ページ (仮想ページビュー)
 https://YOUR_DOMAIN/contact/aform_confirm
 
完了ページ (仮想ページビュー)
https://YOUR_DOMAIN/contact/aform_finish

へのアクセスとしてカウントしたいとします。
前述の箇所をこう書き換えます。
もちろん /contactというディレクトリ名も，aform_confirmというファイル名も任意でつけた名前です。別の名前に変えてもいいですし，拡張子付きでaform_confirm.html としてもかまいません。

確認画面
 ga('send', 'pageview', {
    'page': '/contact/aform_confirm',
    'title': '確認ページ'
 });

完了画面
 ga('send', 'pageview', {
    'page': '/contact/aform_finish',
    'title': '完了ページ'
 });

一番ベタな方法としては，A-Formの確認，完了の各テンプレート

/MT/plugins/AForm/tmpl/aform_confirm.tmpl
/MT/plugins/AForm/tmpl/aform_finish.tmpl

内の終了タグ </head> の直前の位置に GAトラッキングコードを直書きすればよいわけです。

より実用的な方法

さて，前述のトラッキングコードを個別テンプレ内にベタ書きするやり方は，あまりエレガントな方法とは言えません。

せっかくMTなので，似たようなトラッキングコードをあちこちに直接書くのではなく，共通モジュール化して複数テンプレートからインクルードして使いたいですよね。

また，A-Formは フォームを好きなだけ量産できる点がいい点で，実際に多くのサイトで複数フォームが運用されています。そこで，Googleアナリティクス上でも "どのフォームの確認画面なのか" まで知りたいです。

そこで，フォームIDが123，フォーム入力ページのページタイトルが「とあるお問い合わせ」場合なら

　　確認ページ (仮想ページビュー)
　　・仮想URL: https://YOUR_DOMAIN/contact/aform_confirm_123
　　・タイトル: 「とあるお問い合わせ(aform_confirm)」

　　完了ページ (仮想ページビュー)
　　・仮想URL: https://YOUR_DOMAIN/contact/aform_finish_123
　　・タイトル: 「とあるお問い合わせ(aform_finish)

といったように，

仮想URLが， /contact/{aformの状態}_{フォームid} 
タイトルが， {入力ページのページタイトル}({aformの状態})

の形式で出力されるようにし，また
トラッキングコードはサイト共通のモジュールでも一元管理するように改良していきましょう。

先に 完成した実装例を示します。
トラッキングコードは，サイト共通のテンプレートモジュール「GAトラッキングコード」で管理し，各テンプレートからはこのモッジュールをインクルードして使います。

テンプレートモジュール「GAトラッキングコード」の内容

各テンプレートからは上のテンプレートモジュールをインクルードして使います。

<mt:Include module="GAトラッキングコード"/>

A-Form確認画面，完了画面のテンプレートからインクルードする時だけ，テンプレート種別等をパラメータでうけ渡します。is_aform_engine_cgi パラメータは呼び出し元がA-Formテンプレートか，それ以外のアーカイブかを識別するフラグです。

<mt:Include module="GAトラッキングコード" is_aform_engine_cgi ="1" template_type="aform_confirm"/>

トラッキングコードの出し分け部分(9行目〜)
パラメータ is_aform_engine_cgi がtrue なら，A-Form用のコードを出力し，それ以外なら(16行目)通常のトラッキングコードを出力します。

A-Form用のコードの処理部分(10,11行目あたり)

<mt:var name="template_type">_<mt:var name="id"><mt:var name="template_type">_<mt:var name="id">
<mt:Pages id="$entry_id"><$mt:PageTitle encode_js="1"$>(<mt:var name="template_type">)</mt:Pages>

aform_engine_url モディファイアに，/contact/{template_typeで渡された値}_{フォームid} をセットし，
aform_engine_title には ページタイトル＋{template_typeで渡した値}をセットしています。

A-FormではフォームIDや埋め込み元ページのエントリーIDなどが所定の変数に格納され，確認画面や完了画面のテンプレートから参照できるようになっているのでこれを利用する点がコツです。
id でフォームIDが，また entry_id で埋め込みページのエントリーIDがそれぞれ取得できます。

参考URL

アナリティクス ヘルプ ＞
URL の目標の設定例 「複数のステップで同一の URL」
https://support.google.com/analytics/answer/1116091?hl=ja#identical

analytics.js のフィールド リファレンス ＞ コンテンツの情報
https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#content

【A-Form】確認画面やエラー画面で使える変数
https://www.ark-web.jp/movabletype/blog/2011/07/aform_getvar.html

オマケ: Googleアナリティクス 目標の設定

以上のようにトラッキングコードをカスタマイズしたら，
Googleアナリティクスでフォームの確認画面や完了画面がそれぞれ固有のURLで識別できるように
なるので，ページビューのレポートで絞り込んだり，目標設定が楽になります。

目標設定の設定の一例:
アナリティクス設定のビューの目標設定画面で，「新しい目標」を追加します。

・目標タイプには 「到達ページ」を選択します。
・到達ページの条件欄は，
　　・特定のフォームIDについて計測したいなら
　　 「等しい」を選択して「/contact/aform_finish_XXX」と入力します。
　　　XXX部分はフォームのIDです。

　　・全フォームを対象にしたいなら
　　　「先頭が一致」を選択して「/contact/aform_finish_」と入力します。

　　・その他に「正規表現」も使えます。

以上，A-Formの動的ページ(確認画面や完了画面)をGoogleアナリティクスで扱いやすくする実装について紹介しました。
是非ご活用ください。