61

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?

6
  • 1
    You can add and try : html body iframe[name=google_conversion_frame] { visibility:hidden; height:0 !important; }. Aug 27, 2013 at 14:01
  • 1
    Replace your CSS with display:none , does it still display? Aug 27, 2013 at 14:02
  • 1
    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
    – Bart Az.
    Aug 27, 2013 at 14:09
  • 1
    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
    – Bart Az.
    Aug 28, 2013 at 8:01
  • 2
    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 May 30, 2014 at 20:10

9 Answers 9

141

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.

5
  • 2
    Any reason not to just display: none !important? Mar 24, 2014 at 14:04
  • @AnthonyDiSanti because, in my tests, this not remove the 13px height generated by the script inside for all browsers.
    – Simbus82
    Mar 25, 2014 at 14:17
  • Beautiful solution, still works 2017-1-31. Combined with css-tricks.com/findingfixing-unintended-body-overflow that chrome console debugger code to find overflowing elements, a perfect solution, thanks
    – Lizardx
    Feb 1, 2017 at 0:05
  • Is there a reason we're not just using iframe[name="google_conversion_frame"] { display: none; }? Would that break the tracking?
    – doublejosh
    Sep 22, 2017 at 22:58
  • Hiding an iframe is very "hacky". This is needed if a browser has JS disabled, many browsers doesn't run code if is in a hidden iframe.
    – Simbus82
    Sep 25, 2017 at 8:30
31

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
  • 1
    Same solution and confirmation that there are no side-effects was also proposed at stackoverflow.com/questions/11939653/… Mar 16, 2014 at 13:58
  • 5
    This may actually stop some browsers loading the tracking iframe, so I'd suggest testing this across all the common browsers before deploying to a live site.
    – Simon East
    Jul 28, 2014 at 0:37
  • Google do a lot of checking for simulated fake data. I wouldn't be suprised if google filtered out results when the iframe is hidden. There is a reason they put the iframe there.
    – Phil
    Oct 6, 2015 at 8:53
22

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

/* ]]> */

2
  • This worked great. Hopefully google doesn't change anything now.
    – Alkanshel
    Jun 11, 2014 at 19:16
  • Worked on one site for me but not my other site.. What the heck Google?
    – efficient
    May 25, 2016 at 3:27
17

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

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

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
iframe[name="google_conversion_frame"] {
  height: 0;
  padding: 0;
  margin: 0;
  display: block;
}
0

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.