如何在gtag.js中无需后台配置追踪单页网站按钮点击？

我刚好处理过类似的SPA追踪场景，完全可以直接复刻你旧版Legacy Analytics的效果，而且不需要在Analytics管理面板做任何额外配置，直接用gtag.js的内置方法就能搞定。

直接替换的内联代码 #

把你原来的onclick代码换成下面的gtag版本就行，和旧代码功能完全一致：

<button onclick="gtag('config', '你的GA跟踪ID', { page_path: '/index#aboutus' });">
  关于我们
</button>

如果你想更明确地触发页面浏览事件（效果没区别），也可以用这种写法：

<button onclick="gtag('event', 'page_view', { page_path: '/index#aboutus' });">
  关于我们
</button>

原理说明 #

旧版的_gaq.push(['_trackPageview', '/index#aboutus'])本质是向GA发送一条自定义路径的页面浏览数据，而gtag.js的这两种写法都是直接实现这个逻辑：

• gtag('config', ...)：当指定page_path参数时，会自动发送一条带有该路径的pageview（前提是你已经在页面全局初始化过gtag）
• gtag('event', 'page_view', ...)：直接触发页面浏览事件，把自定义路径传递给GA

两种方式都不需要在GA后台配置任何目标、自定义维度或其他设置，数据会直接出现在你的页面浏览统计报告里。

优化建议（可选） #

如果你的项目更注重代码的可维护性，建议把点击事件抽离成独立的JS函数，而不是用内联onclick，比如：

// 单独的JS文件或脚本块中
function trackAboutUsClick() {
  gtag('config', '你的GA跟踪ID', { page_path: '/index#aboutus' });
}

// 按钮HTML
<button id="about-us-btn">关于我们</button>

// 绑定点击事件
document.getElementById('about-us-btn').addEventListener('click', trackAboutUsClick);

这样无论是后续修改追踪路径还是扩展逻辑，都会更方便。

内容的提问来源于stack exchange，提问作者Marco Vinicius Castellari