如何自訂回應式多重廣告單元

注意：這些選項已淘汰，雖然還是可以用來自訂多重廣告，但無法保證在任何情況下都能繼續運作。

如果您對回應式多重廣告單元有特定需求，可以在廣告程式碼中加入參數來自訂相符內容單元的外觀。這些參數可讓您更改多重廣告單元的版面配置等設定，以及指定如何在這類單元中排列廣告的列和欄。

您還可以用這些參數來為行動裝置和電腦設置不同設定。舉例來說，若您只為版面配置參數指定了一個值，行動裝置和電腦上的多重廣告單元就會使用相同的版面配置；要是您指定兩個值，多重廣告單元在行動裝置 (第一個值) 和電腦 (第二個值) 上的版面配置會不同。

不過要提醒您，上述做法只適用於回應式多重廣告單元，而且進行自訂時必須使用所有的參數。此外，請務必於修改廣告程式碼後在不同裝置和螢幕上測試多重廣告單元，確保這些單元能夠正常運作。

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

全部展開 全部收合

更改多重廣告單元的版面配置

版面配置參數 (data-matched-content-ui-type) 可讓您管理多重廣告單元中圖文的排列方式，例如圖文並列，或圖片在文字上方等等。

以下版面配置選項可供使用：

圖文並列

此版面配置的圖片與文字並排顯示，若要選用這個版面配置，請在廣告程式碼中加入這串參數：data-matched-content-ui-type="image_sidebyside"。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

圖文並列的資訊卡

在此版面配置中，圖片與文字在資訊卡中並排顯示。如要選用這個版面配置，請在廣告程式碼中加入這串參數：data-matched-content-ui-type="image_card_sidebyside"。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

圖片在文字上方

此版面配置以圖片在文字上的順序並排顯示，如要選用這個版面配置，請在廣告程式碼中加入這串參數：data-matched-content-ui-type="image_stacked"。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

圖片在文字上方的資訊卡

此版面配置是以圖片在文字上順序並排顯示的資訊卡，如要選用這個版面配置，請在廣告程式碼中加入這串參數：data-matched-content-ui-type="image_card_stacked"。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

只有文字

只有文字、不包含圖片的版面配置，如要選用這個版面配置，請在廣告程式碼中加入這串參數：data-matched-content-ui-type="text"。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

文字卡

只包含文字的資訊卡，如要選用這個版面配置，請在廣告程式碼中加入這串參數：data-matched-content-ui-type="text_card"。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text_card"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

指定多重廣告單元中的列數和欄數

多重廣告單元內的廣告會在格子中排列，您可以指定要在格子中顯示的列數和欄數。舉例來說，您可以將多重廣告單元設為 2x2 的正方形或 4x1 的欄，以此類推。

您可以透過參數 data-matched-content-rows-num 和 data-matched-content-columns-num，分別為列和欄設定數量，請務必同時設定這兩個參數和 data-matched-content-ui-type。

注意：

• 可設定的列數和欄數有限制。多重廣告單元中的廣告總數必須介於 1 到 30 之間。如果您要顯示的廣告少於 1 則或超過 30 則，多重廣告單元將會一片空白。
• 有時系統可能無法顯示您指定的確切列數和/或欄數。舉例來說，如果您設定了大量的欄，但多重廣告單元的寬度不足容納所有欄；此時，系統就會調整列數和/或欄數，讓可用空間足以容納廣告，以提供良好的使用者體驗。

列和欄的設定範例

4x1 (行動版和電腦版)

以下程式碼示範如何產生四列一欄的多重廣告單元，共顯示四則廣告：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2x2 (行動版和電腦版)

以下程式碼示範如何產生兩列兩欄的多重廣告單元，共顯示四則廣告：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3x3 (行動版和電腦版)

以下程式碼示範如何產生三列三欄的多重廣告單元，共顯示九則廣告：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 (行動版) 和 2x2 (電腦版)，適用於回應式網站

以下程式碼示範如何使用 4x1 (行動版) 和 2x2 (電腦版) 的格子，製作多重廣告單元。若您有回應式網站，建議您採用這項設定。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4,2"
     data-matched-content-columns-num="1,2"
     data-matched-content-ui-type="image_stacked,image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

疑難排解

自訂多重廣告單元後，這類廣告單元可能會無法正常顯示。以下是多重廣告單元的常見問題和修正方法：

多重廣告單元一片空白

原因可能有兩個：

• 多重廣告單元中的廣告總數小於 1 或大於 30。請修改多重廣告單元中的列數和/或欄數，讓廣告總數符合限制。
• 多重廣告單元版面過寬，不適合所設廣告的數量。在這種情況下，請嘗試縮減多重廣告單元的寬度。

多重廣告單元的廣告數量不如預期

如果沒有足夠空間可顯示指定數量的廣告，就可能發生這種情況。舉例來說，您設定了大量廣告，但多重廣告單元版面過窄，或是用來顯示的螢幕太小；出現這類情況時，系統便會配合可用空間調整列數和/或欄數。您也可修改多重廣告單元的寬度，或者分別為行動裝置和電腦設定不同的列數和欄數。

廣告只包含文字

如果多重廣告單元版面過窄而無法容納所設數量的廣告，可能就會發生這個問題。在這種情況下，請嘗試增加多重廣告單元的寬度。

透過控制台找出多重廣告單元中的錯誤

您可以使用瀏覽器中的控制台，確認多重廣告程式碼是否修改正確。舉例來說，您可以透過控制台判斷廣告程式碼是否缺少必要參數，或參數是否包含無效值。

若您使用 Chrome，請按照下列步驟在開發人員工具控制台中測試廣告程式碼：

1. 前往包含多重廣告單元的網頁。
2. 按下 Ctrl+Shift+J (Windows/Linux) 或 Cmd+Opt+J (Mac)。
3. 檢查控制台面板中是否有錯誤訊息。