如何修改回應式廣告程式碼

如果您發現我們提供的回應式廣告程式碼有不符合需求之處，您可以依據自己的回應式網站需求，自行修改廣告程式碼。本文的範例說明如何正確修改廣告程式碼。

事前準備：

• 如果您還不熟悉使用 CSS 媒體查詢或修改廣告程式碼的方式，建議先參閱「根據螢幕寬度指定確切廣告單元大小的範例」一節。
• 如果已十分熟悉使用 CSS 媒體查詢及修改廣告程式碼的方式，則可直接跳至「進階回應式廣告程式碼功能的範例」一節。

注意：本文所舉例子使用的 AdSense 廣告程式碼修改方法皆符合 AdSense 計畫政策，按照這些方法修改回應式廣告程式碼並不會違反規定。

根據螢幕寬度指定確切廣告單元大小的範例

本範例將說明如何修改回應式廣告程式碼，以便為三種不同的螢幕寬度 (手機、平板電腦和桌機) 設定特定的廣告單元大小。即使您還不熟悉使用 CSS 媒體查詢或修改 AdSense 廣告程式碼的方式，也還是能按照本例操作。

下列這些修改過的回應式廣告程式碼，都可根據螢幕寬度準確設定相應的廣告單元大小：

• 500px 以下的螢幕寬度：320x100 廣告單元。
• 500px 到 799px 之間的螢幕寬度：468x60 廣告單元。
• 800px 以上的螢幕寬度：728x90 廣告單元。

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

如要依據您本身的網站需求修改這段範例程式碼，請按照下列步驟操作：

1. 在 AdSense 帳戶中建立多媒體廣告單元，並確認您已在「廣告大小」部分中選取「回應式」。記下回應式廣告程式碼中的下列資訊：
   • 發布商 ID，例如「ca-pub-1234567890123456」
   • 廣告單元 ID (data-ad-slot)，例如「1234567890」。
2. 在範例程式碼中：
   • 用不重複的名稱 (如 Home_Page、front_page_123 等) 取代所有的 example_responsive_1。
     注意：

     • 不重複名稱必須包含英文字母 (A-Z)、數字和底線，且第一個字元須為英文字母。
     • 每次修改這段範例程式碼時，都必須使用不同的不重複名稱。
   • 用自己的發布商 ID 取代 ca-pub-1234567890123456。
   • 用自己的廣告單元 ID 取代 8XXXXX1。
3. 決定廣告單元在各種螢幕寬度的裝置上顯示時的大小：
   • 範例程式碼現有的廣告單元大小若符合需求，就不必另行變更。
   • 如果想要根據螢幕寬度設定不同的廣告單元大小，請在範例程式碼中：
     • 針對螢幕寬度不超過 500px 的裝置，以您想要使用的廣告單元高度和寬度來取代 320px 和 100px。
     • 針對螢幕寬度介於 500px 到 799px 之間的裝置，以您想要使用的廣告單元高度和寬度來取代 468px 和 60px。
     • 針對螢幕寬度超過 800px 的裝置，以您想要使用的廣告單元高度和寬度來取代 728px 和 90px。
4. 請複製修改好的廣告程式碼，然後在您要顯示廣告的網頁上，將廣告程式碼貼入 HTML 原始程式碼中。
   提示：安插好廣告程式碼後，建議您在各種裝置和螢幕上測試廣告，確保回應式行為能正常運作。

進階回應式廣告程式碼功能範例

如果我們的回應式廣告程式碼不符合您的需求，不妨使用 CSS 修改廣告程式碼，指定廣告單元的確切大小。

注意事項：如果您不熟悉廣告程式碼的修改方式，建議您不要使用這些進階功能。

指定可展開式寬度搭配固定高度

您可以用 CSS 修改回應式廣告程式碼，藉此為廣告單元指定可展開式寬度搭配固定高度。修改方法如以下範例所示：

可展開式寬度搭配固定高度範例

以下範例說明如何修改回應式廣告程式碼，以指定 90px 的固定高度，以及最小寬度 400px 至最大寬度 970px 的可變寬度：
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

根據螢幕寬度指定確切大小

您可以用 CSS 修改回應式廣告程式碼，藉此為廣告單元指定確切大小。修改方法如以下範例所示：

根據螢幕寬度指定確切大小範例

如果您很清楚自己的回應式網站在各種裝置上適合搭配何種廣告單元大小，可使用 CSS3 媒體查詢設定回應式廣告單元的大小。以下範例說明如何修改廣告程式碼，以使用 CSS3 媒體查詢：
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

@media 規則是一種 CSS3 語法，適用於所有新式瀏覽器。請注意，透過外部樣式表以 CSS 設定廣告單元大小的做法，並未受到正式支援。

隱藏廣告單元

有時候，您可能會希望廣告完全不要顯示，特別是在小型行動裝置上。如要隱藏廣告單元，您可以使用 CSS 媒體查詢設定參數，這樣系統就不會發出任何廣告請求，也不會顯示任何廣告。修改方法如以下範例所示：

在特定大小螢幕上隱藏廣告的範例

如果您只想在特定大小的螢幕上顯示廣告，只要使用 CSS 就可以辦到。以下範例說明如何修改廣告程式碼，以使用 CSS3 媒體查詢隱藏特定螢幕大小的廣告：
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

在這個範例中，只要螢幕寬度未達 400px，就不會顯示任何廣告。

注意：修改複製的回應式廣告程式碼時，請刪除這兩行程式碼：
data-ad-format="auto"
data-full-width-responsive="true"

注意：即使有修改程式碼的彈性，您還是必須遵守廣告刊登位置政策。此外請注意，AdSense 計畫政策只允許您有限度地修改程式碼。