【範例】教你實現「帶關閉鈕置底浮動Google廣告」，使用css+javascript
最近想試試看置底比較不會遮到畫面的廣告，網路上查了不少範例，有用css/jquery各種寫法，找到了一種較簡單的片段，也更容易移植到所有文章。
根據Google Ads的規範，似乎都不允許遮畫面影響瀏覽體驗的浮動廣告了，因此使用這種做法是有被Google Ads檔掉的可能性唷，請慎用。
|
整合步驟目錄
|
１ 浮動視窗程式碼片段
程式碼片段相當簡單，只利用到了標準ｃｓｓ固定位置的技巧，加上排版給一個關閉的按鈕。
<!-- 靠右下範例 -->
<div id="left_bottom_AD" style="position:fixed; bottom:50px; right:0px;z-index: 99999999999;"> <table border="0" cellpadding="0" cellspacing="1"> <tr><td style="text-align: right;"> <a href="javascript:;" onclick="javascript:document.getElementById('left_bottom_AD').style.display='none';">關閉</a> </td></tr> <tr><td> <!-- Google 廣告保留區段 --> </td></tr> </table></div>
position:fixed; → 用途為固定位置
bottom:50px; → 用途為靠底部往上50px高的位置，若要置頂可以改為top:0px，置底為bottom:0px;
right:0px; →用途為靠右0px的位置(意思是沿著右緣)，若要靠左可以改為left:0px;
z-index: 99999999999; → 重要，z軸為各畫面的垂直排序，99999999用途為設為最上層，蓋過所有網頁元件
範例效果的部份，可以參考此網頁電腦版右下角的廣告唷
<!-- 水平置中靠底部範例 -->
<div id="left_bottom_AD" style="bottom: 5px; height: 120px; left: 50%; margin-left: -150px; position: fixed; width: 300px; z-index: 2147483647;"> <table border="0" cellpadding="0" cellspacing="1"> <tr><td style="text-align: right;"> <a href="javascript:;" onclick="javascript:document.getElementById('left_bottom_AD').style.display='none';">關閉</a> </td></tr> <tr><td> <!-- Google 廣告保留區段 --> </td></tr> </table></div>
主要技巧是要給他寬度(範例為300px)，並設定左緣置中left:50%後，再退回寬度的一半margin-left:-150px
範例效果的部分，如此網頁手機版下方廣告
２挑選Ｇｏｏｇｌｅ ＡｄＳｅｎｓｅ Ｓｃｒｉｐｔ
經過測試，這種寫法因為沒有固定的寬高，因此不適合使用Ｇｏｏｇｌｅ響應式的廣告，比較適合能夠指定寬高的廣告。
底下分享一下，如何從Google AdSense創建一個固定大小的廣告單元。
你是使用其他廣告聯盟的廣告，通常都是有固定大小的，可以直接拿來使用。
步驟一：從Ｇｏｏｇｌｅ ＡｄＳｅｎｓｅ建立一個多媒體廣告
比較推薦用多媒體廣告，廣告效果比較吸睛，似乎也有比較好的廣告費。
步驟二：設定固定大小廣告
進來後，右方廣告大小預設為「回應式廣告」，請改為「固定」
大小的部份，若非完全置底或置頂，建議寬度不要超過３００，可能會遮住蠻大篇幅，高度不分建議１２０或再大一些些。【Google不支援特定大小】
另外，如果遮過太大畫面，可能會導致Google Ads判斷嚴重影響體驗，最嚴重可能會暫停支付廣告費用。
步驟三：複製程式碼
建立後，程式碼就出現啦，把這段複製起來貼到上面「Google廣告保留區段」吧
比較特別要提的是，未來若要調整大小，不需要再回來網頁改，直接修改script內的這個設定即可。
style="display:inline-block;width:300px;height:120px"
補充：廣告程式碼設定
設定好後，新增的Ｇｏｏｇｌｅ廣告會顯示在列表中。
未來也可以針對這個浮動廣告查看他的廣告效果。
３注意事項
蓋版浮動廣告主要是要注意是否有違反Google 2019 年 7 月 9 日發布的規範，大家可以參考一下以下相關文章介紹，避免自己收不到廣告費。
如果被Google審查違反規定，會寄出通知並限期30天內改正，若你是第一次嘗試這種廣告，建議設定好你要的大小後，放個幾個禮拜觀察是否會收到警告信。
Google 蓋版廣告介紹影片：https://youtu.be/VrVuryo39Zc
Coalition for Better Ads 標準：https://www.betterads.org/standards/
參考Google新規範介紹文章：【design-hu介紹】
1. 桌上型電腦
- Pop-up Ads：彈跳式計時廣告
- Auto-playing Video Ads with Sound：影片自動播放且聲音未關閉
- Prestitial Ads with Countdown：預先載入廣告，計時完畢才能關閉
- Large Sticky Ads：遮擋內容 30% 以上且無法主動關閉的大型固定式廣告
2. 行動版裝置
- Pop-up Ads：彈跳式計時廣告，畫面滑動到特定區域將跳出阻擋網頁內容
- Prestitial Ads：在網頁內容加載前強制畫面跳轉至廣告頁面
- Ad Density Higher Than 30%：佔據行動裝置畫面 30% 以上高度
- Flashing Animated Ads：快速閃爍的文字或背景顏色
- Auto-playing Video Ads with Sound：自動播放影片及音訊
- Postitial Ads with Countdown：點擊連結後重新導向至廣告頁面，在計時後再次點擊才能到達連結頁面
- Full-screen Scrollover Ad：強制使用者必須滑動才能隱藏的全螢幕廣告
- Large Sticky Ads：大量固定式廣告遮擋網站內容區域 30% 以上
