我們為即時通訊支援專員採行了預防保健措施,因而無法提供這項服務。如需 Google Ad Manager 帳戶相關協助,您還是可以透過下方的「聯絡我們」選單聯絡支援團隊。如果造成任何不便,敬請見諒,也感謝您在這段期間的耐心配合。本訊息會隨疫情變化更新。

新增原生廣告程式碼

當您為原生廣告選擇 [HTML 與 CSS 編輯器] 選項時,可以新增 HTML 與 CSS 程式碼來自訂及設定原生廣告的樣式。為協助您新增程式碼,本文提供了一些訣竅和範例。

運用這項功能產生的原生廣告素材可做為傳統廣告放送 (發布商管理的程式輔助保證廣告素材是唯一受支援的程式輔助廣告)。如要將原生廣告素材同時當做傳統廣告和所有類型的程式輔助廣告放送,請在輔助設計編輯器中選取 [可自訂的動態內樣式] 選項

原生樣式範例

以下是針對自動調整的資訊提供刊登位置的原生樣式 HTML 和 CSS 範例。此原生樣式是根據包含標題、圖像和本文等變數的「宣傳贊助文章」原生廣告格式所建立。

程式碼類型 程式碼範例
HTML (含變數)

<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>
    
CSS (含變數)

.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}
    

此原生樣式會將下列的原生廣告素材元件:

元件 範例
標題 未來最搶手的 30 種工作
圖像 jobs.jpg
本文 根據美國勞工統計局的資料,這些職業在未來 10 年最搶手。這份清單可能會讓您大吃一驚。

轉換為如下所示的原生廣告:

HTML

新增 HTML 程式碼片段,以指明您原生廣告的顯示方式。

  • 您可能需要與網站或應用程式開發人員合作,以便建立程式碼。
  • 您的 HTML 可以包含以 <script> 標記寫成的 JavaScript 程式碼。
  • 請僅加入與廣告相關的程式碼片段,因為加入完整的 HTML 文件可能會阻礙廣告在某些瀏覽器 (包括 Internet Explorer) 中顯示。例如,請勿包含 <doctype><html> 標記;請參閱以上的範例
  • 原生廣告不會繼承上層頁面的樣式,但您可以透過 HTML 的 <link> 標記匯入外部樣式表和網路字型。

目標視窗設定可讓您選擇所點擊的原生廣告要在同一個視窗的分頁,或是另外一個新視窗中開啟。

  • 傳統廣告會繼承廣告單元層級設定。
  • 程式輔助廣告會繼承聯播網層級設定。

插入巨集

您也可以按一下 [插入巨集],並使用下列按鈕建立您的 HTML:

  • CacheBuster:確保系統在每次執行程式碼時,都會向廣告伺服器發出重新整理呼叫,以便正確計算曝光次數。進一步瞭解 CacheBuster
  • Click (建議):如果程式碼片段不包含特殊字元,可使用此巨集追蹤點擊。進一步瞭解 Click 巨集
  • 到達網址:指定在有人按下廣告時應顯示的廣告素材到達網頁。進一步瞭解到達網址
  • 逸出後的 Click 巨集:如果程式碼的到達網址包含特殊字元 (例如 &、?、%),可使用此巨集追蹤點擊。進一步瞭解逸出後的 Click 巨集
  • 影片包裝函式:包含原生廣告影片播放器的包裝函式。進一步瞭解如何設定原生影片樣式

CSS

提供 CSS 程式碼,以指明您原生廣告的顯示方式。請參閱以上的範例

如果您是投放自動調整大小的原生廣告,請不要使用絕對定位 CSS。
這對您有幫助嗎?
我們應如何改進呢?

還有其他問題嗎?

登入即可獲得其他支援選項,快速解決您的問題

搜尋
清除搜尋內容
關閉搜尋
Google 應用程式
主選單
搜尋說明中心
true
148
false