D3.js:在GA中跟踪用户与svg的交互

D3.js:Tracking user interaction with svg in GA

本文关键字:用户 svg 交互 跟踪 js GA D3      更新时间:2023-09-26

我想在点击D3创建的svg圆形元素时触发Google Analytics (ga.js)的事件处理程序。

我想到了这个:

var circlesIndbyggere = d3.select("#ID").selectAll("svg").data(dataset);
circlesIndbyggere
    .enter()
    .append("circle")
    .attr("cx", 50)
    .attr("cy", 150)
    .attr("r", 20)
    .attr("fill", "rgba(35,50,80,0.5)")
    .attr("onClick", "ga('send', 'event', 'button', 'click', 'circle', 4);")

现在,当我用Google Analytics Debugger-ChromeExtension监控控制台时,它似乎没有触发事件?

当在标记中写入ga代码片段时,如下所示:

<a onClick="ga('send', 'event', 'button', 'click', 'arrow', 4);">
    <img src="/"/>
</a> 

我认为最好是像这样听点击声:

.attr...
.on('click', function(node) {
    ga('send', 'event', 'button', 'click', 'circle', 4);
});

优势:

  1. 更好的可读性。JS代码在字符串中看起来很糟糕。
  2. 你可以调试它,不像一个字符串。不会弄脏DOM