Search code examples
javascriptgoogle-analyticsheader

All GA4 page titles showing the same using bootstrap boilerplate

I setup GA4 on my website and application but all the traffic is aggregating to the same page in my GA4 dashboard.

I believe this is because I have a title tag in the head of my boilerplate.ejs template which I render on every page on the app, so even if visitors click around the site GA4 interprets all the views taking place on the same page.

Changing the title changes the text in the tab header in the users browser.

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>

Top code of all subsequent pages

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

Is there a way to get GA to recognize pages by section heading elements instead of the title? (eg., the text from the top h1/h2/h3/etc).

Adding answer after comment from user

I had to pull my title tag out of the boilerplate template and add it around the H1 of each page I wanted to tile. Example:

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

Then I also added the below script to the body of my boilerplate template:

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

Hopefully that helps anyone experiencing a similar issue!

Solution

  • normally, you don't use page titles to recognize pages. You use URLs.

    Go to your site, open the Network tab or use a plugin like this, make sure you really fire page views on every SPA navigation and it's not just the first page.

    Now compare those calls, see what's different in them. Use the dimension that indicates the difference in your reports to differentiate.

    Also, not changing your titles (and URLs) is probably one of the worst mistakes one can make SEO-wise.