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.