如何跟踪 Squarespace 表单提交中的 UTM 数据
How to track UTM data in Squarespace form submissions
我见过很多关于更改参数值的最简单方法的问题,但没有关于如何更改参数本身的问题。
例如:
example.com/?utm_campaign=1&utm_source=2
会变成:
example.com/?SQF_CAMPAIGN=1&SQF_SOURCE=2
我试过修改这个 previous solution 但我不太明白它是如何工作的:
<script>
var url = $('.mylink').attr('href')
url = url.replace('utm_', 'sqf_')
$('.mylink').attr('href', url)
</script>
如果您对我这样做的原因感到好奇,Squarespace forms 只接受 URL 以 "SQF_" 开头的参数,而 Google Analytics 只接受 "utm_" 参数。进行此更改后,当有人使用表单联系我们时,我们可以通过我们的 link 属性。
您提供的代码获取具有 mylink
class 的锚点的 link(href)。
在 link 中,您将第一次出现的 'utm_' 替换为 'sqf_'。
然后用新的 link.
替换锚点的 link(href)
为了改变所有出现的 'utm_',我使用了正则表达式 /utm_/g
。
我添加了一个片段来说明:
$(document).ready(function(){
// Gets current href of element with class mylink
var url = $('.mylink').attr('href')
// Replace all occurences of utm_ with sqf_
url = url.replace(/utm_/g, 'sqf_')
// Replaces the old href with the new one on the anchor
$('.mylink').attr('href', url)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="example.com/?utm_campaign=1&utm_source=2" class="mylink">Link</a>
需要考虑的一件事是,在页面加载后通过 JavaScript 更改查询参数可能不会对表单字段产生影响;该页面将已经加载并且 Squarespace 自己的代码将已经 运行.
然而,还有一些选择。
选项 1
不要更改 URL 中的查询参数,而是直接将 URL 中的值插入到隐藏的 Squarespace 表单字段中。为此,请确保 Squarespace 中的隐藏字段以与 UTM 参数精确对应的方式命名,唯一的区别是表单字段名称以 "SQF_" 开头且全部大写。然后,在 site-wide footer code injection 下,添加:
<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 "events" 跟踪表单提交可能会更容易、更清晰。因为 GA 已经知道用户的 "default channel grouping"(和其他数据),所以在提交表单时触发自定义事件将允许您在 GA 中查看与用户相关的提交和信息。为此,请在表单块的 "Post-Submit HTML" 字段中添加一个脚本(在 "Advanced" 选项卡下):
如果using Google Tag Manager,输入:
<script>gtag("event", "Submit Form", {event_category:"Contact", event_label:"Contact Page Body"})</script>
否则,if using analytics.js输入:
<script>ga("send", "event", "Contact", "Submit Form", "Contact Page Body");</script>
请注意,在上面的示例中,您可以为 "category"、"action" 和 "label" 使用任何您想要的内容。我分别使用了 "Contact"、"Submit Form" 和 "Contact Page Body",但请使用适合您的任何内容。
提交表单后,您将能够在 "Behavior" > "Events" > "Top Events" 下在 GA 中看到该事件。然后,您可以添加 "Secondary dimension of "Full Referrer" 以查看按引用源细分的事件。
选项 3
代替上面的,只需将以下内容添加到表单块的 "Post-Submit HTML" 字段:
<script>window.location.replace("/form-submitted");</script>
然后,在您的网站中,创建新的 "Form Submitted" 页面,根据需要设计和设置它,并附上感谢信息,并将其放入您的 "Not Linked" 部分。您可能还想将此页面的页面设置设置为 hide the page from search engines 和您的站点地图(在页面设置中的 "SEO" 下)。
假设只有提交表单的用户会到达 /form-submitted 页面(上面的代码在表单提交时创建了一个重定向),然后您可以通过 GA 查看信息(例如 referrer 和 channel)。这不是我最喜欢的方法(这就是为什么我把它列在最后),因为它是另一个失败点并且会导致用户延迟。
请注意,选项 2 和 3 可能会受益于 setting up a "Goal" in GA,方法是在 GA 中转到 "Admin",然后是 "Goals",然后是 "New Goal"。
另请注意,选项 2 和 3 依赖 GA 加载。某些脚本和广告拦截器会阻止 GA,因此使用这些拦截器的用户的数据可能不会显示在 GA 中。方案一不依赖GA.
我见过很多关于更改参数值的最简单方法的问题,但没有关于如何更改参数本身的问题。
例如:
example.com/?utm_campaign=1&utm_source=2
会变成:
example.com/?SQF_CAMPAIGN=1&SQF_SOURCE=2
我试过修改这个 previous solution 但我不太明白它是如何工作的:
<script>
var url = $('.mylink').attr('href')
url = url.replace('utm_', 'sqf_')
$('.mylink').attr('href', url)
</script>
如果您对我这样做的原因感到好奇,Squarespace forms 只接受 URL 以 "SQF_" 开头的参数,而 Google Analytics 只接受 "utm_" 参数。进行此更改后,当有人使用表单联系我们时,我们可以通过我们的 link 属性。
您提供的代码获取具有 mylink
class 的锚点的 link(href)。
在 link 中,您将第一次出现的 'utm_' 替换为 'sqf_'。
然后用新的 link.
为了改变所有出现的 'utm_',我使用了正则表达式 /utm_/g
。
我添加了一个片段来说明:
$(document).ready(function(){
// Gets current href of element with class mylink
var url = $('.mylink').attr('href')
// Replace all occurences of utm_ with sqf_
url = url.replace(/utm_/g, 'sqf_')
// Replaces the old href with the new one on the anchor
$('.mylink').attr('href', url)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="example.com/?utm_campaign=1&utm_source=2" class="mylink">Link</a>
需要考虑的一件事是,在页面加载后通过 JavaScript 更改查询参数可能不会对表单字段产生影响;该页面将已经加载并且 Squarespace 自己的代码将已经 运行.
然而,还有一些选择。
选项 1
不要更改 URL 中的查询参数,而是直接将 URL 中的值插入到隐藏的 Squarespace 表单字段中。为此,请确保 Squarespace 中的隐藏字段以与 UTM 参数精确对应的方式命名,唯一的区别是表单字段名称以 "SQF_" 开头且全部大写。然后,在 site-wide footer code injection 下,添加:
<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 "events" 跟踪表单提交可能会更容易、更清晰。因为 GA 已经知道用户的 "default channel grouping"(和其他数据),所以在提交表单时触发自定义事件将允许您在 GA 中查看与用户相关的提交和信息。为此,请在表单块的 "Post-Submit HTML" 字段中添加一个脚本(在 "Advanced" 选项卡下):
如果using Google Tag Manager,输入:
<script>gtag("event", "Submit Form", {event_category:"Contact", event_label:"Contact Page Body"})</script>
否则,if using analytics.js输入:
<script>ga("send", "event", "Contact", "Submit Form", "Contact Page Body");</script>
请注意,在上面的示例中,您可以为 "category"、"action" 和 "label" 使用任何您想要的内容。我分别使用了 "Contact"、"Submit Form" 和 "Contact Page Body",但请使用适合您的任何内容。
提交表单后,您将能够在 "Behavior" > "Events" > "Top Events" 下在 GA 中看到该事件。然后,您可以添加 "Secondary dimension of "Full Referrer" 以查看按引用源细分的事件。
选项 3
代替上面的,只需将以下内容添加到表单块的 "Post-Submit HTML" 字段:
<script>window.location.replace("/form-submitted");</script>
然后,在您的网站中,创建新的 "Form Submitted" 页面,根据需要设计和设置它,并附上感谢信息,并将其放入您的 "Not Linked" 部分。您可能还想将此页面的页面设置设置为 hide the page from search engines 和您的站点地图(在页面设置中的 "SEO" 下)。
假设只有提交表单的用户会到达 /form-submitted 页面(上面的代码在表单提交时创建了一个重定向),然后您可以通过 GA 查看信息(例如 referrer 和 channel)。这不是我最喜欢的方法(这就是为什么我把它列在最后),因为它是另一个失败点并且会导致用户延迟。
请注意,选项 2 和 3 可能会受益于 setting up a "Goal" in GA,方法是在 GA 中转到 "Admin",然后是 "Goals",然后是 "New Goal"。
另请注意,选项 2 和 3 依赖 GA 加载。某些脚本和广告拦截器会阻止 GA,因此使用这些拦截器的用户的数据可能不会显示在 GA 中。方案一不依赖GA.