Question

我正在尝试在DFP广告管理系统中为卷轴广告创建模板。下面是代码，它在“同步”页面上可以正常工作，但在“异步”页面上却不能，我无法渲染它。（我从Github获得了这段代码）

我的页面包含iframe，但以上内容无法投放，我尝试使用iframe无效代码段，但到目前为止没有用。我知道我可以联系celtra或sizmek来轻松创建这些交互卷轴。但是，我想自己提出一个建议，但现在我陷入了困境。有人可以在这里建议或分享您的专家见解吗？

/* == configs == */

var labelText = "ADVERTISEMENT";
var labelText1 = "SCROLL TO CONTINUE WITH CONTENT"; //set custom "advertisment" awareness text label
var imagePath = "https://2.bp.blogspot.com/-XtK2urTrYZA/Uf9WdSAEvHI/AAAAAAAABfI/W-xngMSQ0S0/s1600/640x1136+ios+7+wallpaper.jpg" //set path to your image
var clickMacro = "http://google.ro" //set clickURL destination
var linkTarget = "_blank" //set link target attribute, by default "blank"

/* == generator code == */

var container = document.getElementById("inscroll-banner");
container.setAttribute("style", "height: 100vh; position: relative; margin: 40px 0;");
var cm = document.createElement("a");
cm.setAttribute("style", "display:block; position:absolute; top:0; left:0; width:100%; height:100%;");
cm.setAttribute("href", clickMacro);
cm.setAttribute("target", linkTarget);
var adlabel = document.createElement("div");
var lt = document.createTextNode(labelText)
adlabel.appendChild(lt);
adlabel.setAttribute("style", "position:absolute; z-index:9; margin-top:-26px; color:#fff; background-color:#222; text-align:center; width:100%; left:0;font-size:14px; padding:3px 0; height:26px");
var inner = document.createElement("div");
inner.setAttribute("id", "banner-core");
inner.setAttribute("style", "width: 100%; top: 0; left: 0; clip: rect(0,100vw,100vh,0); overflow-x: hidden; overflow-y: auto; position: fixed; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0);");
var art = document.createElement("img");
art.setAttribute("src", imagePath);
art.setAttribute("class", "responsive");
art.setAttribute("style", "max-width:100%");
// var adlabel2 = document.createElement("div");
// var lt2 = document.createTextNode(labelText1)
// adlabel2.appendChild(lt2);
// adlabel2.setAttribute("style","position:absolute; z-index:11; margin-top: 422px; color:#fff; background-color:#222; text-align:center; width:100%; left:0;font-size:14px; padding:3px 0; height:26px");
inner.appendChild(art);
inner.appendChild(cm);
container.appendChild(adlabel);
container.appendChild(inner);
//container.appendChild(adlabel2);

window.onscroll = function() {
  var pos = container.getBoundingClientRect();
  inner.style.clip = "rect(" + pos.top + "px,100vw," + pos.bottom + "px,0)";
}
window.onscroll();

.responsive {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

<div class="container-fluid">
  <div class="row">
    <div class="c2">
      <div id="inscroll-banner"></div>
      <!-- the container should be either placed manually or injected via your adserver -->

      <div style="margin-top: -40px; z-index:12; color:#fff; background-color:#222; text-align:center; width:100%; left:0;font-size:14px; padding:3px 0; height:26px">
        SCROLL TO VIEW CONTENT
      </div>

    </div>
  </div>
</div>

Interscroller的DFP模板-异步页面

0 个答案: