更改 Google AdSense 廣告程式碼進行 A/B 測試（A/B Testing）

這裡介紹如何更改 AdSense 廣告程式碼進行 A/B 測試，增加網站的廣告效益。

A/B 測試是網站在做最佳化時常用的手法，尤其是在調整廣告的擺放方式時，非常有用。舉個例子來說，假設你想在網站首頁上放置一個 Google AdSense 廣告，而一般的廣告有好多種形式，例如圖形的廣告與文字的廣告，而文字的廣告又可以自由選擇配色，到底該選擇哪一種廣告樣式才會有比較好的效益是個很複雜的問題。

最簡單的方式就是實際進行測試，通常為了讓測試過程可以單純一些，我們會拿兩種只差一點點的廣告來比較，例如不同顏色但是相同大小的廣告，將這兩個廣告「同時」放在網頁上的同一個位置來比較。

所謂同時放置兩種廣告的意思是將網站的瀏覽者隨機分為兩群，分別給它們不同的兩種廣告，這樣就可以同時測試兩種廣告的效益差異。

至於為什麼要使用同時放置兩種廣告的方式，而不要將兩種廣告分開測試呢？例如一種廣告測一個月不行嗎？原因很簡單，如果在不同的時間測試不同的廣告，造成兩種廣告的差異很可能會來自時間不同的因素，例如一個廣告在測試時剛好碰到耶誕節，另一個又碰到過年，這樣很難判定差異是什麼因素造成的，所以在測試時，要盡可能將所有可能變因減少，才能比較精確測試出廣告不同所帶來的差異。

經過這樣的測試之後，就可以觀察這兩個廣告哪一個效益比較好，最後當然就可以選擇比較好的那種廣告來使用，或是進行下一個 A/B 測試，所以經由這樣的流程，你就可以不斷的調整廣告配置，讓整個網站的效益達到最大，這就是 A/B 測試基本的概念。

在 Google AdSense 的政策中，擅自修改 AdSense 廣告程式碼是違規的行為，但是有一些例外，在 Google AdSense 的官方網站中列出一些可以修改狀況，當然 A/B 測試就是其中一種。

若要比較兩個相同大小的 AdSense 廣告，首先從 AdSense 的網頁上將兩個廣告的程式碼都複製下來，兩個原始的 AdSense 程式碼大概會像這樣：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- G.T.Wang 側邊欄300x250（A） -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-7794009487786811"
     data-ad-slot="8257292931"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- G.T.Wang 側邊欄300x250（B） -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-7794009487786811"
     data-ad-slot="2048425736"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

而 Google AdSense 官方所提供的範本是這樣：

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-publisher-id">
</ins>
<script>
    if (Math.random() < .5) {
      mySlotId = '1234567890';
    } else {
      mySlotId = '2345678901';
    }
    (adsbygoogle = window.adsbygoogle || []).push({
      params: { google_ad_slot: mySlotId }
    });
</script>

其中有顏色的部分就是需要自己修改的部分，首先是 style 與 data-ad-client 屬性，這個就直接參考自己的廣告程式碼，兩個大小相同的廣告程式碼在這個部分應該都是一樣的，直接複製過來就可以了。

接著在 if 判斷式中會有兩個 mySlotId 要指定，請分別把兩個廣告的 data-ad-slot 編號複製過來，取代掉這裡的編號。

經過修改之後，就會變成下面這樣：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-7794009487786811">
</ins>
<script>
    if (Math.random() < .5) {
      mySlotId = '8257292931';
    } else {
      mySlotId = '2048425736';
    }
    (adsbygoogle = window.adsbygoogle || []).push({
      params: { google_ad_slot: mySlotId }
    });
</script>

接著把這段程式碼貼在想要放置廣告的位置上，之後所有的訪客在瀏覽時，就會執行這段簡單的 JavaScript 程式，產生一個介於 0 與 1 之間的隨機變數（Math.random()），如果這個隨機變數小於 0.5 就會顯示第一個廣告，若大於 0.5，就會顯示另外一個，這樣自然就會把所有的訪客分為兩群進行測試了。

如果不想自己手動修改這些 JavaScript 程式碼，可以使用 Google AdSense 廣告 A/B 測試程式碼產生工具來自動產生這裡所需要的 JavaScript 程式碼，這樣就可以不用花時間看這裡的一堆說明了。

參考資料：Google AdSense

更改 Google AdSense 廣告程式碼進行 A/B 測試（A/B Testing）

沒有留言:

張貼留言

熱門文章