廣告單元

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

如果您發現我們提供的回應式廣告程式碼有不盡如人意的地方,不妨依據您回應式網站的需求,自行修改廣告程式碼。請參閱以下範例,詳細瞭解正確的修改方式。

重要注意事項

注意事項:本文範例所提供的 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"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

若要依據您本身的網站需求修改這段範例程式碼,請按照下列步驟進行:

  1. 在 AdSense 帳戶中製作一個多媒體廣告單元,並確認「廣告大小」部分中的「回應式」設定為已選取。記下回應式廣告程式碼中的下列資訊:
    • 發佈商 ID,例如「ca-pub-1234567891234567」
    • 廣告單元 ID (data-ad-slot),例如「1234567890」
  2. 請在範例程式碼中修改下列項目:
    • 用不重複的名稱 (如 Home_Page、front_page_123 等) 取代所有的「example_responsive_1」。
      注意事項:
      • 不重複名稱必須包含英文字母 (A-Z)、數字和底線,且第一個字元須為英文字母。
      • 每次修改這段範例程式碼時,都必須使用不同的不重複名稱。
    • 用自己的發佈商編號取代「ca-pub-XXXXXXX11XXX9」。
    • 用自己的廣告單元編號取代「8XXXXX1」。
  3. 決定廣告單元在各種螢幕寬度的裝置上顯示時的大小:
    • 範例程式碼現有的廣告單元大小若符合需求,就不必另行變更。
    • 如果想要根據螢幕寬度設定不同的廣告單元大小,請按照下列指示修改範例程式碼:
      • 針對螢幕寬度不超過 500px 的裝置,以您想要使用的廣告單元高度和寬度來取代 320px100px
      • 針對螢幕寬度介於 500px 到 799px 之間的裝置,以您想要使用的廣告單元高度和寬度來取代 468px60px
      • 針對螢幕寬度超過 800px 的裝置,以您想要使用的廣告單元高度和寬度來取代 728px90px
  4. 請複製修改好的廣告程式碼,然後在您要顯示廣告的網頁上,將廣告程式碼貼入 HTML 原始程式碼中。
    注意事項:安插好廣告程式碼後,建議您在各種裝置和螢幕上測試廣告,確保回應式行為能正常運作。

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

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

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

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

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

可展開式寬度搭配固定高度範例
透過這個範例,您可以瞭解如何修改回應式廣告程式碼,藉此指定 90 像素的固定高度,以及介於最小寬度 400 像素至最大寬度 970 像素之間的可變寬度:
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media 規則是一種 CSS3 語法,所有的新版瀏覽器均可支援。若要獲得舊版瀏覽器支援 (如 Internet Explorer 7 或更舊版本),建議您先指定預設大小。這樣就算媒體查詢不受支援,廣告一樣能夠顯示。請注意,透過外部樣式表以 CSS 設定廣告程式碼大小的做法,並未受到正式支援。

隱藏廣告單元

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

範例:在特定大小的螢幕上隱藏廣告
如果您只想在特定大小的螢幕上顯示廣告,只要使用 CSS 就可以辦到。以下範例說明了如何修改廣告程式碼,以便運用 CSS3 媒體查詢在特定大小的螢幕上隱藏廣告:
<style type="text/css">
.adslot_1 { display:inline-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-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

即使有修改程式碼的彈性,您還是必須遵守廣告刊登位置政策。此外請注意,AdSense 計劃政策只允許您有限度地修改程式碼
這對您有幫助嗎?
我們應如何改進呢?