自適應網站安裝 AdSense 回應式廣告,三分鐘搞定!

早前介紹『Blogger 放置 Google AdSense 自訂廣告尺寸大小』時,發現 AdSense 有新的廣告在做推播,若是自訂尺寸以「寬 640 高 300」當作矩形廣告基底的話,廣告高度則會以「300」當作高的固定值,寬度則會以「640 ~ 300」間隨機推送。

觀察目前推送的廣告尺寸類型有「640x300」、「640x165」、「435x300」、「360x300」、「336x280」、「300x250」這幾種混合了文字與多媒體類型的廣告,而這幾天在整理網站版型時,心想以上隨機尺寸若是應用在響應式網頁 ( 自適應網站 ) 中,不知道是否可行。

結果測試過後頗為滿意,AdSense 回應式廣告現在已經相當聰明,將高固定於「300」時直接把寬設置為「100%」的情形下,廣告則會依裝置螢幕的寬度,自動填滿設定範圍內的整個區塊 (* 寬 360 以上的螢幕,滿版廣告較少,目前觀察還是隨機推送較多。),免去了在「CSS @media」內調來調去的麻煩。

自適應網站安裝 AdSense 回應式廣告,三分鐘搞定!_001


以下就以高「300」寬「100%」當作廣告範圍值做為示例,若在你的響應式網頁中需使用「CSS3 Media Queries」的設置方式,可以參考『Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告』。



相關連結

Google AdSense「https://www.google.com/adsense/start/

AdSense 「廣告政策



設置流程

  1. 網站中放入廣告代碼
  2. 無法調整網站 CSS
  3. 使用 Blogger 或 Xml 網站

設定教學

Step 1

網站中放入廣告代碼

在網站或部落格平台的廣告位置放入下列廣告代碼,並將「ad-client、ad-slot」相關發佈商號碼做更換。width 為廣告寬度、height 為廣告高度。


<div class="ads">
<ins class="adsbygoogle"
     style="display:inline-block;width:100%;height:300px;"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>



Step1-1. 在網頁的 CSS 中放入置中代碼

接著可以幫廣告做置中的動作!前往網站的 CSS 區塊放置以下 CSS 代碼,width 寬度「100%」、height 高度「自動 auto」,為了使文字不要太靠近廣告 margin 邊界「上 10px、下 10px、左右都為 0」,position 元素位置「relative 相對」,text-align「center 水平置中對齊」。


.ads {width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;}



接著在『</body>』之前放入下列 Adsense 異步腳本 js,就完成設定了。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>



Step 2

無法調整網站 CSS,使用以下代碼

若你的網站無法自由調整 CSS,可以試著使用下面的代碼並放置於網站的 HTML 或 廣告容器中,然後將「ad-client、ad-slot」相關發佈商號碼做更換。


<div class="ads" style="width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;">
<ins class="adsbygoogle"
     style="display:inline-block;width:100%;height:300px;"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>



接著在『</body>』之前添加下列 Adsense 異步腳本 js,就完成設定了。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>



Step 3

使用 Blogger 或 Xml 網站

如果你是使用 Xml 網頁,或是需在 Blogger 範本中放置廣告,可以使用用以下代碼,並將「ad-client、ad-slot」相關發佈商號碼做更換。


<div class='ads' style='width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;'>
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:100%;height:300px;&quot;
     data-ad-client=&quot;ca-pub-123456789&quot;
     data-ad-slot=&quot;123456789&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;
</div>



接著在『</body>』之前放入下列 Adsense 異步腳本 js,就完成設定了。

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/>



以上,祝愉快:)



相關文章

Blogger 放置 Google AdSense 自訂廣告尺寸大小

Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告

Blogger 繼續閱讀隱藏廣告和物件

[教學] Blogger 文章中任意位置加入Google AdSense 廣告


