concrete5のフォームブロックでGoogle Analyticsのコンバージョンを取得する方法

ぼくがイチオシしているオープンソースCMS「concrete5」には、お問い合せフォームを作成するのに使える「フォームブロック」が標準で搭載されています。

参考：フォームブロックの使い方 :: concrete5日本語公式サイト

プラグインのインストールも不要で、初心者でも簡単にフォームが作成できるのでとても便利なのですが、Google Analyticsでコンバージョンを取得しようと思うと、カスタマイズが必要です。今回はその方法を解説します。

標準のフォームブロックのテンプレートを使っている場合

まず、 /concrete/blocks/form/view.php をコピーして、 /blocks/form/view.php に複製します。concrete5ではこのように、concrete5のコアファイルを変更せず、ユーザー領域に設置したファイルで上書きします。

参考：concrete5 のシステム基本構造 :: concrete5日本語公式サイト

そして、ユーザー領域に複製した view.php の完了メッセージが表示される部分に、Google Analytics用のJavascriptを1行追加します。

▼変更前

<div id="msg"><?php  echo $survey->thankyouMsg ?></div>

▼変更後

<div id="msg"><?php  echo $survey->thankyouMsg ?></div>  <script>_gaq.push(['_trackPageview','/form/thanks<?php echo intval($bID)?>']);</script>

このスクリプトの追加によって、フォームの完了メッセージが表示された際、「/form/thanks[ブロックID]」というURLに移動しました！とGoogle Analyticsに嘘を教えることができます。あとは、Google Analyticsの設定でこのURLを目標URLとして登録しておけばOKです。

ちなみに、「/form/thanks」の部分は架空のアドレスなので、何でもOKです。もし既存のページと被る場合は変えてください。また、フォームブロックの設定で、「フォーム送信の後に特定のページに移動」する様にしている場合は、そもそもそのページのURLをGoogle Analyticsに登録すればいいので、このカスタマイズは必要ありません。

「Ajax Form」アドオンを導入している場合

標準のフォームブロックは、送信時にページをリロードするので、エラーメッセージの表示が遅れて多少イライラします。そのため、ページ遷移を無くしAjax化してくれるアドオン「Ajax Form」を入れることが多いです。この場合はちょっと変わりまして、Ajaxで完了メッセージを表示する部分に手を加えます。

▼変更前

function <?php  echo $template_onsuccess_funcname; ?>(form, thanks) {  	//This js code happens after form is successfully processed...  	$(form).find('#msg').show();  	$(form).find('div.success').html(thanks).show();  	$(form).find('div.indicator').hide();  	$(form).find('div.fields').hide();  }

▼変更後

function <?php  echo $template_onsuccess_funcname; ?>(form, thanks) {  	//This js code happens after form is successfully processed...  	$(form).find('#msg').show();  	$(form).find('div.success').html(thanks).show();  	$(form).find('div.indicator').hide();  	$(form).find('div.fields').hide();  	_gaq.push(['_trackPageview','/form/thanks<?php echo intval($bID)?>']);  }

お役に立てば幸いです。

---