web-dev-qa-db-fra.com

Balise de remarketing Google: problème de hauteur d'iframe

J'ai remarqué que le code de remarketing de Google insère un iframe au bas de ma page. Le problème est que l'iframe gâche ma mise en page (sa hauteur est de 13 pixels et laisse un espace vertical blanc en bas).

J'ai essayé de le cacher avec css mais c'est toujours visible dans IE9:

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

J'ai donc deux questions:

a) comment cacher cette iframe dans IE9

b) plus important encore - est-il sécurisé ou peut-il en quelque sorte affecter la fonctionnalité de ce script?

cssiframe
61
Az.

J'utilise ce code sur mes sites

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

Flottant l'iframe vous permet d'utiliser une marge négative égale à la hauteur du corps à l'intérieur de l'iframe. 

140
Simbus82

Une autre solution (mentionnée dans les commentaires ci-dessus) consiste à insérer la balise de script conversion.js dans un div masqué:

<div style="display: none">
    <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">  </script>
</div>

src: http://keanrichmond.com/google-remarketing-messing-with-my-design.html

31
Az.

J'ai eu le même problème. La bonne solution consistait à ajouter une ligne dans la balise de remarketing de Google.

    var google_conversion_format = 3;

Le tag avant modification:

<!-- 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>

Le tag après modification:

<!-- 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 */

/* ]]> */

22
CCreative

N'UTILISEZ PAS CES RÉPONSES COMPLIQUÉES. Utilisez simplement position:fixed; sur cet élément pour le sortir du flux de documents.

Comme ça:

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

C'est tout! Vous conservez toutes les fonctionnalités d'origine ET vous n'avez pas à vous soucier des modifications de l'API.

17
ExcellentSP

Existe-t-il des inconvénients à ce que le réglage de l’iframe soit un positionnement absolu?.

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

moins de code, non! important et pas d'affichage: aucun

3
timtom

Voici ma solution minified super simple:

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

J'ai testé et cela fonctionne dans Chrome, FireFox et IE 10.

Bien sûr, il y a plusieurs façons de le cacher, mais pourquoi ne pas avoir une autre option?.

2
Daniel

J'ai ajouté "border: none;" comme mon site auto inséré une bordure qui a montré une couleur, même lorsqu'il est réduit.

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

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

Je viens d'utiliser css pour régler la hauteur et la largeur à zéro. Enveloppé le fichier conversion.js autour d'un div avec un ID et définissez la largeur et la hauteur de son enfant iframe sur 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>

Vous pouvez définir le style dans le fichier css principal.

0
carrieat