javascript - que - Google DFP: redimensionar el contenedor Iframe externo de creatividades personalizadas de SafeFrame desde dentro(expandir anuncio)
safeframe container-appnexus (1)
Estoy buscando una solución que pueda expandir el anuncio personalizado de SafeFrame desde dentro de la creatividad personalizada en Google DFP. ¿Es posible de alguna manera?
Hay 2 soluciones posibles:
1) usando SafeFrame API
pros:
- puedes usarlo "fuera de la caja"
- puede usarlo en cualquier sitio web, no se necesita un código personalizado en el sitio web
- es seguro de usar
contras:
- está limitado a llenar solo el área visible del sitio web
- debe esperar, hasta que el bloque de anuncios sea visible para el usuario
2) codifica tu propia API con el método de JavaScript window.postMessage()
contras:
- necesitas agregar un código personalizado a tu sitio web
- es una posible amenaza si usa algunas creatividades de terceros
pros:
- puede hacer casi cualquier cosa con su sitio web desde su creatividad
1) usando SafeFrame API
Esta API es relativamente fácil de usar, puede ver algunos ejemplos en la herramienta de previsualización GPT Safeframe .
Primero, debe actualizar su script de inicialización de DFP en <head> de su sitio web
var pageConfig = {
allowOverlayExpansion: true,
allowPushExpansion: true,
sandbox: true
};
googletag.pubads().setSafeFrameConfig(pageConfig);
Esto permitirá expandir los anuncios de SafeFrame en su sitio web. Más sobre esto en el comportamiento del Control SafeFrame Container a través de GPT .
Ahora puede crear creatividades personalizadas y publicarlas como SafeFrame en su sitio web. Aquí está mi único ejemplo. Este ejemplo puede "esperar" que esté visible, y luego se expandirá a la altura de <div id="container"> que está dentro de SafeFrame:
<div id="container">
some lines to make container height<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
</div>
<script>
// global expanded indicator variable, because API don''t have any
var expanded = false;
function expand() {
var self= $sf.ext.geom().self;
var config = {
push: true, // we want to push expanded content
b: 0
};
var el = document.getElementById(''container'');
var containerHeight = el.offsetHeight;
// get height from bottom, that need to be expanded
var expandBottom = containerHeight - self.h;
// if container is whole inside a SafeFrame, it will not expand
if(expandBottom < 0) return;
config.b = expandBottom;
$sf.ext.expand(config);
}
function expandDelayed(forceExpand) {
// expand will run just once, or you can force it to run again
// but collapse first is needed
if(expanded && forceExpand || !expanded) {
$sf.ext.collapse();
expanded = false;
// there must be some timeout, because .collapse(); method is deplayed somehow
setTimeout(expand, 0);
}
}
$sf.ext.register(160, 150, function(status, data) {
// this code will do whole magic of "waiting" for right moment
if (status === ''geom-update'') {
expandDelayed();
}
// change global expanded status
if (status === ''expanded'') {
expanded = true;
}
});
// init
expandDelayed();
</script>
2. codifica tu propia API con el método de JavaScript window.postMessage()
En primer lugar, debe colocar este código en su script de inicialización de DFP en <head> de su sitio web. Este código agregará una identificación del espacio publicitario como #hash-tag a <iframe> ''src para que pueda obtenerlo desde el interior de su creatividad.
googletag.pubads().addEventListener(''slotRenderEnded'', function (event) {
var containerId = event.slot.getSlotElementId();
var containerEl = document.getElementById(containerId);
if (containerEl === null) return;
var iframeEl = containerEl.querySelectorAll(''iframe'')[0];
// it''s delayed by 10 milliseconds, because iframe is not yet fully rendered
// and limited to max to 10 seconds to wait
var timeoutFunction = function () {
var src = "#" + containerId;
// `src` attribute is null, when iframe is FriendlyIframe, and
// when it''s present, then it''s SafeFrame
if (iframeEl.getAttribute(''src'') !== null) {
src = iframeEl.getAttribute(''src'').replace(/#.*/, "") + src;
} else {
var name = iframeEl.getAttribute(''name'') + "#" + containerId;
iframeEl.setAttribute(''name'', name);
}
iframeEl.setAttribute(''src'', src);
};
setTimeout(timeoutFunction, 10);
});
En segundo lugar, debe agregar este código a su sitio web, mejor como archivo .js separado.
function onMessageReceivedGetStyle(e) {
// this will filter just setStyle commands from correct origin
if (
!(e.origin === ''http://tpc.googlesyndication.com'' || e.origin === ''https://tpc.googlesyndication.com'') ||
typeof e.data !== ''object'' ||
typeof e.data.id !== ''string'' ||
e.data.cmd !== ''setStyle'' ||
typeof e.data.params !== ''object''
) {
return;
}
// remove # character from id, we don''t use jquery
var elementId = e.data.id.replace(/#/, "");
var wrapperEl = document.getElementById(elementId);
if (wrapperEl === null) {
return;
}
var elements = [wrapperEl];
// you can target child elements too with query parameter
if (typeof e.data.query === ''string'' && e.data.query) {
elements = wrapperEl.querySelectorAll(e.data.query);
}
elements.forEach(function (element) {
Object.keys(e.data.params).forEach(function (param) {
element.style[param] = e.data.params[param];
});
});
}
if (window.addEventListener) {
addEventListener(''message'', onMessageReceivedGetStyle, false);
}
else {
if (window.attachEvent) {
attachEvent(''onmessage'', onMessageReceivedGetStyle);
}
else {
window.onmessage = onMessageReceivedGetStyle;
}
}
Y lo tercero es su código personalizado en el tipo personalizado de creatividad en DFP. Aquí hay un ejemplo, que es similar al del primer ejemplo, pero aquí este script puede esperar hasta que se cargue todo el contenido y la imagen, y luego expandirá / reducirá su iframe con creatividad:
<div id="container">
<a href="#" target="_blank">
<img src="%%FILE:JPG1%%">
</a>
<a href="#" target="_blank">
<img src="%%FILE:JPG2%%">
</a>
</div>
<style>
a {
display: block;
margin-bottom: .5em;
}
img {
display: block;
max-width: 100%;
}
*:last-child {
margin-bottom: 0;
}
</style>
<script>
var container = document.getElementById(''container'');
function resizeOutsideSafeFrame() {
if (!window.top.postMessage) {
return false;
}
// get ID of your Ad unit <div> with this creative
var divGptAdId = ''%%PATTERN:url%%'';
if (divGptAdId.indexOf(''#'') !== -1) {
divGptAdId = divGptAdId.split(''#'')[1];
} else {
divGptAdId = window.location.hash;
}
if(!divGptAdId) {
if (window.name.indexOf(''#'') !== -1) {
divGptAdId = window.name.split(''#'')[1];
}
}
if(!divGptAdId) {
return;
}
// set with to fullwidth, and height to height of container inside creative
var width = ''100%'';
var height = container.offsetHeight + ''px'';
// send our request to website
window.top.postMessage({
cmd: ''setStyle'',
id: divGptAdId,
query: ''div, iframe'', // we want to target child div and iframe and don''t change container styles
params: {
display: ''block'',
height: height,
width: width
}
}, ''*'');
}
document.onreadystatechange = function () {
// resize iframe when all is loaded
if (document.readyState == "complete") {
resizeOutsideSafeFrame();
}
};
// first resize must occur little bit later
setTimeout(resizeOutsideSafeFrame, 100);
</script>
Eso es todo. Cuando desee cambiar cualquier elemento de su sitio web desde dentro de iframe, puede codificar su propio cmd en su sitio web y llamar a este comando desde dentro del iframe.