如何正確編寫 DFP 頁外廣告單元？

Question

我正在開發一個 javascript 渲染的移動網絡插頁式廣告。 布局是完全響應的，因此它將占用提供的 screen\\iframe 的 100%。

我現在希望通過 DFP 展示插頁式廣告。

起初，我創建了一個大小合適的廣告單元 (320x480)，效果很好，但插頁式廣告僅限於 iframe 的邊界。

我創建了一個名為Out-of-page的新訂單項類型。 該文件指出：

它們可能包括彈出窗口和浮動訂單項，有時也稱為插頁式廣告。

但是當我嘗試在測試站點中嵌入插頁式廣告時，會發生 iframe 保持 1x1 的情況，使插頁式廣告不可見（如果我用調試器手動放大它，我會看到它）

---

我的設置：

• 廣告資源尺寸為 1x1 且頁外的訂單項
• 用我的代碼片段創意
• 廣告單元的尺寸定義為 1x1

---

我在文檔中讀到：

如果您使用的是 DoubleClick 代碼廣告素材，則必須確保在 DoubleClick 代碼的另一端（即另一個 DFP 網絡）投放的廣告素材代碼針對頁外廣告單元正確編碼。

就 DFP 頁外插頁式廣告而言，廣告“正確編碼”是什么意思？ 如何強制插頁式廣告占據屏幕的所有尺寸？

Answer 1

在咨詢 DFP 支持后，我能夠按照以下步驟創建頁外插頁式廣告單元：

1. 創建一個新的廣告單元，廣告資源尺寸為“頁外”
2. 創建一個新的訂單項和一個廣告資源尺寸為“頁外”的移動廣告素材，此訂單項定位到以前的廣告單元。

3. 在 Inventory 選項卡下生成新標簽，在第 2 步選擇“Enable synchronous requests”和“Out of Page”。“Enable synchronous requests”似乎是完成這項工作的關鍵。

   根據谷歌支持：

   我們通常建議我們的發布商在提供頁外（插頁式）廣告時實施同步 GPT，因為廣告素材呈現在元素而不是 iFrame 中

4. 將此標簽放在測試頁面中（帶有必要的 html、head 和 body 標簽），瞧！

Answer 2

不確定這是您需要的，而且我對 DFP 沒有太多經驗，但我遇到了類似的問題，我通過手動管理 iframe 的大小解決了這個問題。 也許這也可以幫助你。

DFP API 有一個您可以收聽的事件，讓您知道廣告已完成呈現，我建議您將 iframe 屬性更改為全寬，並且任何高度都適用於展示位置。

假設您的頁面上有 jQuery，這可以很容易地完成。 設置 DFP 插件（調用defineSlot等）后，您可以為該事件添加一個偵聽器，如下所示：

googletag.pubads().addEventListener('slotRenderEnded', function(){
  var $adFrame = $('#id-of-the-iframe');
  $adFrame.css({width: '100%', height: '500px'});
});

此處的DFP 文檔對此進行了概述。

希望這可以幫助。

編輯：發布后我意識到我發布的代碼示例來自 DFP GPT 庫。 也許你沒有使用這個。 這個 SO 問題有一個指向某人創建的用於偵聽 DFP 觸發的事件的庫的鏈接。 也許您可以使用它並使用我描述的技術？

再次 - 希望這有幫助:)

Answer 3

我剛遇到這個。 DFP 似乎已經去掉了啟用同步請求選項。 由於幾個原因，這從來都不是一個很好的解決方案（正如其他人指出的那樣）。 首先，如果您在同一頁面上有異步請求，則效果不佳。 其次，它會“阻塞”並減慢您的頁面速度。

友好的 iFrame

似乎現在首選的方法是使用“友好 iFrame”。 要使用友好 iFrame，請在 DFP 中設置您的廣告素材時，取消選中“投放到 SafeFrame”。 DFP 現在會將您的廣告投放到“友好 iFrame”中。 友好 iFrame 是從與父窗口相同的域提供的 iFrame。 由於域匹配，瀏覽器安全規則允許 iframe 中的 JavaScript 訪問父窗口（通過window.parent.document ）。 現在您可以調整 iframe 的大小以使其全屏顯示。 為此，請在您的廣告代碼中添加如下內容：

window.parent.document.getElementById(window.name).style.cssText = "position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; margin: 0;";

如果您的廣告可以自行關閉，請確保在關閉時也縮小友好 iFrame（否則展開的友好 iFrame 會阻止底層頁面上的鼠標操作）。 你可以這樣做：

window.parent.document.getElementById(window.name).style.cssText = "position: relative; width: 0px; height: 0px;";

一些注意事項

出於安全原因，只要有可能，SafeFrame 是投放廣告的首選方式。 SafeFrame 提供了一個 API 來與父窗口通信，但不允許完全訪問。 SafeFrame 包含一個用於增加 iFrame 大小的擴展選項，但是，DFP 的 SafeFrame 實現似乎不允許您擴展到全屏。 出於這個原因，最好為插頁式廣告使用友好的 iFrame。 您可以在此處試用 DFP 的 SafeFrame 實施。

請注意，您應該只允許您完全信任的內容在 Friendly iFrame 中運行，因為它可以做很多惡意的事情（例如竊取用戶會話 cookie 等）。