Skip to content
GitLab
Commit 52a2d90a authored by sajolida's avatar sajolida
Browse files

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

parent 545d36eb
Hide whitespace changes
Inline Side-by-side
wiki/src/donate.css
View file @ 52a2d90a
......@@ -42,6 +42,18 @@
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 */
#currency .col-md-12 {
......
wiki/src/donate.html
View file @ 52a2d90a
......@@ -46,6 +46,8 @@
<div id="paypal-with-js">
<div id="variant-default">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<!-- HTML Variables for PayPal Payments Standard:
......@@ -54,11 +56,153 @@
<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="default"/>
<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"/>
<input type="hidden" name="cancel_return" class="return-url" value="https://tails.boum.org/donate/canceled"/>
<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?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. -->
<input name="lc" type="hidden" value="US"/>
......@@ -178,6 +322,8 @@ permitted by law.</strong></p>
</div>
</div>
<div id="paypal-without-js">
<div id="dollars-without-js">
......
wiki/src/donate.js
View file @ 52a2d90a
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) {
elm.style.display = "none";
}
......@@ -124,17 +134,19 @@ document.addEventListener('DOMContentLoaded', function() {
}
}
// Make sure that a frequency is selected
var frequency = false;
document.getElementById("donate-paypal-button").onclick = function(e) {
frequencies = document.getElementsByName("frequency");
for (let i = 0; i < frequencies.length; i++) {
if (frequencies[i].checked) frequency = frequencies[i].id;
}
if (!frequency) {
e.preventDefault();
console.log(document.getElementById("donate-paypal-button").classList.remove("active"));
document.getElementById("frequency-buttons").classList.add("shake");
if (variant == "forced") {
// Make sure that a frequency is selected
var frequency = false;
document.getElementById("donate-paypal-button").onclick = function(e) {
frequencies = document.getElementsByName("frequency");
for (let i = 0; i < frequencies.length; i++) {
if (frequencies[i].checked) frequency = frequencies[i].id;
}
if (!frequency) {
e.preventDefault();
console.log(document.getElementById("donate-paypal-button").classList.remove("active"));
document.getElementById("frequency-buttons").classList.add("shake");
}
}
}
......
Supports Markdown
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