サイト上のナビゲーションのA/Bテストを実施し、その効果としてどのくらいクリックされるのに差が出るのかというのをやりたかったときに調べたのでメモとして残します。
view内
クリックした時にデータを渡したかったのでviewでは以下のように記述しました。
対象となる箇所にクラスをもたせます。"js-名"というように宣言することでjs内でクラス指定のもと使用することができます。一応インクルードするところも含めておきました、要らないとは思いますが。。。レファレンスも一応載せておきます。http://railsdoc.com/references/javascript_include_tag
<%= javascript_include_tag('hoge') %>
・
・
・
<div class="js-link" data-url-name="hoge">
<%= link_to 'HOGE', hoge_path %>
</div>
<div class="js-link" data-url-name="hogehoge">
<%= link_to 'HOGEHOGE', hoge_hoge_path %>
</div>
javascript内
A/Bテストを行いたかったので「指定先のurlにデータurlをpostする」という余計なものまでくっついていますがそこは大目にみてください。
さきほどview内で"js-"とクラスで指定したものをここで使用します。そのクラスの中のdataで指定した文字列を呼び出しています。
$(function() {
$(".js-link").on("click",function(){
var urlName = $(this).data("url-name");
$.post("送信先url", {
'url': '/mobile/'+ urlName
});
});
});
ここで2つのリンク先をひとつのクリック処理にまとめています。クリックした時にそのクリックしたデータを取得したいので"this"を使用しました。こいつの存在を知らなかった笑。こちらがまとまっていると思います。
http://qiita.com/vvakame/items/74005adacc0e8e2a3cab
まあこんなものを使用しながら対応しました。
ちなみにview内で
<div class="js-link" data-url-name="hoge" data-user-id="<%= @login_user.id %>">
<%= link_to 'HOGE', hoge_path %>
</div>
のようにrubyを持たせることもできるみたいです。あともう一点、書き方ですがjavascript内でのデータの受け方で
var urlName = this.dataset.urlName;
っていう書き方もできるっぽいです。これらに関しては未だ調べ中です。。。