Question

根据Mixpanel's documentation on mixpanel.track_links，我可以传入一个选择器（例如他们使用ID）来选择我想要跟踪的链接。我将一些跟踪传递给客户端，并想知道我是否可以将HTML5数据属性用作选择器？

所以赛道事件看起来像这样：

mixpanel.track_links("[data-blah='dude']", "Clicked Data Attribute");

使用document.querySelectorAll可以查询HTML5数据属性，因为不支持IE8＆lt;。

Answer 1

我遇到了同样的问题，似乎你不能。

如果您执行以下操作，可以轻松尝试：

mixpanel.track_links('#existing-id-on-page', '..') => true

该函数将返回true，但如果你这样做：

mixpanel.track_links('#non-existing-id', '..') => undefined

该函数将返回undefined，与使用data-attributes时相同。

令人遗憾的是，我们无法使用数据属性，因此不会为JS中的定位元素制作类...！无论如何，我希望我回答你的问题！

Answer 2

我创建了一个可以识别数据属性的Javascript（带有Jquery）代码：

HTML :(此属性的内容是JSON字符串[EventName，Properties]。警告：它只识别双引号）

<a href="mailto:example@domain.com" data-mp-track='["Contact Click", {"Type" : "Email"}]'>Contact</a>

使用Javascript：

$('a[data-mp-track]').on('click', function(event) {
  var callback, mp_details, new_tab, properties, that;
  that = this;
  new_tab = event.which === 2 || event.metaKey || that.target === '_blank';
  callback = function() {
    if (new_tab) {
      return;
    }
    window.location = that.href;
  };
  mp_details = JSON.parse(that.getAttribute('data-mp-track'));
  if (!new_tab) {
    event.preventDefault();
    setTimeout(callback, 300);
  }
  properties = $.extend(mp_details[1], {
    'Page Title': document.title,
    'URL': window.location.pathname
  });
  mixpanel.track(mp_details[0], properties, callback);
});

从this post获得灵感。

Answer 3

我遇到了类似的问题。需要使用更高级的属性选择器。只要它与 document.querySelectorAll 一起使用，您就可以使用它向这些链接添加一个类，如下所示：

document.querySelectorAll("[data-blah='dude']").forEach(function(foundlink) {
   foundlink.className += " blahdudelink";
});

然后通常的 mixpanel.track_links 调用有效：

mixpanel.track_links(".blahdudelink", "blah dude link click");

我可以将数据属性用作Mixpanel mixpanel.track_links的选择器吗？

3 个答案: