奥巴马筹款网站的制作过程

作者: 阮一峰

日期: 2012年12月14日

1.

Kyle Rush是一个网站工程师。

2011年6月,他加入BarackObama.com,负责设计2012美国大选的奥巴马官网。

(图为2011年6月的奥巴马官网)

除了宣传,官网的主要目的就是筹款。

上一次大选,奥巴马筹到了6.9亿美元。这是一个很大的数字,但由于过去4年美国经济一直没有起色,本次大选势必要投入更多的资金,团队内部估计资金需求将达到创纪录的10亿美元。

一个筹集10亿美元的网站,历史上从来没有过。Kyle Rush不知道自己能否做到,但是他很清楚,如果筹不到钱,奥巴马没法赢得大选。

2.

2012年美国大选现在已经结束了,奥巴马有惊无险地击败了罗姆尼。他最终筹到了11亿美元,成为历史上筹款金额最高(也是花钱最多)的总统候选人。(排在第二位的就是罗姆尼,他也筹到了10亿美元。)

这11亿美元之中,线下筹集了4.1亿,线上筹集了6.9亿。单单BarackObama.com一个网站,就创造了2.5亿美元的捐款。

在6个月的时间里,BarackObama.com共有

  * 17,807,917个访问者,81,548,259次页面访问

  * 4,276,463次捐款

  * 捐款转化率24%(每四个访问者,就有一人会捐款)

这样辉煌的成绩,是如何取得的?

3.

制作一个超大流量的、体验良好的、能够说服人们捐款、并能安全快速处理这些捐款的网站、绝非易事。

最近,Kyle Rush写了一篇文章,披露了许多内幕,从技术角度总结了BarackObama.com的制作心得。下面,我们就来看看奥巴马的技术团队是怎么做到的。

(图为2012年5月的奥巴马官网)

网站的制作班子,从2011年下半开始组建,Kyle Rush是第一个加入的前端工程师,负责网页的外观和用户体验。

一开始,网站放在团队自购的服务器上,运行和捐款都还算平稳。但是,随着竞争不断加剧,局势变得令人担忧了。到了2012年5月,罗姆尼当月的筹款金额第一次超过了奥巴马。

竞选总部决定,网站必须改版,尽一切可能争取捐款。于是,技术团队开始大规模的扩充,全职的前端工程师从1个人扩充到了14个人,其中6人专门负责制作筹款页面。

4.

技术团队做出的第一个决定是,使用静态网站生成器Jekyll,用静态网页取代动态网页,加快网页打开速度。网站的打开应该越快越好。有研究称,打开速度每慢100毫秒,Amazon的销售额就下降1%。

第二个决定是,将全部网页放上CDN,使用的服务商是Akamai。它是世界最大的CDN供应商,共部署了50000多台服务器,美国各地都能获得理想的访问速度。奥巴马芝加哥竞选总部,可以在20毫秒内载入官网的HTML网页。

第三个决定是,将捐款的后台做成API调用。这是因为有23%的访问者使用移动设备,所以必须部署多个前端(Web端和移动端)。使用API,可以让不同前端以相同方式与后台通信,彼此之间用JSON格式传递信息。

第四个决定是,后台用PHP语言开发,放在Amazon的EC2平台上。

第五个决定是,为了避免宕机,开发两个后台。一旦一个系统停止工作,立刻自动切换到另一个。这点很重要,因为宕机不仅影响士气,而且经济损失巨大。因为捐款每分钟都在涌入,最高记录是一小时300万美元,你不能让它停下来。

5.

新网站初步完成后,使用webpagetest.org进行测试,结果令人鼓舞。

原版页面4秒钟后还没载入,新版只用1秒就可以看到。整个平台的访问速度上升了60%,捐款转化率增加了14%。

接下来,就是微调页面的各种细节,一共进行了240次a/b测试,也就是说,至少迭代了240个版本。

调整后的页面,视觉效果和用户体验都有了巨大的提升(点击看大图),捐款转化率因此又提高了49%。。

随着奥巴马的当选,BarackObama.com共进行了1101次前端部署。

6.

事实证明,整个开发方案非常成功,顺利完成筹款任务,没有一分钟宕机。

Kyle Rush感到有必要总结,留下记录。除了上面的开发过程,他还提到前端团队使用的工具:版本控制Github ,a/b测试管理Optimizely,代码编译CodeKit

Kyle Rush最后总结说:

"我百分之百肯定,这是我经历过的最好的开发环境。我们不断调整,捐款转化率的提高令人难以置信。整个团队感到无比满足。但是,最高兴的还是看到,2013年1月21日巴拉克·奥巴马依然是美国总统!"

(完)

珠峰培训

简寻

留言(35条)

有一点疑问,捐款转化率的提升,完全是由于前端的改进和用户体验的增强而实现的吗?

震撼。想到了当年抗战时期打通印缅公路,筹款对于一项事业来说就是打通构思和实现之间的道路。按比例来看,有意愿有能力支持原创者的网志读者是很可观的,可是创作者和读者之间的联系被诸多因素给挡得死死的,例如:
1、支付宝的最低2元手续费和Paypal的“5%+$0.05”手续费。
2、操作过程的用户体验恶劣;
3、对公益募捐的提倡和支持不够;等等
前两个瓶颈使用比特币支付可以很好地解决,例如,比特币交易的手续费不到0.5元,支付和收款操作过程非常便利,这段时间在下正在研究第三个问题。

