如何在Google Analytics中跟踪用户在输入中输入的数据？

Question

我需要在Google Analytics中显示用户在字段中输入的值。但我不需要查看该字段的点击次数。请帮帮我。

Answer 1

你可以在这里结合这种方法：How to get text of an input text box during onKeyPress?

发送ga事件。

Answer 2

以编程方式将数据发送到Google

Google有两种主要的分析实现：analytics.js和gtag.js-根据您使用的是哪种，每种记录页面视图的语法都有不同。您也可以记录一个事件。

Analytics.js-page views

ga('send', 'pageview', [page], [fieldsObject]);

Gtag.js-pageviews

gtag('config', 'GA_MEASUREMENT_ID', {
  'page_title' : 'homepage',
  'page_path': '/home'
});

使用JavaScript处理事件

您的用例将确定您要使用哪些事件来触发日志记录。在大多数情况下，处理blur事件是可以的，但是您可能还想处理文本更改然后反跳

防弹跳

这是一个基于discussion and vanilla js implementation of debouncing的underscore：

function debounce(func, wait) {
  var timeoutId;

  return function() {
      var context = this,
          args = arguments;

      clearTimeout(timeoutId);

      timeoutId = setTimeout(function() {
        func.apply(context, args);
      }, wait);  
  };
};

堆栈摘要中的示例

// generate a debounced version with a min time between calls of 2 seconds
let sendPageView = debounce(function() {
    gtag('config', 'GA_MEASUREMENT_ID', {
        'page_title' : 'homepage',
        'page_path': '/home?searchText=' + encodeURI(filter.value)
    });
    console.log("Text: " + filter.value)
}, 2000)

// attach event listener
let filter = document.getElementById("filter")
filter.addEventListener('input', sendPageView)


function debounce(func, wait) {
  var timeoutId;

  return function() {
      var context = this,
          args = arguments;
          
      clearTimeout(timeoutId);
      
      timeoutId = setTimeout(function() {
        func.apply(context, args);
      }, wait);  
  };
};


// fake gtag for demo
gtag = function() {}

<input type="text" id="filter" />