使用 Javascript 更改 iframe 广告的 img src

编程问答 2022-04-22

问题描述

我正在为一个通过 Google Ad Manager（即 DFP 广告管理系统）运行多个广告空间的网站设置 A/B 测试。部分测试涉及移动和调整广告空间 iframe 的大小，因此我们需要在广告中提供不同的图像。我们试图避免通过 Ad Manager 信息中心执行此操作，但是 Google 的广告是在 iframe 中提供的，因此我们测试网站上的前端 Javascript 无法将 img src 更改为新的广告创意。

有什么办法可以让 Google Ad iframe 在页面加载时接受 Javascript 更改？

解决方法

首先，这取决于您的安全框设置（有关安全框 API 的更多详细信息，请参阅 here）。 如果您的目标是从父网站触发“横幅”广告 iframe 内的功能：

案例 1：GPT 安全框架 API 未启用

广告素材脚本（自定义模板或自定义脚本添加到您的“基本”广告素材中）

 function changeBackground() {
    var creative = document.querySelector('#creativeId');
        creative.style.backgroundImage = 'url("yournewimage.jpeg")';
  }

父站点 DOM 脚本：

document.querySelector('#bannerId iframe').contentWindow.changeBackground();

案例 2：启用 GPT 安全框架 API 您需要通过窗口 postmessage 创建一个专用的通信协议 => 详情参见 here

另外，请记住以下几点：

  • Google Ad Manager 能够投放不同类型的广告素材 （图片、html5、自定义模板、第三方广告服务器的重定向）>> 见here
  • Google Ad Manager 能够声明不同的创意广告 为独特的广告展示位置调整每个设备的尺寸/屏幕尺寸 (defineSizeMapping) >> 见 here
  • Google Ad Manager 能够刷新页面上的全部或部分广告展示位置 >> see 此处

然后，出现了几个问题：

  • 在会话期间有效调整窗口大小的用户数量是多少？
  • 如果您的印刷广告素材不是图片会怎样 ?在这种特定情况下，您的广告位将不会响应，因为 广告素材需要来自您网站的信号才能更改其呈现 图片...

这就是我建议直接从您的 Google 发布商代码设置处理“响应式”呈现的原因：

  • 声明哪些尺寸适合不同的屏幕尺寸
  • 如果需要“实时”响应效果：注意正在调整大小的窗口（事件监听器），然后刷新广告调用，以便 Ad Manager 使用新的窗口大小来生成新的广告调用

此解决方案的优势在于涵盖您网站广告服务器集成中的所有广告素材类型：

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
 window.googletag = window.googletag || {cmd: []};
 googletag.cmd.push(function() {
   // Define a responsive ad slot.
   // [START responsive_ad]
  responsiveAdSlot =
       googletag.defineSlot('/6355419/Travel/Europe',[[300,250],[728,90],[750,200]],'responsive-ad')
                .addService(googletag.pubads());

   var mapping =
       googletag.sizeMapping()
                .addSize([1024,768],[[750,200],90]])
                .addSize([640,480],[300,250])
                .addSize([0,0],[])
                .build();

   responsiveAdSlot.defineSizeMapping(mapping);
   // [END responsive_ad]

   // Enable SRA and services.
   googletag.pubads().enableSingleRequest();
   googletag.enableServices();
 });

function refreshSlot() {
  googletag.cmd.push(function() {
      googletag.pubads().refresh([responsiveAdSlot]);
  })
}

 //widow being resized (end of event to prevent multiple adcalls)
 var timeOutFunctionId;

 window.addEventListener('resize',function() {
   clearTimeout(timeOutFunctionId);
   timeOutFunctionId = setTimeout(refreshSlot,500)
 });
</script>

<div class="ad-container">
  <div id="responsive-ad" class="ad-slot"></div>
</div>

<script>
  googletag.cmd.push(function() {
    googletag.display('responsive-ad');
  });
</script>

Credit 用于“等待调整大小结束事件”。

double-click-advertisinggoogle-ad-managerjavascript