Google remarketing tag - iframe height issue

61
votes

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?

9
cssiframe
You can add and try : html body iframe[name=google_conversion_frame] { visibility:hidden; height:0 !important; }. - Muhammad Talha Akbar
Replace your CSS with display:none , does it still display? - Prasanna Aarthi
I would prefer to avoid messing with visibility or display because I have no idea if the code will still work - kind of a stupid thing but still if anybody finds any confirmed info please type it as an answer and I'll accept it - Az.
the problem is I don't know and I wouldn't like to get banned. After some time of digging I found a solution that seems to work (insert script in a hidden div): keanrichmond.com/google-remarketing-messing-with-my-design.html @Muhammad Talha Akbar and Prasanna Aarthi - you were close so please make an answer of it so we can close this question - Az.
I would avoid the hidden div wrapper workaround, since the tag assistant extension for Google chrome suggests the Code should be placed directly above the closing <body> tag. I think it would work just fine but its best if it fully complies with the API - josethernandezc

9 Answers

141
votes

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.

31
votes

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

22
votes

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

/* ]]> */

17
votes

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.

3
votes

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

2
votes

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.

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

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;
}
0
votes

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.