« スギ花粉症の初期療法は今のところ効果アリ、順調に1ヶ月が経過、4月もお薬の服用継続します | メイン | レディー・カガも参戦!第37回 全国健勝マラソン加賀温泉郷大会でハーフマラソン、お花見ラン楽しんできました »

TOP> Webをカスタマイズ

フォームメーラーFree版で、GoogleアナリティクスのEコマースを設定して擬似Eコマースを計測してみた~設定編

フォームメーラーは、メールフォームのASPでありCGIなどの知識は不要で簡単に導入できる。
また3プランが用意されていて、そのひとつは「フォームメーラーFree版」といい無料で提供している。

このサービスはショッピングカートではないので、本来はGoogleアナリティクスのEコーマス設定は行わないのであるが、カートのないWebサイトでは、問い合わせフォームへの誘導がビジネスチャンスとなる。

そのため、このサービスの一般フォームや投票フォームを作成、Eコマース設定を行い、効果測定に利用する。
商品購入ではないので、擬似Eコマースともいう。

さて、「フォームメーラーFree版」での設定方法。

今回は、きちんとEコマース設定が正確に取得できるかという検証のスタートとしての設定編である。


1.完了(サンクス)ページを自社サイトに作成

自社サイトのサーバに、「ありがとうございました。」などを明記したthank.htmlなどのHTMLページを作成する。

このページに、Eコマース設定のためのGoogleアナリティクスのトラッキングコードを設定する。

Google Codeの「e コマース トラッキング」に完全なコード例としてトラッキングコードサンプルが提供されている。

このコードに従って、

_gaq.push(['_addTrans'・・・ ]);
_gaq.push(['_addItem'・・・ ]);

の入力値を自社用のデータとして入力していく。
必須(required)の値は必ず確認して設定する。
とくに収益となるtotal、unit priceのデータは価格を入力する。

--------------------------------------

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-自分のコード']);
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);
  _gaq.push(['_addTrans',
    '1234',           // order ID - required
    'taskmotehr',  // affiliation or store name
    '5000', // total - required
    '',           // tax
    '',              // shipping
    '',       // city
    '',     // state or province
    ''             // country
  ]);

   // add item might be called for every item in the shopping cart
   // where your ecommerce engine loops through each item in the cart and
   // prints out _addItem for each
  _gaq.push(['_addItem',
    '1234',           // order ID - required
    'DD44',           // SKU/code - required
    'vote',        // product name
    '',   // category or variation
    '5000', // unit price - required
    '1'               // quantity - required
  ]);
  _gaq.push(['_trackTrans']); //submits transaction to the Analytics servers

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

--------------------------------------


</head>の直前に挿入する。

HTMLファイルを保存して、自社サーバにアップロード。
このファイル名を[thank.html]として以下、説明。


2.フォームメーラー管理画面での設定

フォームを作成後、

(1)メニュー>環境設定>各種画面設定 にアクセス

フォームメーラー戻りURLの設定

自社サイトへの誘導を行う設定を行う。

[完了画面設定]の「リダイレクトURL」に1で作成したHTMLページのURLを入力する。

PCのフォームにhttp://からURL(・・・/thank.html)を入力

下部の「設定を保存する」ボタンで設定完了。

今回の設定は、

・入力画面設定:当サイトを利用する
・入力内容確認画面設定:表示する

(2)メニュー>環境設定>トラッキングコード設定

新コードを利用するにチェックを付けて、
GoogleAnalyticsで発行された「ウェブプロパティID」を設定する。

フォームの確認画面のURLは、httpsでssl.form-mailer.jp/fm/service/Forms/confirm
完了URLは、ssl.form-mailer.jp/fm/service/Forms/complete

となる。

これは、フォームメーラーで5フォームを作成できるが、いずれも同じURLである。
Googleアナリティクスの目標設定を行うときは、工夫が必要である。


3.フォームメーラーに誘導するページを作成

フォームメーラー、URLリンクを利用

今回は、フォームを「URLリンク」を利用して誘導する。

この時、リンクタグには、

<a href="フォームメーラーで作成したURLリンク" onclick="_gaq.push(['_link', this.href]); return false;">メールフォームへ</a>

新しいウィンドウで開きたい場合は、

<a href="フォームメーラーで作成したURLリンク" onclick="_gaq.push(['_link', window.open(this.href)]); return false;">メールフォームへ</a>


トラッキングコードに以下の2行を追加

gaq.push(['_setAccount', 'UA-自分のウェブプロパティID']);

_gaq.push(['_trackPageview']);
の間に、

_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);

を入れる。

これは、外部サイトへ遷移してもトラッキングを行うことができる設定にするため。

参考にしたサイトは:「異なるドメイン間のコンバージョンをとる【非同期】GoogleAnalytics:Miraiyanet.Blog」






以下で実際に設定を行いました。

今回は問い合わせフォームでなく、投票フォームで設定してみました。

以下の投票フォーム(新ウィンドウが表示されます)

Google検索の環境について

で確かめていただければと思います。

なお、投票フォームの場合、完了ページに戻りURLを設定すると、投票結果を見ることができません。

しかし、結果集計のURLも提示されているので、完了ページにこのURLを明記することで
投票していただいた方に結果を参照してもらえます。
実際の完了ページには、

1.トップページへのリンク
2.この記事ページへ戻るのリンク
3.投票集計結果のリンク(フォームメーラーの外部URL)

を明記してあります。

今回は設定編でしたが、データが溜まった段階で計測編、分析編などを随時アップしていく予定です。

そのためにも、投票フォームへのご協力お願いします!(._.)

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)