Commit 52a2d90a authored by sajolida's avatar sajolida

Add A/B testing to compare the current version with #16830

parent 545d36eb
...@@ -42,6 +42,18 @@ ...@@ -42,6 +42,18 @@
display: none; display: none;
} }
/* A/B testing: default version */
#variant-default #frequency .col-md-12 {
margin-bottom: 1em;
padding: 0;
border: solid 3px white;
}
#variant-default #donate-paypal-button .col-md-12 {
margin-top: 1em;
}
/* JavaScript version */ /* JavaScript version */
#currency .col-md-12 { #currency .col-md-12 {
......
...@@ -46,6 +46,8 @@ ...@@ -46,6 +46,8 @@
<div id="paypal-with-js"> <div id="paypal-with-js">
<div id="variant-default">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr"> <form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<!-- HTML Variables for PayPal Payments Standard: <!-- HTML Variables for PayPal Payments Standard:
...@@ -54,11 +56,153 @@ ...@@ -54,11 +56,153 @@
<input type="hidden" name="business" value="tailsriseuplabs@riseup.net" id="business"/> <input type="hidden" name="business" value="tailsriseuplabs@riseup.net" id="business"/>
<input type="hidden" name="currency_code" value="USD" id="currency_code"/> <input type="hidden" name="currency_code" value="USD" id="currency_code"/>
<input type="hidden" name="item_name" value="Donation to Tails"/> <input type="hidden" name="item_name" value="Donation to Tails"/>
<input type="hidden" name="custom" value="default"/>
<input type="hidden" name="no_note" value="1"/> <input type="hidden" name="no_note" value="1"/>
<!-- Note for translators: adapt the URLs to return to the page in your language. --> <!-- Note for translators: adapt the URLs to return to the page in your language. -->
<input type="hidden" name="return" class="return-url" value="https://tails.boum.org/donate/thanks"/> <input type="hidden" name="return" class="return-url" value="https://tails.boum.org/donate/thanks?v=default"/>
<input type="hidden" name="cancel_return" class="return-url" value="https://tails.boum.org/donate/canceled"/> <input type="hidden" name="cancel_return" class="return-url" value="https://tails.boum.org/donate/canceled?v=default"/>
<!-- Note for translators: adapt the value of 'lc' to your language. -->
<input name="lc" type="hidden" value="US"/>
<!-- For recurring donations only. -->
<input type="hidden" name="a3" value="5" id="a3"/>
<input type="hidden" name="t3" value="M" id="t3"/>
<input type="hidden" name="p3" value="1"/>
<input type="hidden" name="src" value="1"/>
<!-- For one-time donation only. -->
<input type="hidden" name="amount" value="5" id="amount"/>
<div id="currency">
<div class="col-md-12 btn-group btn-group-justified" data-toggle="buttons" role="group">
<label class="btn btn-lg btn-primary active" id="currency-dollar">
<input type="radio" id="dollars" autocomplete="off" checked data-complete-text="finished!"/> Dollars
</label>
<label class="btn btn-lg btn-primary" id="currency-euro">
<input type="radio" id="euros" autocomplete="off" checked data-complete-text="finished!"/> Euros
</label>
</div>
</div>
<div id="frequency">
<div class="col-md-12 btn-group btn-group-justified" data-toggle="buttons" role="group">
<label class="btn btn-lg btn-primary" id="one-time">
<input type="radio" autocomplete="off"/> One-time
</label>
<label class="btn btn-lg btn-primary active" id="monthly">
<input type="radio" autocomplete="off"/> Monthly
</label>
<label class="btn btn-lg btn-primary" id="yearly">
<input type="radio" autocomplete="off" checked/> Yearly
</label>
</div>
</div>
<div id="dollar-amounts" class="amounts donate-dollars" data-toggle="buttons" role="group">
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 5 active">
<input type="radio" autocomplete="off" value="5"/>$5
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 10">
<input type="radio" autocomplete="off" value="10"/>$10
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 25">
<input type="radio" autocomplete="off" value="25"/>$25
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 50">
<input type="radio" autocomplete="off" value="50"/>$50
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 100">
<input type="radio" autocomplete="off" value="100"/>$100
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 150">
<input type="radio" autocomplete="off" value="150"/>$150
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 200">
<input type="radio" autocomplete="off" value="200"/>$200
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 other">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" pattern="\d+" class="form-control" id="other-dollar" placeholder="Other"/>
</div>
</label>
</div>
<div id="euro-amounts" class="amounts donate-euros" data-toggle="buttons" role="group">
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 5 active">
<input type="radio" autocomplete="off" value="5"/>5€
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 10">
<input type="radio" autocomplete="off" value="10"/>10€
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 25">
<input type="radio" autocomplete="off" value="25"/>25€
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 50">
<input type="radio" autocomplete="off" value="50"/>50€
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 100">
<input type="radio" autocomplete="off" value="100"/>100€
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 150">
<input type="radio" autocomplete="off" value="150"/>150€
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 200">
<input type="radio" autocomplete="off" value="200"/>200€
</label>
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 other">
<div class="input-group">
<input type="text" pattern="\d+" class="form-control text-right" id="other-euro" placeholder="Other"/>
<span class="input-group-addon"></span>
</div>
</label>
</div>
<div id="donate-paypal-button">
<button class="btn btn-primary btn-lg btn-block col-md-12">Donate</button>
</div>
</form>
<p id="require-paypal">Monthly and yearly donations require
a [[!img paypal-inline.png link="no" class="paypal-inline" alt="PayPal"]]
account.</p>
<p id="dollar-tax" class="tax-deductible donate-dollars">Your donation goes entirely to Tails
and will be handled by RiseupLabs which is a 501(c)(3) non-profit organization
in the USA.<br/><strong>Donations are [[!toggle id="tax-deductible" text="tax-deductible"]] to the full extent
permitted by law.</strong></p>
<p id="euro-tax" class="tax-deductible donate-euros">Your donation goes entirely to Tails
and will be handled by CCT which is a non-profit organization
in Germany.<br/><strong>Donations are [[!toggle id="tax-deductible" text="tax-deductible"]] to the full extent
permitted by law.</strong></p>
[[!toggleable id="tax-deductible" text="""
<p>If you need a donation receipt, ask<br/>
<a href="mailto:tails-accounting@boum.org">tails-accounting@boum.org</a>.</p>
"""]]
</div>
<div id="variant-forced">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<!-- HTML Variables for PayPal Payments Standard:
https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables/ -->
<input type="hidden" name="cmd" value="_xclick-subscriptions" id="cmd"/>
<input type="hidden" name="business" value="tailsriseuplabs@riseup.net" id="business"/>
<input type="hidden" name="currency_code" value="USD" id="currency_code"/>
<input type="hidden" name="item_name" value="Donation to Tails"/>
<input type="hidden" name="custom" value="forced"/>
<input type="hidden" name="no_note" value="1"/>
<!-- Note for translators: adapt the URLs to return to the page in your language. -->
<input type="hidden" name="return" class="return-url" value="https://tails.boum.org/donate/thanks?v=forced"/>
<input type="hidden" name="cancel_return" class="return-url" value="https://tails.boum.org/donate/canceled?v=forced"/>
<!-- Note for translators: adapt the value of 'lc' to your language. --> <!-- Note for translators: adapt the value of 'lc' to your language. -->
<input name="lc" type="hidden" value="US"/> <input name="lc" type="hidden" value="US"/>
...@@ -178,6 +322,8 @@ permitted by law.</strong></p> ...@@ -178,6 +322,8 @@ permitted by law.</strong></p>
</div> </div>
</div>
<div id="paypal-without-js"> <div id="paypal-without-js">
<div id="dollars-without-js"> <div id="dollars-without-js">
......
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// A/B testing
let variant;
if (Math.round(Date.now() / 1000 / 60 / 60 / 5) % 2 == 0) { // divide time since epoch by slots of 5 hours
variant = "default";
document.getElementById("variant-forced").remove();
} else {
variant = "forced";
document.getElementById("variant-default").remove();
}
function hide(elm) { function hide(elm) {
elm.style.display = "none"; elm.style.display = "none";
} }
...@@ -124,17 +134,19 @@ document.addEventListener('DOMContentLoaded', function() { ...@@ -124,17 +134,19 @@ document.addEventListener('DOMContentLoaded', function() {
} }
} }
// Make sure that a frequency is selected if (variant == "forced") {
var frequency = false; // Make sure that a frequency is selected
document.getElementById("donate-paypal-button").onclick = function(e) { var frequency = false;
frequencies = document.getElementsByName("frequency"); document.getElementById("donate-paypal-button").onclick = function(e) {
for (let i = 0; i < frequencies.length; i++) { frequencies = document.getElementsByName("frequency");
if (frequencies[i].checked) frequency = frequencies[i].id; for (let i = 0; i < frequencies.length; i++) {
} if (frequencies[i].checked) frequency = frequencies[i].id;
if (!frequency) { }
e.preventDefault(); if (!frequency) {
console.log(document.getElementById("donate-paypal-button").classList.remove("active")); e.preventDefault();
document.getElementById("frequency-buttons").classList.add("shake"); console.log(document.getElementById("donate-paypal-button").classList.remove("active"));
document.getElementById("frequency-buttons").classList.add("shake");
}
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment