是否可以使用Google Analytics来衡量动态表单的使用情况?

时间:2016-10-27 00:07:54

标签: javascript forms google-analytics

我们开发了一个基于Web的应用程序,用户可以将科学数据输入动态表单,并在表单输入更改时动态生成结果。

由于表单是动态的,因此用户可以在不重新加载页面的情况下花费很多分钟。

我们的客户想知道每个用户对表单进行了多少调整,以衡量使用情况和参与度。

我们已经有一个Javascript计数器,用于记录对表单所做的更改次数。

他们还询问我们是否可以测量已更改的字段数(我们可以通过Javascript进行测量)。

是否可以在Google Analytics中记录动态表单的使用情况?什么是最好的方法/方法?

2 个答案:

答案 0 :(得分:1)

是的,如果你可以在每次更改时添加一些Javascript吗?

如果您碰巧使用Google跟踪代码管理器,您可以将事件对象推送到dataLayer并侦听这些对象,然后触发您的GA事件代码。

如果您没有GTM,那么只要发生变化,您就会对GA事件进行硬编码。

除非您无法对每次活动​​发送的Javascript发表任何意见?

Google-Tag-Manager(GTM)活动示例:

dataLayer.push({
    'event': 'form_change',
    'eventCategory': 'forms',
    'eventAction': [e.g. form name e.g. newsletter sign up],
    'eventLabel': [type of change e.g. field value after change]
})

然后,您可以告诉GTM倾听有价值的自定义事件' form_change'。

是否可以访问相关网站进行查看?有链接吗?

答案 1 :(得分:0)

您可以使用onclickonchange触发器事件向GA发送上下文更改事件。我发现使用辅助函数来实现这一点很有用。

此函数应放在<head>中,应填充相关的表单名称和上下文(this)。

<script>
// helper function to trigger a Data Layer Form Event
analyticsForm = function(f, el) {
  var formName = f;
  var elName = el.name || el.id || el.type;
  var category = 'interaction';
  var action = 'form: ' + formName;
  var label = elName + ':' + el.type;

  // GA method of sending the event
  ga('send', 'event', category, action, label);

  // GTM method of sending the event
  window.dataLayer.push({
    'event': 'event',
    'category': category,
    'action': action,
    'label': label
  });
}
</script>

在页面内代码中,analyticsForm函数可以以传统形式(包括单选按钮或复选框)调用每个字段onchange,如下所示:

<form>
  <input type="text" name="field1Name" onchange="analyticsForm('formName', this)">
  <input type="text" name="field2Name" onchange="analyticsForm('formName', this)">
  <select name="field3Name" onchange="analyticsForm('formName', this)">
    <option value=""> </option>
    <option value="A">A </option>
    <option value="B">B </option>
    <option value="C">C </option>
  </select>
  <input type="checkbox" name="agree" value="false" class="checkbox" onclick="analyticsForm('formName', this)">
</form>

在上面的示例中,每次更改文本字段或选择字段或单击复选框或单选按钮时,将调用具有以下结构的事件:

  • 类别:表格
  • 行动:{{form name}}
  • 标签:{{element name/id}}{{element type}}