回應式廣告單元，百變適應PC/手機環境！

如同Javascrip/JSON讓HTML/CSS架構用更精簡的方式，達成更多互動與資料處理，Google Publisher Tag(GPT)也能透過單元代碼客製化，提高廣告的適應性。

// 先參考GPT說明

Ok! 最常見客製化，是回應式(responsive tag)代碼，協助媒體在PC/手機環境，相對應的位置只要塞一個代碼。

// 前提是，媒體的網站架構，或至少該位置，在手機與PC環境要有一個相對應的<div></div>。即合乎回應式網站，又稱RWD(Responsive Web Design)的設計。

(回應式單元在不同螢幕尺寸環境，呈現不同尺寸廣告。出處)

方法如下：

1. 使用GPT Library的!googletag.SizeMappingBuilder

架構：
googletag.sizeMapping()
..
.addSize
..
defineSizeMapping

範例：

HEAD Tag

<!-- Start GPT Async Tag -->
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var gptadslots = [];
  var googletag = googletag || {cmd:[]};
</script>
<script>
  googletag.cmd.push(function() {
    var mapping1 = googletag.sizeMapping()
                            .addSize([1024, 0], [[728, 90], [970, 90], [1, 1]])
                            .addSize([0, 0], [[320, 50], [1, 1]])
                            .build();

    //Adslot declaration
    gptadslots.push(googletag.defineSlot('/0000000/exampleBanner', [[728,90]], 'div-gpt-ad-0000000-1')
                             .defineSizeMapping(mapping1)
                             .addService(googletag.pubads()));

    googletag.enableServices();
  });
</script>
<!-- End GPT Async Tag -->

BODY Tags

<!-- Async AdSlot for Ad unit 'exampleBanner' ### Size: [[728,90]] -->
<!-- Adslot's refresh function: googletag.pubads().refresh([gptadslots[0]]) -->
<div id='div-gpt-ad-0000000-1'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-0000000-1'); });
  </script>
</div>
<!-- End AdSlot 1 ->

2.

.addSize([1024, 0], [[728, 90], [970, 90], [1, 1]])
# 當螢幕寬度達1024 pixel，要出現[728, 90], [970, 90], [1, 1]尺寸

.addSize([0, 0], [[320, 50], [1, 1]])
# 當螢幕寬度介於0 -  1024 pixel，則出現[0, 0], [[320, 50], [1, 1]尺寸


3.

回到委刊設定，把單元的尺寸全部選取，就開始播放回應是廣告了！

4.

以上，立馬製作一個回應式單元吧！

#回應式廣告單元 #GPT #RWD