廣告單元

如何自訂回應式相符內容單元

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

您還可以用這些參數來為行動裝置和電腦設置不同設定。舉例來說,若您只為版面配置參數指定了一個值,行動裝置和電腦上的相符內容單元就會使用相同的版面配置;要是您指定兩個值,相符內容單元在行動裝置 (第一個值) 和電腦 (第二個值) 上的版面配置會不同。這些參數也適用於 AMP 相符內容單元

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

注意事項:本文所舉例子使用的 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"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

Image and text side by side layout

圖文並列的資訊卡

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

Image and text side by side with card layout

圖片在文字上方

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

Image stacked above text layout

圖片在文字上方的資訊卡

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

Image stacked above text with card layout

只有文字

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

text-only layout

文字卡

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

Text with card layout

指定相符內容單元中列與欄的數量

相符內容單元中的推薦內容是以網格排列,您可以自行指定網格中要顯示的列與欄數量。例如,設定 2x2 正方形或 4x1 長方形欄位的相符內容單元。

您可以透過參數 data-matched-content-rows-numdata-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"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

4x1 grid

2x2 (行動版和電腦版)

以下程式碼示範如何產生兩列兩欄的相符內容單元,共顯示四個推薦內容:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

2x2 grid

3x3 (行動版和電腦版)

以下程式碼示範如何產生三列三欄的相符內容單元,共顯示九個推薦內容:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

3x3 grid

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

以下程式碼將示範如何使用 4x1 (行動版) 和 2x2 (電腦版) 的網格,製作相符內容單元。若您有回應式網站,建議您採用這項設定。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     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>

4x1 grid

2x2 grid

提出意見

我們歡迎您針對自訂相符內容單元提出寶貴意見!您可以透過這份意見表告訴我們您覺得實用的功能,以及需要改進的部分。

疑難排解

自訂相符內容單元後,顯示的內容仍有可能不如預期,以下為常見問題及其修正方式:

相符內容單元一片空白

可能有下列兩種原因:

  • 相符內容單元中的推薦內容總數少於 1 或多於 30。請修改列和/或欄的數量,讓推薦內容總數符合數量限制。
  • 相符內容單元版面過寬,不適合所設推薦內容的數量。請試著減少寬度。

相符內容單元的推薦內容少於預期數量

如果沒有足夠空間可顯示指定數量的推薦內容,就可能發生這種情況。舉例來說,您設定了多個推薦內容,但相符內容單元寬度不足,或裝置的螢幕太小;出現這類情況時,系統便會配合可用空間調整列和/或欄的數量。您也可修改相符內容單元的寬度,或者分別為行動裝置和電腦設定不同的列數和欄數。

推薦內容僅包含文字

相符內容單元過窄,不適合所設推薦內容的數量時,就可能會有這種情況。此時,建議您增加相符內容單元的寬度。

透過控制台找出相符內容單元中的錯誤

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

若您使用 Chrome,請按照下列步驟在 DevTools Console 中測試廣告程式碼:

  1. 前往包含相符內容單元的網頁。
  2. 按下 Ctrl+Shift+J (Windows/Linux) 或 Cmd+Opt+J (Mac)。
  3. 檢查 Console 面板中是否有錯誤訊息。
這對您有幫助嗎?
我們應如何改進呢?