如何製作響應式 DFP 廣告單元
已發表: 2016-01-22
這篇文章最近更新於 2021 年 8 月 31 日
因此，您有一個響應式主題，現在您想從 AdSense 遷移到 Google Ad Manager (GAM)。 您首先看到的是，沒有像您通常在 AdSense 中看到的那樣的響應式廣告單元。
Google 的支持說明可能有點棘手或複雜。 所以今天我將向您展示如何通過幾個簡單的步驟使 GAM 代碼具有響應性。
自定義 DFP 代碼以製作 Google Ad Manager 自適應廣告並非易事。如果您沒有編碼經驗，更謹慎的做法是讓專家第一次為您正確完成。您不想冒失去廣告收入的風險！ 如果您需要幫助，請在此處聯繫我們。 |
在開始之前，請確保執行以下操作：
- 設置您的庫存。 配置每個廣告單元的所有相關尺寸。 閱讀：Adsense 和 GAM 集成最佳實踐
- 在此處查看我們關於如何生成多個 Ad Manager 代碼的教程：https://youtu.be/s74dMDzczyc
- 現在製作兩個文本文件並保存。 使用好的文本編輯器（我更喜歡使用 Notepad++，因為它免費且易於使用）。
- 為頭部製作一個，為身體標籤製作另一個。
- 保存正文標籤。
- 打開您製作的 head.txt 文件。
使 head 標籤響應
第一步：在記事本++中打開head.txt。首先，讓我們一步一步來。 您的標頭代碼將如下所示：
| <!– 啟動 GPT 代碼 –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script> <腳本> window.googletag = window.googletag || {命令：[]}； googletag.cmd.push(函數() { googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </腳本> <!– 結束 GPT 標記 –> |
第 2 步：我在那裡突出顯示了一段代碼：
googletag.cmd.push(函數() {
您必須在突出顯示的行之後添加一些代碼。 以下是您必須添加的給定代碼。 根據您從以下選擇的任何路線粘貼盡可能多的實例（副本）：
- 尺寸圖的數量。 如果適用，您可以在多個廣告單元上重複使用相同尺寸的地圖
- 您擁有的廣告單元數量
- 您想要響應式廣告單元的數量
| var mappingadunitname = googletag.sizeMapping()。 addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //桌面 addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //藥片 addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //移動的 addSize([0, 0], [[320, 50], [1, 1]]). //其他 建造（）; |
第 3 步：我突出顯示了另一段代碼。這是我們稍後將在廣告單元中傳遞的映射名稱。 我更喜歡這樣做，mappingadunitname所以對於我們上面的例子，我選擇為每個單位創建 1 個尺寸的地圖，這意味著我們將需要它的 4 個實例並將它放在之後：
googletag.cmd.push(函數() {
第 4 步：添加映射後，您的標頭代碼應如下所示：
| <!– 啟動 GPT 代碼 –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script> <腳本> window.googletag = window.googletag || {命令：[]}； googletag.cmd.push(函數() { var mappingheaderad1 = googletag.sizeMapping()。 addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //桌面 addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //藥片 addSize([0, 0], [1, 1]). //其他 建造（）; var mappingcontentad1 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //藥片 addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //移動的 addSize([0, 0], [[320, 50], [1, 1]]). //其他 建造（）; var mappingcontentad2 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //藥片 addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //移動的 addSize([0, 0], [[300, 250], [1, 1]]). //其他 建造（）; var mappingrightrail1 = googletag.sizeMapping()。 addSize([992, 0], [[300, 250], [1, 1]]). //桌面 addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //藥片 addSize([0, 0], [1, 1]). //其他 建造（）; googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </腳本> <!– 結束 GPT 標記 –> |
第 5 步：現在是最後一步：您需要為每個廣告單元定義或分配尺寸映射。讓我們在這裡抓一個，然後我會告訴你要添加什麼以及在哪裡添加。
| googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); |
第6步：現在你需要在上面代碼的藍色和紅色部分之間添加這段代碼.defineSizeMapping(mappingadunitname)。 即在點之前
此處重要的是括號中的文字應與您要在廣告單元中添加的尺寸圖相匹配。 對於我們此處的示例，RightRail_Ad1 應具有以下外觀：
| googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .defineSizeMapping(mappingrightrail1).addService(googletag.pubads()); |
第 7 步：為所有其他廣告單元添加類似的映射將為您提供最終代碼。
| <!– 啟動 GPT 代碼 –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>  <腳本> window.googletag = window.googletag || {命令：[]}； googletag.cmd.push(函數() { var mappingheaderad1 = googletag.sizeMapping()。 addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //桌面 addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //藥片 addSize([0, 0], [1, 1]). //其他 建造（）; var mappingcontentad1 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //藥片 addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //移動的 addSize([0, 0], [[320, 50], [1, 1]]). //其他 建造（）; var mappingcontentad2 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //藥片 addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //移動的 addSize([0, 0], [[300, 250], [1, 1]]). //其他 建造（）; var mappingrightrail1 = googletag.sizeMapping()。 addSize([992, 0], [[300, 250], [1, 1]]). //桌面 addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //藥片 addSize([0, 0], [1, 1]). //其他 建造（）; googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .defineSizeMapping(mappingheaderad1).addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .defineSizeMapping(mappingcontentad1).addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .defineSizeMapping(mappingcontentad2).addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .defineSizeMapping(mappingrightrail1).addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </腳本> <!– 結束 GPT 標記 –> |
注意：突出顯示的部分代碼是為了強調哪個尺寸圖用於哪個廣告單元。
第 8 步：現在讓我們看看尺寸映射：
| var mappingcontentad2 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //藥片 addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //移動的 addSize([0, 0], [[300, 250], [1, 1]]). //其他 建造（）; |
紅色代碼定義了瀏覽器的寬度和高度。 通常高度並不重要，因為只有當我們在上面的代碼中兩行的寬度相等時才會考慮。
第 9 步：現在我們在第一行這樣說：
- 如果瀏覽器的寬度等於或大於 992px，請顯示 728×280 或 728×90 或 336×280 或 300×250 或 1×1 廣告尺寸
在最後一行我們說：
- 如果瀏覽器的寬度等於或大於 320 像素，請顯示 320×50 或 320×100 或 320×200 或 300×250 或 1×1 廣告尺寸
no.s、992px、768px 和 320px 適用於大多數網站，因為它們遵循台式機、平板電腦和移動瀏覽器的常規尺寸。
但是，如果您的網站有平板電腦和手機主題，您可以詢問您的開發人員觸發主題轉換的瀏覽器大小，然後您可以分別添加該大小來代替 768px 和 320px。
您 2019 年的程序化收入策略是什麼？
在 MonetizeMore，我們幫助發布商從他們現有的廣告庫存中獲得更多收入。我們是領先的 Google 發布合作夥伴，擁有一套發布商獲利解決方案，可幫助我們的客戶實現收入目標並解決他們的廣告運營難題。
雖然您完全可以自行設置 DFP 自適應廣告單元，但務必要考慮您的機會成本。花時間發展業務並冒因錯誤設置而損失收入的風險是否值得？
如果您有興趣獲得有關設置 DFP 自適應廣告單元的幫助。立即在 MonetizeMore 註冊高級帳戶！
相關閱讀：
- AdSense 提供自適應廣告單元
- 2016 年熱門移動廣告類型
- Doubleclick 的 Accelerated Mobile Pages 對發布商的好處
- 隨著移動廣告支出超過桌面，如何讓發布商做好準備
- Doubleclick 現在為移動廣告商和出版商提供跨設備跟踪和原生廣告