css example Etiqueta de remarketing de Google: problema de altura del iframe




iframe width (9)

Me di cuenta de que el código de remarketing de Google inserta un iframe en la parte inferior de mi página. El problema es que el iframe arruina mi diseño (tiene 13 px de alto y deja un espacio vertical blanco en blanco en la parte inferior).

Intenté ocultarlo con CSS, pero sigue siendo visible en IE9:

iframe[name='google_conversion_frame'] { 
    height: 0 !important; 
    line-height: 0 !important; 
    font-size: 0 !important; 
}

Por lo tanto, tengo dos preguntas:

a) cómo ocultar este iframe en IE9

b) lo más importante: ¿es seguro o puede de alguna manera afectar la funcionalidad de este script?

https://code.i-harness.com


¿Hay algún inconveniente en establecer el iframe como posicionamiento absoluto?

iframe[name='google_conversion_frame'] {
    position: absolute;     
    bottom: 0;
}

menos código, no! importante y sin pantalla: ninguno


Acabo de usar css para establecer el alto y el ancho a cero. Envolvió el archivo conversion.js alrededor de un div con un id y configuró el ancho y alto del iframe secundario en 0.

<div id="googleiframe">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
</div>
<style type="text/css">
#googleiframe iframe{height:0;width:0;}
 </style>

Puede establecer el estilo en el archivo css principal.


Agregué "border: none" como mi sitio auto insertó un borde que mostraba un color incluso cuando se colapsó.

/* Hide AdWords Remarketing iFrame */
iframe[name="google_conversion_frame"] {
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  display: block;
}


Aquí está mi solución minúscula simplificada:

/* Hide AdWords Remarketing iFrame */
iframe[name="google_conversion_frame"]{display:block; height:0;}

Probé y funciona en Chrome, Firefox e IE 10.

Hay varias formas de ocultarlo, por supuesto, pero ¿por qué no tener otra opción?


En mis sitios, uso este código

iframe[name='google_conversion_frame'] { 
    height: 0 !important;
    width: 0 !important; 
    line-height: 0 !important; 
    font-size: 0 !important;
    margin-top: -13px;
    float: left;
}

La flotación del iframe le permite usar un margen negativo igual a la altura del cuerpo dentro del iframe.


NO USE ESAS RESPUESTAS COMPLICADAS TOTALMENTE. Simplemente use la position:fixed; en ese elemento para sacarlo del flujo de documentos.

Me gusta esto:

iframe[name="google_conversion_frame"]{
    position:fixed;
}

¡Eso es! Mantiene toda la funcionalidad original Y no tiene que preocuparse por los cambios de API.



Yo tuve el mismo problema. La buena solución fue agregar una línea en la etiqueta de remarketing de Google.

    var google_conversion_format = 3;

La etiqueta antes de la modificación:

<!-- Code Google de la balise de remarketing -->
<script type="text/javascript">/* 
<![CDATA[ */
var google_conversion_id = 10xxxxxxxx;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
<noscript><div style="display:inline;"><img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/10xxxxxxxx/?value=0&amp;guid=ON&amp;script=0"/></div></noscript>

La etiqueta después de la modificación:

<!-- Code Google de la balise de remarketing -->
<script type="text/javascript">/* 
<![CDATA[ */
var google_conversion_id = 10xxxxxxxx;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;

var google_conversion_format = 3; /* ADD THIS LINE TO RESOLVE YOUR PROBLEM */

/* ]]> */


iframe[name="google_conversion_frame"] {
  height: 0;
  padding: 0;
  margin: 0;
  display: block;
}




iframe