留言

  1. 你好,先謝謝你回復前一個我的留言,目前還在摸索當中。
    首先也就先摸索【問題1】中的廣告剩下1/2的狀況。

    經由你的回應來到了這個教學頁面,首先我做的就是在版型中的GOOGLEAD HTML內更改了

    style="display:inline-block;width:100%;height:300px;"

    這部分的確成功改變了廣告的大小。

    不過不知道是不是在改變的過程中有修改到了其他的語法,

    現在我的電腦版文章頁面裡的GOOGLE AD只剩下 POST TOP跟 BOTTOM 的兩個廣告,

    而側邊欄位的MIDDLE廣告卻消失@@

    文章範例 https://201605-test2.blogspot.com/2016/05/blog-post_8.html

    這個問題也麻煩你提供點意見了:) 謝謝

    回覆刪除
    回覆
    1. 側邊欄 MIDDLE 廣告位置是在文章分類的下方嗎!

      刪除
    2. 如果是在「文章分類」下方的那個 [HTML/JavaScript 小工具],應該是「HTML6」;需要在 Blogger 後台的「版面配置」分頁,進入「HTML6」小工具做代碼的修改。

      ☆須留意,「ad-slot」的流水號不能在同一網頁頁面重疊到,也就是說只能放置一個「ad-slot」

      刪除
  2. 哈囉 coke ,最近google取消了廣告數量的限制,所以我就手動在文章加入了廣告代碼。

    不過會發現到,原本coke幫我設計在延伸閱讀下的廣告會因此消失。

    除了下面的方法之外,不知道有沒有辦法解決呢?

    目前已知取消掉"手動廣告代碼"就會恢復正常~

    PS:我是使用以前就建立好的互動式廣告的代碼~

    再麻煩你了~謝謝^^

    回覆刪除
  3. 補充,

    像是這一篇
    http://www.wanghenry.com/2016/08/Japan-Korea-Game-APK-Download.html

    我手動在文章的html內加入代碼3個,也就是原本的3個+手動3個應該會有6個,但延伸閱讀下面的那一個卻無法顯示,變成一個空格在那(廣告有在那裏但無法顯示)!

    謝謝

    回覆刪除
    回覆
    1. 已經忘了是怎麼裝的了 @@

      可以先檢查廣告的 ad-slot 在同一頁面中,是否有重複到!

      沒辦法解決的話,可以再傳到 Gdrive 開共用,可能晚上或明天有時間的話幫你弄。

      刪除
    2. 嗨,Coke~

      ad-slot 應該是一個廣告只會有一個代碼? 是嗎。

      我有償試過新增加一段廣告然後手動放進去單篇文章!

      但依舊會有上述的症狀~(延伸閱讀下的廣告會不見,只有電腦版會這樣、手機版正常)

      PS:目前還沒有上傳範本到共用

      刪除
    3. 嗨!

      收到你的表單 mail 了,應該這兩天會幫你看,沒時間的話,星期六晚上應該可以處理!

      刪除
    4. 謝謝coke~ 不過我還沒有上傳範本@@ 想說先留email給你,麻煩你回傳告知你的email之後我再把範本傳給你~

      跟上次比較之下,我忘記了文章內的分享連結(我目前已經放入的)是不是在上次coke幫忙之後的事情了@@,所以如果有需要的話還是再給你一次比較好:)

      謝謝你~

      刪除
    5. 是 slot="5806611290" 這個沒辦法顯示嗎?

      刪除
    6. 對! 剛剛看了CODE,這個是內文的middle ,就是延伸閱讀之後的~

      刪除
    7. 找到原因了,是 jquery 3.1.1 版本不支援舊的寫法,改成以下 2.2.4 版即可使用。

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>

      如果改成 2.2.4 版不能使用你原本站內的其他小工具;建議,可以使用「[教學] BLOGGER 文章中任意位置加入GOOGLE ADSENSE 廣告」的方法來幫網站安裝廣告。

      上面連結的設定,在安裝完代碼後,於每篇文章中想加入廣告的地方切換 html 模式後,放入『<!-- adsense -->』這段代碼,即可顯示廣告。如果以後想換 WordPress 平台,這段代碼在文章匯出及匯入時,也不會受影響。(*因為被注釋掉了。)

      這樣的設置方式,就跟自己在文章中放入廣告一樣。不過方便的是,只要在想放入廣告的地方加入『<!-- adsense -->』這段代碼即可。

      刪除
    8. 找到原因了,看下面留言的說明。

      刪除
    9. HI COKE~

      剛剛放了你貼上的CODE之後,其他網頁都OK了~

      但是像這篇文章因為手動放入廣告代碼在文章內,且手動插入3個的樣子,就依然會有之前的症狀。

      http://www.wanghenry.com/2016/08/Japan-Korea-Game-APK-Download.html

      http://www.wanghenry.com/2016/11/New-Line-Vpn-Japan-Sticker.html

      (這兩篇都是手動插入)

      其他篇文章也是手動插入google ad 的code,也是會有同樣狀況:在延伸閱讀下的那一個位置的廣告會消失。

      但TOP、BOTTOM的都還在,同時手插入的廣告也在~

      刪除
    10. 我剛試過,沒問題說!我放另外放入了好幾個廣告!
      這裡

      刪除
    11. 知道原因了,你另外手動安裝的廣告代碼中,不要下入下列『adsbygoogle.js』,把『adsbygoogle.js』放在範本『</body>』之前。(*整個網頁抓一次程式即可。)

      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

      刪除
    12. 鍵盤 " u " 鍵快壞了,一直打錯字 -_- "

      刪除
    13. 剛剛搞了好久的路由器,他(路由器)..感覺還是壞了XD

      回到正題。

      CODE裡面是不是應該填入這個

      【script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/


      因為回應留言的那一串CODE不能放在/BODY前面@@ 會顯示錯誤!

      刪除
    14. OH YA 報告一下,我把CODE用我上面回復的那一段就成功囉!

      謝謝COKE花時間幫忙我除錯!! 太感謝了~~

      另外再補問一個廣告相關的問題,

      就是COKE有推薦我去看隨意放廣告的那篇文章,文章中的用法如果設定好了以後,那我現在文章內插入完整的廣告語法有需要改成精簡版的嘛?

      還是放著也沒關係?

      (還是說一篇文章內的語法越少越好/讀取越快?)

      謝謝~

      PS:剛剛不好意思在你連續回覆我的時候沒有及時回應給你,當時卡在ASUS N16這台路由器上..ㄟ氣死XD (雖然也有可能是我的問題!哈哈)

      刪除
    15. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

      這段程式,在『</body>』之前放入,整個網站宣告一次即可,多放無益。

      刪除
    16. 不是的,我有了解你說的意思,一次就夠了!

      只是我只能放這樣

      https://imgur.com/a/XYouv.jpg

      有script開頭,正常都像你寫的一樣有 /script結尾,不過我放入結尾的時候就會出現錯誤,所以我沒有放入結尾

      這樣系統才給我存檔,哈

      刪除
    17. 一般,大部份的人會放在「</body>」上方;我在放入時,則是選擇放置在「<body>」之前做宣告。

      在抓『技研可樂』的整體網站讀取速度時,我反覆的做測試,發現,放在「<body>」之前,對『技研可樂』的網頁載入時間是較為適宜的 (*首頁圖片多),所以,我將代碼放置在「<body>」的上面。有時候要看情況做調整。


      下面是我放置的代碼,可以試試,範本應該可以存。
      <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/>

      刪除
  4. 我後來發現問題是在本篇文章最後提到的CODE,跟前面回復時提到的CODE有差異,差異在回覆的時候多了一個 /script 做結尾,所以儲存時就會出現異常,所以我就直接把 /script刪除即可。

    另外

    最新回應中的CODE多了【type='text/javascript'】,跟教學文章內的比較之下少了這一段,不知道有沒有差異?

    同時,這一段語法,應該也是在整個範本中只需要有一段就好了,對嘛? (重複貼2~3個也是沒必要的?)

    回覆刪除
    回覆
    1. 我後來發現問題是在本篇文章最後提到的CODE,跟前面回復時提到的CODE有差異,差異在回覆的時候多了一個 /script 做結尾,所以儲存時就會出現異常,所以我就直接把 /script刪除即可。

      可以使用即可。


      ---
      最新回應中的CODE多了【type='text/javascript'】,跟教學文章內的比較之下少了這一段,不知道有沒有差異?
      同時,這一段語法,應該也是在整個範本中只需要有一段就好了,對嘛? (重複貼2~3個也是沒必要的?)

      只是,宣告這段類型,為 javascript 文本。沒錯,網站只要撈到一筆,就能應用在全站。

      刪除
  5. 另外像Coke回報一下【script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/ 】

    這段放在 body 之前,反而會造成 延伸閱讀下面的廣告消失,所以我還是把這段語法放在 /BODY 前面了。

    而且,這段CODE不能包含末端的【 type='text/javascript'】,有加入這個迪樣會把延伸閱讀的廣告給吃掉,所以我只能用不包含上述語法的CODE了~

    回覆刪除
    回覆
    1. 另外像Coke回報一下「<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/>
      這段放在 body 之前,反而會造成 延伸閱讀下面的廣告消失,所以我還是把這段語法放在 /BODY 前面了。

      可以運用即可。



      ---
      而且,這段CODE不能包含末端的「type='text/javascript'」,有加入這個一樣會把延伸閱讀的廣告給吃掉,所以我只能用不包含上述語法的CODE了~

      ok 可能是有衝突,廣告出的來比較重要。

      刪除
  6. 嗨 COKE,感謝你之前種種的幫助,

    最近GOOGLE ADSENSE的廣告型態多了一種叫做『相符廣告』之類的功能,

    我測試了一下,看起來就像是把站內的【相關文章】放在廣告欄位,你有興趣的話可以做為你的新文章素材唷:)

    目前我只知道有這功能的一些規則,像是要有一定流量才能申請(應該就是符合可以顯示廣告的低標吧?)。

    但我有TRY過也是可以貼在未符合標準的網頁,但可能會因為不符合低標所以沒有收益吧?!

    報告完畢唷~

    回覆刪除
    回覆
    1. 哈哈~

      感謝,我很早之前就知道了。不過我的流量沒有到達,不然 Adsense 剛推出『相符內容廣告』時,就會在那時直接寫一篇文章做介紹了。Adsense『相關文章』廣告,會混合網站本身的文章,與 Adsense 廣告。

      刪除
    2. 阿嘞,我是早上才看到有這個功能XD

      看了一下他除了類似文章推薦的功能之外,說明內提到會穿插廣告的動作倒是沒看到耶@@

      這該不會也是因為我流量不夠?

      而且,我把它放在側邊欄位於手機內顯示,結果...他不會適時的縮短篇幅阿OTZ

      長型相符內容內塞入了13篇文章...也未免太長了阿XD 太長到我想把這功能取消~哈哈

      刪除
    3. 可以搜尋「免費資源網路社群」,文章中的相關文章,即會出現其他的廣告。

      刪除
  7. COKE真的很不好意思,剛剛突然又發現手動加入的廣告與文章內建廣告衝突到。

    我甚至有還原了上次正常狀態下的範本,文章內top、middle(延伸閱讀之後)、bottom廣告卻依然會消失。

    近期印象中也沒有變更HTML,不知道是哪裡的語法跑掉了嘛? 謝謝!

    PS:我已經MAIL範本了,謝謝、再麻煩抽空看一下了~

    回覆刪除
    回覆
    1. 手動加入到文章中的廣告,不要放入「adsbygoogle.js」那一行,廣告應該就出現了,先試試。

      刪除
    2. 完整語法中第一段落的script那邊已經沒有加入了@@

      因為是之前遇到的問題,所以也有先看了一下上面的處理方法,但目前尚未解決狀況@@

      刪除
    3. 你手動加入的廣告,是把它放在文章中嗎?如果是的話,就與你手動加入的部份有關,範本的部份應該沒問題。

      刪除
    4. 你寄來的範本中,有兩筆「adsbygoogle.js」。

      刪除掉註釋『相關文章2 start開始』上面那行的「adsbygoogle.js」再試試。

      刪除
    5. 目前範本改過之後只有剩下一組【pagead2.googlesyndication.com/pagead/js/adsbygoogle.js】,但是狀況依舊。

      目前感覺怪怪的,因為像下面的文章單純是文章連結整理,所以我沒有手動插入廣告,但依舊只有剩下文章內的BOTTOM正常顯示。

      http://www.wanghenry.com/2500/07/Samsung-kies-SmartSwitch-backup-VPN-ariticle.html

      甚至剛剛我把範本後新增的幾個HTML/JAVA 小工具移除,狀態依舊。

      最後研究了一下子,發現到在文章預覽的時候是可以看到TOP MIDDLE的廣告的,

      但正式送出文章後實際的文章畫面之下卻是消失的狀態。(這點感覺是關鍵)


      刪除
    6. 先使用之前調整好的範本。

      然後將文章中後來加入的廣告先除去,觀察一下應該可以復原。


      復原沒問題後,再觀察一下代碼,或是放到這的留言,我幫忙觀察。因為我不可能到你的後台文章頁面去做設定。

      刪除
    7. 請問是回朔到之前你幫我用好的版本(HTML)嗎? 還是把手動加入的廣告移除掉,再給你文章的HTML檔案呢?

      目前的狀態是沒有加入手動廣告的文章也會消失掉TOP跟MIDDLE,BUT文章預覽是正常的(送出後文章不正常)。

      謝謝:)

      刪除
  8. 補充一下,會不會跟jquery 的版本有關係? 上次遇到的狀況印象中就是這個問題。

    目前看到有些小工具的版本不同,不知道會不會有差異?

    https://imgur.com/3ozEvq6.jpg

    【 script src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript 】

    回覆刪除
    回覆
    1. 有可能,jquery 在範本中,放入一筆資料即可。如果有其他版本,先註釋掉。對了,記得「adsbygoogle.js」也放入一筆即可。

      可以試著,自行處理看看。

      刪除
    2. 小工具內的也要刪除嗎? 像是上圖 A 處 B 處 。【{getScript("//code.jquery.com/jquery-2.2.4.min.js",init)}else{init()};】這種的如果要刪除的話,單純刪除網址即可?

      【http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js】這個是完整的網址,其他就在小工具內,是否要把小工具內的刪除?

      【script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/】這個我放在 /body上面。

      這兩個應該試衣個範本之內各一個是正常的,是嘛?

      謝謝~

      刪除
    3. 把有包含 jquery 的整段小工具,先註釋掉。

      於範本中,只保留一個『<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>』即可。

      <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>』在範本中,也是只保留 </body> 之前的那個即可。

      刪除
  9. 補充TOP跟MIDDLE的廣告碼

    【PC TOP】
    https://imgur.com/YpVwo04.jpg

    【MOBILE TOP】
    https://imgur.com/DQxo0Xp.jpg

    【PC MIDDLE】
    https://imgur.com/nZ12o8l.jpg

    【MOBILE MIDDLE】
    https://imgur.com/LA2iP4f.jpg

    回覆刪除
    回覆
    1. TOP 跟 MIDDLE 的廣告碼

      這部份沒問題,如果沒更動過裡面的代碼話,上次我們已經處理完畢了。

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Blogger 自訂網址綁定自有域名

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