Google remarketing tag - iframe height issue

问题:

I've noticed that Google's remarketing code inserts an iframe at the bottom of my page. The problem is that the iframe messes up my layout (it's 13px high and leaves a blank white vertical space at the bottom).

I've tried to hide it with css but it's still visible in IE9:

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

Therefore I've got two questions:

a) how to hide this iframe in IE9

b) most importantly - is it safe or can it somehow affect the functionality of this script?

回答1:

In my sites i use this code

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

Floating the iframe allows you to use negative margin equal to the height of the body inside the iframe.

回答2:

Other way around (mentioned in the comments above) is to insert the conversion.js script tag into a hidden div:

<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

回答3:

I had the same problem. The good solution was to add a line in the google remarketing tag.

    var google_conversion_format = 3; 

The tag before 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> 

The tag after 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 */  /* ]]> */ 

回答4:

DO NOT USE THOSE OVERLY COMPLICATED ANSWERS. Simply use position:fixed; on that element to take it out of the document flow.

Like this:

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

That's it! You keep all original functionality AND you don't have to worry about API changes.

回答5:

Is there any downside to just setting the iframe to be absolute positioning.

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

less code, no !important's and no display: none

回答6:

Here is my super simple minified solution:

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

I tested and it works in Chrome, FireFox, and IE 10.

There are several ways to hide it of course, but why not have another option.

回答7:

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

回答8:

I added "border: none;" as my site auto inserted a border that showed a colour even when collapsed.

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

回答9:

I just used css to set the height and width to zero. Wrapped the conversion.js file around a div with an id and set its child iframe width and height to 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> 

You can set the style in the main css file.

文章来源: Google remarketing tag - iframe height issue