能公布捐款明细吗?
难道这些捐款是1美元/人这样捐的吗,也许就是几个财阀在捐款吧,没啥流量拥挤的。
考虑到手持设备等的访问,界面做的挺简洁的,这似乎是趋势

『版本控制用 Github』这个说法不对啊,应该是版本控制用Git ,代码托管用 Github

引用Raly的发言:

有一点疑问,捐款转化率的提升,完全是由于前端的改进和用户体验的增强而实现的吗?

可以去搜索一下 a/b 测试,足够说明问题。

引用Henry的发言:

能公布捐款明细吗?
难道这些捐款是1美元/人这样捐的吗,也许就是几个财阀在捐款吧,没啥流量拥挤的。
考虑到手持设备等的访问,界面做的挺简洁的,这似乎是趋势

420万个人选民捐款金额较小,他们的捐款在奥巴马筹款总额中所占比例超过55% http://news.xinhuanet.com/world/2012-11/07/c_123922186.htm
引用Hungyuhei的发言:

『版本控制用 Github』这个说法不对啊,应该是版本控制用Git ,代码托管用 Github

吹毛求疵没意义,而且原文也没有歧义。

这是不是意味着我们这些程序员也开始影响世界格局了!

非常好的经验分享,有很多实用的东西,谢谢一峰

点了一下页面上的广告,以表支持。

引用奔放的胸毛。的发言:

点了一下页面上的广告,以表支持。

我也点了,支持一下!

引用firefly的发言:

我也点了,支持一下!

我其实也点了下

罗姆尼也有这样的人啊,要不然他不会筹到 10 亿美金,所以奥巴马取胜并不是因为他多筹款了 1 亿美金。

自己开发API,怎么开发呢? 文中的“API调用”,是?

阮一峰你什么意思删我留言

引用HBBZ的发言:

按比例来看,有意愿有能力支持原创者的网志读者是很可观的,可是创作者和读者之间的联系被诸多因素给挡得死死的。

有个什么微支付的概念。

这文章挺好的,谢谢。
刚才试着支付一块钱支持这个文章,不过对我这样极少使用支付宝的人来说,挺折磨的,还要插证书。

我突然想起12306
这么大的流量,这么严肃的气息
然后我又想起usa点gov和gov点cn给人的感觉

看到上面有几条留言,感觉像看到了一个曾经的自己:找不到重点。

我还以为是分析捐钱的动机

我觉得只列出奥巴马的网站,然后说做的多好,然后就说是因为网站改版,而多筹了多少钱,可能不太有说服力。

如果能同时列出罗姆尼和奥巴马两个人的网站,然后比较后发现奥巴马的网站确实比罗姆尼的好,那才有说服力。

比如用pagespeed 或者就用文章里说的 webpagetest.org,把两个网站的速度等各方面性能做个比较,应该很有意思。

还有,作者Kyle Rush是很厉害,但网站改进,另一个更大的原因可能是人员的增加。多少投入才能有多少产出。

这应该给老板们看一下,网站要改进的话,人员必不可少。引用原文“全职的前端工程师从1个人扩充到了14个人,其中6人专门负责制作筹款页面”

首先感谢作者分享这么好的案例,更感谢原作者分享这么好的案例。
其次想说一下,有几个脑残的回复,作者不要在意,有些人的逻辑有问题,说话颠三倒四的,不关心主题,尽关心一些毛!
不好意思,发了一些牢骚!

写的很好,支持你的文章。

CDN,PHP,JSON API小版本部署。如果再详细一点就好了

还有静态化

静态化,分布式,JSON,PHP,现在网站不都是这样吗,没有吸引人的地方

还是的需要静态化,

引用Raly的发言:

有一点疑问,捐款转化率的提升,完全是由于前端的改进和用户体验的增强而实现的吗?

不完全是吧,主要还是有忠实的用户,奥巴马的支持者,再加上好的性能和体验,所以转化率的是就有保障了。

支持阮兄~~10元笑纳~~

第二遍看了,非常好的经验分享,特别对于我这样没有过大项目经验的人。

更正一下吧,原文提到的捐款转化率是提升了49%的,比14%可给力多了

非常震撼的文章,是前端体验的经验,非常值得思考!!

可惜了,看到太晚了!不过,非常受用!

引用lijsh的发言:

更正一下吧,原文提到的捐款转化率是提升了49%的,比14%可给力多了

一开始是14%, 后来提升了14%,就是14% x (100% + 14%) = 15.96%,
之后再提升了49%,就是 15.96 x (100% + 49%) = 23.7804%。

不是提升到49%。

后台为啥用PHP呢?这点我不明白。

奥巴马看来喜欢当总统多过让米国人民享受医疗服务。

参看obamacare网站的烂样子。

当然一个用来收钱,一个用来换钱,花的心思不一样很正常了。

好意思的故事,请教你是如何理清这个故事脉络的呢?

引用Henry的发言:

能公布捐款明细吗?
难道这些捐款是1美元/人这样捐的吗,也许就是几个财阀在捐款吧,没啥流量拥挤的。
考虑到手持设备等的访问,界面做的挺简洁的,这似乎是趋势

* 17,807,917个访问者,81,548,259次页面访问
  * 4,276,463次捐款
  * 捐款转化率24%(每四个访问者,就有一人会捐款)

2.5亿 4276463次捐款,平均每次58美元。美国人做慈善也是这样,每人一点,不像我们是财阀在做。

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接