GA4页面流量聚合问题排查及自定义标题解决方法

我在自己的网站应用里配置GA4后，发现控制台里所有流量都被统计到同一个页面下。排查后找到了问题根源：项目的boilerplate.ejs模板的<head>标签里写死了固定的<title>，而所有页面都通过这个模板渲染，GA4依赖页面标题来区分不同页面的访问行为，所以所有浏览都被判定为同一页面的访问。

原代码情况 #

Boilerplate.ejs 模板代码 #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to my app!</title>
</head>

<body>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() { dataLayer.push(arguments); }
            gtag('js', new Date());

            gtag('config', 'G-XXXXXXXXX');
        </script>
</body>

子页面顶部代码 #

所有页面都通过以下方式引用模板：

<% layout('layouts/boilerplate')%>

我之前还考虑过能不能让GA4直接通过页面的<h1>/<h2>这类标题标签来识别不同页面，不过最终我采用了以下方法解决问题：

解决方法 #

步骤1：将<title>移到每个页面的标题元素内 #

把模板里的固定<title>删掉，在每个页面的标题（比如<h1>）里添加专属的<title>标签，示例如下：

<div class="row">
    <h1 class="text-center"><title>Pricing</title></h1>
</div>

步骤2：在模板中添加动态设置标题的脚本 #

在boilerplate.ejs的<body>里加入以下脚本，页面加载时动态提取并设置浏览器标题：

<script> 
    window.onload = setPageTitle;
    function setPageTitle() {
        const newPageTitle = document.querySelector('title').textContent;
        document.title = newPageTitle;
    }
</script>

注：原尝试的document.onLoad写法有误，应该用window.onload，并且必须将获取到的标题赋值给document.title，才能真正让GA4识别到不同页面，同时更新浏览器标签页的显示文本。

这样修改后，每个页面会拥有独立的标题，GA4就能正确区分不同页面的流量数据了。

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