需要考虑的一件事是,在页面加载后通过 JavaScript 更改查询参数可能不会对表单字段产生影响;该页面已经加载,Squarespace 自己的代码也已经运行。
然而,还有一些替代方案。
Option 1
无需更改 URL 中的查询参数,而是直接将 URL 中的值插入到隐藏的 Squarespace 表单字段中。为此,请确保 Squarespace 中的隐藏字段的命名方式与 UTM 参数精确对应,唯一的区别是表单字段名称以“SQF_”开头且全部大写。然后,在站点范围的页脚代码注入, add:
<script>
window.Squarespace.onInitialize(Y, function() {
/**
* Get the URL parameters
* source: https://css-tricks.com/snippets/javascript/get-url-variables/
* @param {String} url The URL
* @return {Object} The URL parameters
*/
var getParams = function (url) {
var params = {};
var parser = document.createElement('a');
parser.href = url;
var query = parser.search.substring(1);
var vars = query.split('&');
for (var i=0; i<vars.length; i++) {
var pair = vars[i].split('=');
params[pair[0]] = decodeURIComponent(pair[1]);
}
return params;
};
/**
* Get UTM parameters from the current URL, insert them into correspondingly-named Squarespace form hidden fields.
*/
var params = getParams(window.location.href);
var param;
var paramMatch;
var paramBase;
var formFields;
var i;
for (param in params) {
paramMatch = param.match(/^utm_(.*)/i);
if (!paramMatch) {
continue;
}
paramBase = paramMatch[1];
formFields = document.getElementsByName("SQF_" + paramBase.toUpperCase());
i = formFields.length;
while (i--) {
if (formFields[i]) {
formFields[i].value = params[param];
}
}
}
});
</script>
选项2:
由于您使用的是 UTM 查询参数,因此我假设您的网站使用的是 Google Analytics(“GA”)。如果是这样的话,通过 GA“事件”跟踪表单提交可能会更容易、更清晰。因为 GA 已经知道有关用户的“默认渠道分组”(和其他数据),所以在提交表单时触发自定义事件将允许您在 GA 中查看与用户相关的提交内容和信息。为此,请在表单块的“提交后 HTML”字段中添加一个脚本(在“高级”选项卡下):
If 使用 Google 跟踪代码管理器, enter:
<script>gtag("event", "Submit Form", {event_category:"Contact", event_label:"Contact Page Body"})</script>
否则,如果使用analytics.js enter:
<script>ga("send", "event", "Contact", "Submit Form", "Contact Page Body");</script>
请注意,在上面的示例中,您可以使用任何您想要的“类别”、“操作”和“标签”。我分别使用了“联系人”、“提交表单”和“联系页面正文”,但请使用适合您的任何内容。
提交表单后,您将能够在 GA 中的“行为”>“事件”>“热门事件”下查看该事件。然后,您可以添加“完整引荐来源网址”的“二级维度”,以查看按引荐来源细分的事件。
Option 3
只需将以下内容添加到表单块的“提交后 HTML”字段即可代替上述内容:
<script>window.location.replace("/form-submitted");</script>
然后,在您的网站中,创建新的“表单已提交”页面,根据需要设计和设置感谢信息,并将其放入“未链接”部分。您可能还想将此页面的页面设置设置为对搜索引擎隐藏页面和您的站点地图(在页面设置中的“SEO”下)。
假设只有提交表单的用户才会到达 /form-subscribed 页面(上面的代码在表单提交上创建重定向),然后您可以通过 GA 查看信息(例如引用者和渠道)。这不是我最喜欢的方法(这就是我最后列出它的原因),因为它是另一个故障点并导致用户延迟。
请注意,选项 2 和 3 可能会受益于在GA中设定“目标”转到 GA 中的“管理”,然后“目标”,然后“新目标”。
另请注意,选项 2 和选项 3 依赖 GA 来加载。某些脚本和广告拦截器会阻止 GA,因此使用这些拦截器的用户的数据可能不会显示在 GA 中。选项 1 不依赖 GA。