Adsense廣告單元設定

ADSENSE提供新式的自動廣告協助網站快速插入廣告，

但有的網頁的版面自動插入的廣告有可能不是我們預期的大小。

所以可以再透過廣告單元的設定，來維持乾淨的版面

基本廣告單元設定

Step1. 嵌入ads資源

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-<你的adsense編號>"
     crossorigin="anonymous"></script>

Step2. 設定多個廣告單元

以下是官方單一個的介紹

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-<你的adsense編號>"

     data-ad-slot="廣告單元代碼"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

每個廣告單元為一個ins 在啟用成功後會插入一個廣告的iframe

每一個廣告單元需透過上述程式碼新增

（如果數量錯誤就會噴以下錯誤

"adsbygoogle.push() error: All ins elements in the DOM with class=

adsbygoogle already have ads in them.）

 (adsbygoogle = window.adsbygoogle || []).push({});

正常我們會在頁面上插入多個廣告單元。

可以透過以下的語法做到自動偵測加入，為避免頁面未載入完畢，所以要寫在DOMContentLoaded事件裡

<!--自動偵測幾個廣告單元就插入幾次-->
<script>
	window.addEventListener('DOMContentLoaded',function(evt){
		[].forEach.call(document.querySelectorAll('.adsbygoogle'), function(adsDiv){
			var slotId = adsDiv.getAttribute('data-ad-slot');
			if(adsDiv.classList.contains('adsbygoogle-noablate')){
				console.log("[ADSBYGOOGLE] adsbygoogle-noablate => ad slot:" + slotId);
			}else{
				console.log("[ADSBYGOOGLE] ad slot:" + slotId);
				(adsbygoogle = window.adsbygoogle || []).push({});
			}
		});
	});
	
</script>
<!--/自動偵測幾個廣告單元就插入幾次-->

Step3: 測試廣告

可以開無痕看廣告有無顯示

廣告通常要過幾分鐘才會顯示在網頁上，但有時最多需要一小時。

有關響應式廣告設定

最好的投放效益的廣告，一般投放廣告廠最常做的素材尺寸

300x250
336x280
728x90
300x600
320x100(行動版)

因此ｇｏｏｇｌｅ也有建議可以透過自定義ｒｗｄ　ｃｓｓ來控制廣告

    .adsbygoogle-locked-rwd {

        width: 320px;

        height: 100px;

    }

    @media(min-width: 500px) {

        .adsbygoogle-locked-rwd {

            width: 468px;

            height: 60px;

        }

    }

    @media(min-width: 800px) {

        .adsbygoogle-locked-rwd {

            width: 728px;

            height: 90px;

        }

    }

然後加入你ins 元素中的class即可

廣告空版，無廣告的處理方式

如果剛好沒廣告商沒有廣告可以投放，造成白畫面可以下以下語法

 ins.adsbygoogle[data-ad-status="unfilled"] {

        display: none !important;

    }

REF:

https://developers.google.com/adsense/platforms/transparent/ad-tags

https://medium.com/@arieadityan/create-dynamic-and-responsive-ad-from-google-adsense-placement-c1a761841a3e

https://support.google.com/adsense/answer/9279143?hl=zh-Hant&ref_topic=9261304

https://support.google.com/adsense/answer/10762946?hl=zh-Hant&ref_topic=9183242

https://support.google.com/adsense/answer/9183363?hl=zh-Hans&visit_id=637678097391011276-3052253098&rd=1

https://stackoverflow.com/questions/6404106/jquery-how-to-divide-text-string-in-half-and-make-one-half-in-different-color