在浏览器中打开新标签页的问题

Question

对于某些交互式图形，我们在 HTML 页面中使用 canvas。在 canvas 中，我们有 "link-like" 控制 link 用户访问外部资源。因为 canvas，我们不使用 <a href=""> 标签，而是通过 JS 代码打开新的浏览器标签，如下所示：

this.pixiLayout.App.renderer.view.addEventListener('click', () => {
    if (this.pixiLayout.externalUrl) {
        window.open(this.pixiLayout.externalUrl, '_blank');
    }
});

问题： Google 分析（前端）向我们显示的点击次数比来自第三方资源的实际 "page views" 分析多得多，最多 10-20 倍。这意味着用户点击了 link（并被 GA 记录），但由于某种原因，link 没有打开，或者打开但没有加载到新选项卡中。我知道 ad/pop-ups 拦截器。对于一定比例的用户来说可能是这种情况。但是90%的用户都不是这种情况，就像我们一样。

而且我们无法在我们拥有的任何设备上重现此行为。

问题：这可能是由正常的浏览器策略或限制引起的，这可能会像我们的情况一样导致新标签被阻止？会不会像我还不知道的 "new feature" 现代浏览器？

Answer 1

好的，问题出在我们自己的代码中。 GA 的事件触发（我们使用自定义事件）是在与实际操作不同的代码位置实现的 - window.open()。他们应该在相同的用户操作 - 用户点击时被调用。但事实并非如此，特别是对于移动设备。当用户点击那个类似 link 的交互式控件并向上或向下移动手指（用于滚动）时，它会触发负责跟踪 "the click" 的自定义事件。但在这种情况下，实际的 "click" 事件并未触发。

结论：永远不要在代码的一个地方执行实际操作，而在另一个地方"collect analytics of that action"。

在浏览器中打开新标签页的问题

Problem with opening new tab in a browser

javascript

html5-canvas

pixi.js