如何将 UTM 参数从 URL 传递到 iframe？答案

【问题标题】：How can I pass UTM parameters from URL to an iframe?如何将 UTM 参数从 URL 传递到 iframe？
【发布时间】：2018-03-12 21:27:58
【问题描述】：

我有一个链接 google adword ：

http://example.com?utm_campaign=Testcam&utm_medium=referral&utm_source=Blog&utm_content=blogers&utm_term=Test
当访问者单击上面的链接导航到我的网站时。然后他提交了一份 Marketo 表单（用于我网站上的登录页面的非 Marketo 表单）。我按照这篇文章在我的网站上创建 Mkto 表单：http://community.marketo.com/MarketoResource?id=kA650000000GsPJCA0 以确保它在提交时会从 url 参数中获取值。
我的问题是：通常，这个表单只是提交到服务器来处理注册。除此之外，当提交此表单时，我还需要将其提交给 Marketo 进行跟踪。因此，Marketo 表单将通过 iframe 提交。

当我提交 marketo 表单时，它将定位到这个 iframe。

所以，我需要将 url 参数传递到 iframe 以确保在提交表单时，隐藏字段会自动从 url 参数中获取值。但是在这个 iframe 上，如你所见，它没有 src。我曾尝试将此添加到 iframe：

$("#mktoformhidden").src = window.location.href;

但效果不好。

这里的 iframe src 应该是什么？

谢谢，

【问题讨论】：

标签： iframe parameters marketo

【解决方案1】：

我会做这样的事情！只需将“URL HERE”替换为您的 iframe 网址，当然还要更新您在两个位置所需的大小。

<noscript>
 <iframe src="YOUR URL HERE" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
</noscript>

<script type="text/javascript">
 var iframeurl = 'YOUR URL HERE';
 var params = window.location.search;
 var thisScript = document.scripts[document.scripts.length - 1];
 var iframe = document.createElement('iframe');

 iframe.setAttribute('src', iframeurl + params);
 iframe.setAttribute('width', '100%');
 iframe.setAttribute('height', 500);
 iframe.setAttribute('type', 'text/html');
 iframe.setAttribute('frameborder', 0);
 iframe.setAttribute('allowTransparency', 'true');
 iframe.style.border = '0';

 thisScript.parentElement.replaceChild(iframe, thisScript);
</script>

【讨论】：

【解决方案2】：

我的猜测是 iframe 不是这里的最佳解决方案。 iframe 可以创建各种跨站点脚本和基于权限的问题。

为什么不直接使用 Marketo 中的新表单功能，以便您可以将表单拖放到目标网页或嵌入您的网站（它们带有嵌入源代码）。

此外，munchkin 跟踪代码会自动获取“查询”参数，以便您可以在智能列表或报告中使用这些参数。

【讨论】：

您的意思是，我将在 Marketo 的一个登录页面中创建 2 个新表单？而且我可以在我的网站中嵌入两个表单的源代码，当第一次提交时，第二个表单将自动提交！
不完全是。新的 Marketo Forms 2.0 为您提供了“嵌入源”代码，因此您无需执行任何 iFrame 内容。您只需将其放在网站上即可。 munchkin 跟踪代码本机获取这些 utm 参数。您可以通过 visit_page 选择中的 query_string 选择来获取这些信息。您还可以通过 ajax 将表单发布添加到您的表单处理程序（*.php 页面或其他）。一种双重形式的帖子。或者您可以让 Marketo 表单触发一个调用表单处理程序的 webhook。

【解决方案3】：

像 sahutchi said 一样，将实际的 Marketo form 嵌入到您的网站中可能是可行的方法。我选择了 iframe 方法来让 Marketo 自动填写基于 mkt_tok 的字段。使用 Marketo 表单可能可以做到这一点，但我在一两个月前无法弄清楚。

以下是您可以将 Marketo 表单与您的网站集成的方式的详细概述：http://www.elixiter.com/marketo-landing-page-and-form-hosting-options/

如果您坚持以 iframe 方式执行此操作，这是我将查询字符串参数传递到嵌入式 iframe 的设置：

这是http://yourdomain.com/my-marketo-page:

<div class="lazy-iframe" data-src="//pages.yourdomain.com/MyMarketoPage.html" style="width: 960px; height: 1000px;">
</div>

在一些共享库中（但你可以将它放在同一个页面上，并稍微简化一下）：

<script>
$(function() {
  var $lazyIframe = $('.lazy-iframe');
  if ($lazyIframe.length) {
    var src = $lazyIframe.attr('data-src');
    if (src) {
      var $iframe = $('<iframe src="' + src + location.search + '"></iframe>');
      $iframe.attr({
        scrolling: 'no',
        frameborder: 0
      });
      $lazyIframe.replaceWith($iframe);
    }
  }
});
</script>

鉴于 pages.yourdomain.com 是您的 Marketo 域的 CNAME。

在我的电子邮件中，我只链接到http://yourdomain.com/my-marketo-page，Marketo 会自动将该电子邮件收件人的mkt_tok 添加到该 URL 的末尾（成为http://yourdomain.com/my-marketo-page?mkt_tok=BLAHBLAHBLAH）。然后使用data-src URL 和附加的所有参数构建 iframe，并且没有滚动或边框（由您决定）。

【讨论】：