根据awoo的经验很多客户都会遇过投下大把资金买广告但是带来的成效总是不理想，或是网站流量明明表现亮眼但是目标转换率却总是提升不了。这时候我们或许可以从网站易用性测试（usability test）来检查网站是否有设计不良的地方，判断是什么原因导致页面转换率不佳或是网站跳出率太高，而易用性测试除了可以透过访谈、问卷调查、热点图分析方式外，大家最常听到的应该就是A/B Test了。

A/B Test 是什么呢？

A/B Test 是透过让不同的用户进网站页面后看到不同的元素设计(例如：购物车颜色大小、文本的内容说明)，借此来分析那一种元素设计方式较能够达成我们想让用户去完成的行为(例如：购买商品并结帐、填写询问表单)。

我们该怎么运行A/B Test 呢

A/B Test 以前通常要透过工程师从程序端做处理，但这样通常耗时且可能常常需要掏钱买饮料请工程师大大协助(Ｑ.Ｑ)，而仿间也有许多好用的A/B Test 工具（例如：VWO、Optimizely），可是虽然功能强大但通常价格收费不菲，对于小公司小本经营的老板来说是个蛮大的负担。好消息是去年开始Google将原先只有在360付费才能使用的A/B Test工具-Google Optimize开放版本，让中小型网站主可以透过Google Optimize来帮网站做A/B Test (Ya~撒花)。

Google Optimize免费版跟付费版比较

当然免费版的功能没有像付费版那么强大，可以同时进行的实验数目也被限制住了，但对于中小型网站主来说免费版的功能也还算够用，且网站主可以先使用免费版熟悉A/B Test的运行策略及使用方针，等熟悉免费版本后，为网站带来更多的效益时就可以考虑购买功能更加强大的付费版本。

参考文档：

Google Optimize安装教学

那么我们现在开始学习怎么安装Google Optimize吧！！首先我们要先取得Google Optimize的帐户代码。

1. 创建Google Optimize帐户

   Google Optimize工具：

2. 与Google Aytics链接

   创建帐户后会进入到这个页面，建议这时我们先点击右边的”链接资源”与Google Aytics链接。

   

3. 取得Google Optimize代码

   点击取得代码片段后，会看到如下图的步骤说明，我们先把ga(‘require’,’GTM-x’)这段先复制起来。

   

4. 取得降低页面闪烁代码

   最后再把下图代码复制下来，这段代码的用途是为了降低页面闪烁，如果没嵌入这段代码可能会造成用户先看到Ａ设计页面再闪跳成Ｂ设计页面，这样不管用户体验或是Ａ/B Test的效果都可能受到影响。

   

   注意：这段代码必须放置在Google Aytics追踪代码的正前方

   这时候我们需要的代码都已经到手了！！下一步就是安装到网站上去。

Google Optimize的三种安装方式

• 非使用GTM安装的通用Google Analytics追踪代码

如果你的网站的Google Analytics是使用通用GA代码安装的话，而不是透过GTM或是gtag代码的话，建议可以使用这种方法。把之前步骤复制的代码，添加到您的Google Analytics追踪代码，修改后的代码如下所示：

ＰＳGTM-XXXXXX跟UA-XXXXXX记得更改为自己ID

<style>.async-hide { opacity: 0 !important} </style>

<script>(function(a,s,y,n,c,h,i,d,e){s.className+=’ ‘+y;h.start=1*new Date;

h.end=i=function(){s.className=s.className.replace(RegExp(‘ ?’+y),”)};

})(window,document.documentElement,’async-hide’,’dataLayer’,4000,

{‘GTM-XXXXXX’:true});</script>

<script>

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,’script’,’https://www.google-ytics.com/ytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXXXX-X’, ‘auto’);

ga(‘require’, ‘GTM-XXXXXX’);

ga(‘send’, ‘pageview’);

</script>

• 使用gtag追踪代码安装

由于现在新建的Ｇoogle Analytics追踪代码都统一更改为gtag，所以假如你的网站是新架设的或是Ｇoogle Analytics最近才要安装，那么你的Ｇoogle Analytics追踪代码可能会是gtag，就用的方式。

将原先gtag.js的

gtag(‘config’, ‘UA-XXXXXXXX’);

修改为

gtag(‘config’, ‘GA_XXXXXXXX’, { ‘optimize_id’: ‘GTM-XXXXXX’});

最后的代变成如下：

<!– Global Site Tag (gtag.js) – Google Analytics –>

<script async src=”https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID”></script>

<script>

function gtag(){dataLayer.push(arguments)};

gtag(‘js’, new Date());

gtag(‘config’, ‘GA_XXXXXXXX’, { ‘optimize_id’: ‘GTM-XXXXXX’});

</script>

• 网站使用GTM

如果你网站统一都使用GTM来管理代码的话，GTM有内置的Google Optimize安装代码。

但是如果直接使用GTM安装可能造成网站性能变差，因为网站在读取页面时需要先读取GTM的代码然后再透过GTM启动Google Optiomize，所以可能会导致网站的延迟时间延长而影响用户体验，除非在无法修改网站原代码只能使用GTM的情况下才会建议这样安装。

所以如果不想使用GTM管理Google Optimize代码影响性能的话，建议改用第一种的通用GA追踪码安装，但是需要将代码中的ga(‘send’, ‘pageview’);移除，避免跟GTM安装的Google Analytics重复发送。

<script>

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,’script’,’https://www.google-ytics.com/ytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXXXX-X’, ‘auto’);

ga(‘require’, ‘GTM-XXXXXX’);

ga(‘send’, ‘pageview’);

</script>

然后同样在ＧＡ追踪码的上方加入降低闪烁的代码，就可以了。

以上三种安装方式并不会影响Ａ/B Test的实验效果，可以任意选择适合你们网站的方式安装，安装完成后就可以开始创建实验哦(呦屋～～)。

后续我们会再撰写Google Optimize实验设置哦明教学。

喜欢这篇文章的话请帮我们点个赞并订阅awoo电子报 ，持续关注后续文章哦。