我试图使用javascript从URL参数'utm_source'提取数据,并将其添加到表单上的字段,以便将其存储在我的联系人数据库中用于跟踪目的。
我以前在另一个网站上完成了这个,但是当我试图重用代码时,它不适合我。
页面在这里(包含要提取的URL参数):
https://members.travisraab.com/country-guitar-clinic-optin-1-1?utm_source=youtube& utm_medium =
描述期望的结果,如果为'traffic_source'字段在我的表单上填充的值从'utm_source' URL参数,在这种情况下'youtube'。
下面是我使用的代码:<script type="text/javascript">
function addSource() {
var fieldToChange = document.getElementsByName("form_submission[custom_4]");
var source = trafficSource();
fieldToChange.value = source;
}
var trafficSource = function() {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == "utm_source"){
return pair[1];
} else if (pair[0] == "gclid") {
return 'google';
}
}
return 'unknown';
}
document.onload = addSource();
</script>
fieldToChange
是一个NodeList,所以如果你想改变value属性,你需要指定索引号
这应该会修复你的代码
fieldToChange[0].value = source;
您可以使用new URLSearchParams(window.location.search)
获取所有查询参数,并使用searchParams.get('utm_source')
获取特定查询参数,然后使用document.getElementById("utmsource").value = param;
将utm_source
的值存储在表单字段中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="utmsource" />
<script>
let searchParams = new URLSearchParams(window.location.search)
let param = searchParams.get('utm_source')
document.getElementById("utmsource").value = param;
</script>
</body>
</html>