JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js"></script>
<script src="https://raw.github.com/blackjid/gwohelper/master/gwo_helper.js"></script>
<script src="https://raw.github.com/blackjid/gwohelper/master/gwo_helper.config.js"></script>
<h1 class="header">Header</h1>
<button id="signupbutton">SignUp</button>
<div class="picture">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQoap5Ktucf2diyMv9boEsimJmnaW_x8lrMt-6tIlGjGLL9AMXRzg&t=1" width="80" height="80"/>
<br />
<span class="caption">caption</span>
</div>
CSS
/* Header section for experiment "signup" */
.header{display:none;}
.state-test-signup-0-0 .header{
display:block;
/* Original */
}
.state-test-signup-0-1 .header{
display:block;
font-size:25px;
color:green;
}
.state-test-signup-0-2 .header{
display:block;
font-size:25px;
color:red;
}
/* SignUpButton section for experiment "signup" */
#signupbutton{display:none;}
.state-test-signup-1-0 #signupbutton{
/* original */
display:block;
}
.state-test-signup-1-1 #signupbutton{
display:block;
font-size:25px;
font-weight:bold;
background:orange;
}
/* picture section for experiment "viewpicture" */
.picture{
display:none;
background:white;
}
.state-test-viewpicture-0-0 .picture{
/* Original */
display:block;
}
.state-test-viewpicture-0-1 .picture{
display:inline-block;
padding:10px 10px 20px 10px;
border:1px solid #ccc;
}
.state-test-viewpicture-0-2 .picture{
display:inline-block;
padding:10px 10px 20px 10px;
border:1px solid #ccc;
-webkit-transform:rotate(-5deg);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
/* caption section for experiment "viewpicture" */
.state-test-viewpicture-1-0 .caption{
/* original */
}
.state-test-viewpicture-1-1 .caption{
text-transform:uppercase;
font-size:14px;
}
.state-test-viewpicture-1-2 .caption{
font-size:20px;
font-weight:bold;
}
JavaScript
// Delete the Google Analytics cookies to reset the variations
console.log($.cookie("__utmx", ""));
console.log($.cookie("__utmxx", ""));
GWO_helper.loadControl("signup", true);
$("#signupbutton").click(function(){
GWO_helper.track("signup", "goal")
GWO_helper.loadControl("viewpicture", false);
});