如何在已有analytics.js的Universal Analytics网站部署GA4且无需新增代码片段

你可以用gtag.js来整合UA和GA4，这是Google官方的统一标签库，既能兼容原有UA的追踪逻辑，又能同时把数据发送到GA4，而且只需要加载一个脚本，不会额外增加页面加载负担。

替换原有代码的方案 #

直接把你网站上现有的analytics.js代码替换成下面的片段即可：

<!-- 整合UA与GA4的gtag.js代码 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  // 原有UA的测量ID
  gtag('config', 'UA-XXXXXXXXX-X');
  // 新增的GA4测量ID
  gtag('config', 'G-XXXXXXXXXX');
</script>

关键注意事项 #

• 把代码里的UA-XXXXXXXXX-X换成你当前在用的UA ID，G-XXXXXXXXXX换成你的GA4 ID
• 脚本是异步加载的，和原来的analytics.js加载性能完全一致，不会拖慢页面
• 如果你的网站之前有基于analytics.js的自定义事件（比如ga('send', 'event', '按钮', '点击', '提交')），可以直接改成gtag的写法：gtag('event', '点击', { '事件类别': '按钮', '事件标签': '提交' })，统一用gtag能减少代码冗余
• 要是不想完全替换原有analytics.js代码，也可以保留，但必须让gtag.js先加载，两者可以共存，但还是推荐统一用gtag来避免不必要的脚本重复加载

内容的提问来源于stack exchange，提问作者user2274299