Google 再营销代码 - iframe 高度问题
Posted
技术标签:
【中文标题】Google 再营销代码 - iframe 高度问题【英文标题】：Google remarketing tag - iframe height issue 【发布时间】：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 则最好
【参考方案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
【讨论】：
***.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 style="border-style:none;" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/10xxxxxxxx/?value=0&guid=ON&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 iframeheight:0;width:0;
</style>
您可以在主css文件中设置样式。
【讨论】：
以上是关于Google 再营销代码 - iframe 高度问题的主要内容，如果未能解决你的问题，请参考以下文章