Google 再营销代码 - iframe 高度问题答案

【问题标题】：Google remarketing tag - iframe height issueGoogle 再营销代码 - iframe 高度问题
【发布时间】：2013-08-27 13:57:56
【问题描述】：

我注意到 Google 的再营销代码在我的页面底部插入了一个 iframe。问题是 iframe 弄乱了我的布局（它的高度为 13 像素，并在底部留下一个空白的垂直空间）。

我尝试用 css 隐藏它，但它在 IE9 中仍然可见：

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

因此我有两个问题：

a) 如何在 IE9 中隐藏这个 iframe

b) 最重要的是 - 它是否安全或会以某种方式影响此脚本的功能？

【问题讨论】：

可以添加试试看：html body iframe[name=google_conversion_frame] { visibility:hidden; height:0 !important; }.
用 display:none 替换你的 CSS，它仍然显示吗？
我宁愿避免弄乱可见性或显示，因为我不知道代码是否仍然有效 - 有点愚蠢，但如果有人找到任何确认的信息，请输入它作为答案并我会接受的
问题是我不知道，我不想被禁止。经过一段时间的挖掘，我找到了一个似乎有效的解决方案（在隐藏的 div 中插入脚本）：keanrichmond.com/google-remarketing-messing-with-my-design.html@Muhammad Talha Akbar 和 Prasanna Aarthi - 你很接近所以请回答它，以便我们可以关闭这个问题
我会避免隐藏的 div 包装解决方法，因为 Google chrome 的标签助手扩展建议使用 Code should be placed directly above the closing <body> tag. 我认为它会工作得很好，但如果它完全符合 API 则最好

标签： css iframe

【解决方案1】：

在我的网站中，我使用此代码

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

浮动 iframe 允许您使用等于 iframe 内主体高度的负边距。

【讨论】：

有什么理由不只是display: none !important？
@AnthonyDiSanti 因为在我的测试中，这不会删除所有浏览器内部脚本生成的 13px 高度。
漂亮的解决方案，2017-1-31 仍然有效。结合css-tricks.com/findingfixing-unintended-body-overflow那个chrome控制台调试器代码查找溢出元素，完美解决，谢谢
我们不只是使用iframe[name="google_conversion_frame"] { display: none; } 有什么原因吗？这会破坏跟踪吗？
隐藏 iframe 非常“hacky”。如果浏览器禁用了 JS，则需要这样做，如果在隐藏的 iframe 中，许多浏览器不会运行代码。

【解决方案2】：

其他方法（在上面的 cmets 中提到）是将 conversion.js 脚本标签插入隐藏的 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

【讨论】：

stackoverflow.com/questions/11939653/…也提出了相同的解决方案并确认没有副作用
这实际上可能会阻止某些浏览器加载跟踪 iframe，因此我建议在部署到实时站点之前在所有常见浏览器上进行测试。
Google 对模拟的虚假数据进行了大量检查。如果在 iframe 隐藏时谷歌过滤掉了结果，我不会感到惊讶。他们把 iframe 放在那里是有原因的。

【解决方案3】：

我遇到了同样的问题。好的解决方案是在 google 再营销标签中添加一行。

    var google_conversion_format = 3;

修改前的标签：

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

修改后的标签：

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

不要使用那些过于复杂的答案。只需在该元素上使用 position:fixed; 即可将其从文档流中移除。

像这样：

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

就是这样！您保留所有原始功能，并且不必担心 API 更改。

【讨论】：

【解决方案5】：

将 iframe 设置为绝对定位有什么缺点吗？

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

更少的代码，没有！重要的，没有显示：无

【讨论】：

【解决方案6】：

这是我的超级简单的缩小解决方案：

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

我测试过，它可以在 Chrome、FireFox 和 IE 10 中运行。

当然有几种方法可以隐藏它，但为什么没有其他选择。

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我添加了“边框：无；”因为我的网站自动插入了一个边框，即使在折叠时也会显示颜色。

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

【讨论】：

【解决方案9】：

我只是使用 css 将高度和宽度设置为零。将conversion.js 文件包裹在一个带有id 的div 周围，并将其子iframe 的宽度和高度设置为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>

您可以在主css文件中设置样式。

【讨论】：