track AB clicks with javascript or jquery

Question

I want to run build some simple AB testing on a website. I would like it to be as light as possible to avoid slowing down pageload, and plan to run a single test at a time, with a single variable. I'm not skilled with javascript, but with some hammering away, I got a simple 50/50 randomizer running:

var randomNumber=Math.floor(Math.random()*2)+1;{
  if (randomNumber == 1)
    document.getElementById("id1").innerHTML = "Please Signup";

  if (randomNumber == 2)
    document.getElementById("id1").innerHTML = "I insist you signup!";
}

http://www.bootply.com/0oum4mlhzW

I am lost at the next step though. I want to track the clicks on signup button, based on what content was showing at the time. I'll need to track # of visitors, # of clicks, and then be able to see this content in html somewhere.

Would also like to use cookies (or another method) to make sure a returning visitor always sees the same content.

Answer 1

Do you mean something like this?

JSFiddle

var btn = document.getElementById('target1');
var track = document.getElementById('track');

// Retrieve
if (localStorage.getItem("trackNum") != ""){
     track.value=localStorage.getItem("trackNum");
}

var cnt = track.value;
btn.onclick = function(){
    cnt++;
    track.value = cnt;

    // Store
    localStorage.setItem("trackNum", track.value);
};

HTML:

<div class="container">
  <h1 id="id1">Do you think you might consider signing up?</h1>
  <button id="target1" class="btn btn-primary">Sign up!</button>
    <input type="text" id="track" value="0"/>
</div>