如何利用HTML表单输入调用analytics.track()方法？

先梳理你代码里的几个错误：

• 变量声明语法错误：var object { 缺少赋值符号 =，应写成 var object = {
• 对象内部属性结尾错误：最后一个属性不能用分号，需改为逗号（或省略）
• 对象属性访问错误：object[nameVal] 中 nameVal 是字符串键名，未加引号会被当作变量，应改为 object.nameVal 或 object['nameVal']
• analytics.track 的参数对象最后一项不能用分号，需改为逗号（或省略）
• 未阻止表单默认提交行为，会导致页面刷新，可能中断 track 请求

修正后的HTML代码 #

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email"><br>
  <label for="plan">Plan:</label><br>
  <input type="text" id="plan" name="plan"><br>
  <button onclick="submitTrack(event)">Submit</button>
</form>

修正后的JavaScript代码 #

function submitTrack(event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  // 获取表单输入值
  var userData = {
    nameVal: document.getElementById('name').value,
    emailVal: document.getElementById('email').value,
    planVal: document.getElementById('plan').value
  };
  
  // 调用analytics.track
  analytics.track("Signed Up", {
    userId: "1234567890",
    name: userData.nameVal,
    email: userData.emailVal,
    plan: userData.planVal
  });
}

额外优化建议 #

可以直接获取值后传入 track，不需要额外对象，简化代码：

function submitTrack(event) {
  event.preventDefault();
  
  analytics.track("Signed Up", {
    userId: "1234567890",
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    plan: document.getElementById('plan').value
  });
}

内容的提问来源于stack exchange，提问作者alexw04