新增原生廣告程式碼

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

運用這項功能產生的原生廣告素材可做為傳統廣告放送 (發布商管理的程式輔助保證廣告素材是唯一受支援的程式輔助廣告)。如要放送原生廣告素材做為傳統廣告和所有類型的程式輔助廣告，請在輔助設計編輯器中選取「先套用範本再自訂樣式」選項。

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

程式碼類型程式碼範例

HTML (含變數)

程式碼類型	程式碼範例
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; }


<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。

這對您有幫助嗎？

我們應如何改進呢？

新增原生廣告程式碼

HTML

插入巨集

CSS

這對您有幫助嗎？

還有其他問題嗎？

嘗試以下步驟：