ホーム > サポート・マニュアル > チュートリアル > フォーム > 応用編第1回：サンキューページを用意してコンバージョンを調べよう

応用編第1回：サンキューページを用意してコンバージョンを調べよう

ドキュメント最終更新日時：2011/07/12 09:14

コンバージョン率を分析できるようにする

これまでのフォームでは、1枚のテンプレート( HTML )でフォームの入力から送信結果までが全て完結していました。この状態だと、最初から最後まで単一のURLで画面遷移が行われてしまうため、Google Analytics等でコンバージョンを調べる際に、ゴールページを設定することができませんでした。

サンクスページのサンプル

今回の応用編では、新しいサンプルファイルを用意しているので、お使いの環境に設置してください。メール送信の機能を設定する場合などは、適宜フォームIDを設定してください。

今回はサンキューページ( 送信のお礼ページ )を別で用意して、フォームの送信が完了したら、そのページが表示されるようにします。

サンキューページを用意する

サンプルファイルの中にthanks.htmlを用意していますが、body要素内は何も入っていません。この中に、サンキューページの内容を入れていきます。

結果表示( step#result )を移植する

form.htmlの中から、結果を表示している部分を取り出して、thanks.htmlのbody要素内に貼付けます。結果表示( step#result )ブロックは、フォームモジュールの中でないと表示できないので、結果を表示している部分を、Formモジュールのテンプレートタグで囲う事も忘れないでください。

thanks.htmlのサンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="js" lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=%{CHARSET}" />
<title>サンキューページのサンプル</title><!-- BEGIN_MODULE Js -->
<script type="text/javascript" src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
</head>
<body>
<h1>コメントありがとうございます</h1>
<!-- BEGIN_MODULE Form -->
<!-- BEGIN step#result -->
<dl>
<dt>ハンドルネーム</dt>
<dd>
{name}
</dd><!-- BEGIN address:veil -->
<dt>メールアドレス</dt>
<dd>
{address}
</dd><!-- END address:veil -->
<dt>コメント</dt>
<dd>
{comment}[nl2br]
</dd><!-- BEGIN age:veil -->
<dt>年代</dt>
<dd>
{age}
</dd><!-- END age:veil -->
</dl>
<p>上記の内容で送信しました。</p>
<!-- END step#result -->
<!-- END_MODULE Form -->
</body>
</html>

結果表示( step#result )に別ページを利用する設定

結果表示のときに、さきほど用意したthanks.htmlにジャンプする設定を行います。編集箇所は、確認画面( step#confirm )です。

送信用のボタンが含まれるForm要素

<form action="" method="post">
<input type="hidden" name="takeover" value="{takeover}" />
<input type="hidden" name="step" value="result" />
<input type="hidden" name="id" value="sample" />
<input type="submit" name="ACMS_POST_Form_Submit" value="上記の内容で送信" />
</form>

このForm要素のaction属性には、何も書かれていません。これは本来、バリデーターなどのチェックでエラーが返ってきたときに表示するstepを指定する箇所です。確認画面( step#confirm )の時点ではすでにチェックが終わっている状態なので何も書かれていませんが、これをthanks.htmlと書き換えます。

action属性に他ページを指定する

action属性にファイル名が入っていると、送信後にそのファイルのページにリンクされます。先ほど用意したthanx.htmlには結果表示( step#result )の記述が含まれているので、リンクされたあとにも入力情報を反映した結果を表示することができます。

thanks.htmlに書き換える

<form action="thanks.html" method="post">
<input type="hidden" name="field:takeover" value="{field:takeover}" />
<input type="hidden" name="step" value="result" />
<input type="hidden" name="id" value="sample" />
<input type="submit" name="ACMS_POST_Form_Submit" value="上記の内容で送信" />
</form>