Photo by Mikail McVerry on Unsplash

Google Analytics

How to Add Your Single-Page App (SPA) React Web Application for Google Analytics

Let’s say you’ve built a React project in SPA mode that has a lot of pages. I’ll show you how to connect Google Analytics to keep track of how many people visit each page.

I’ll try to give you a quick rundown of how I added the onurdayibasi.dev site to Google Analytics. This is a site I built with Vite, React, and React Router.

https://onurdayibasi.dev/knowledge-map

If you’re doing SPA rendering in a React app. We try to render all pages under root → div when you navigate to that URL.

<div id="root"></div>

user;

• for SimpleCalculator → application redirect to …/simple-calculator
• for DarkTheme → application redirect to …/dark-theme

URLs and pages like this are created under root on the fly, that is, on the browser when the request is made. Since neither this navigation list nor these pages are on the initial screen, there is no possibility for Google Bots or other SEO bots to find these pages or to learn the status of these pages from Google Analytics.

What we need to do in this case is to add some files under the public folder. Because when we build the project, they will be located under dist folder, and then it’s deployed under main domain.

1. Add the robot.txt file.

First, we’ll add the robot.txt file to the public folder.

User-agent: *
Disallow:

Sitemap: https://onurdayibasi.dev/sitemap.xml

2. Add Sitemap.xml file

Let’s add the sitemap.xml file under the Public folder.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  <url>
    <loc>https://onurdayibasi.dev/</loc>
    <lastmod>2024-09-07</lastmod>
  </url>
</urlset>

But we have a problem here. It is very costly to manually add each routing to this section, instead we need to automate the section, we need to make it so that sitemap.xml can be created automatically during builds.

3. Let’s generate the sitemap.xml file automatically.

Since the onurdayibasi.dev site contains many examples, the routing structure is dynamic, that is, when you go to the relevant page, this page is lazy and the library and codes connected to it are lazy loaded.

There are many …Routes.js files under the routings folder.

Each of these files contains a route definition for the relevant instance.

Let’s go through all the files under the routes folder and try to generate sitemap.xml from the export objects in it.

First, let’s create generate-sitemap.cjs file at the same level as package.json. As we said, this will generate sitemap.xml by navigating the files under the routes directory.

const fs = require('fs');
const path = require('path');

// The base URL of the project and today's date
const baseUrl = 'https://onurdayibasi.dev';
const today = new Date().toISOString().split('T')[0];

// Regular expression to match the date format YYYY.MM.DD
const dateRegex = /^\d{4}\.\d{2}\.\d{2}$/;

// Read all files in the routes folder
const routesDir = path.join(__dirname, 'src', 'routings');

// Sitemap headers
let sitemap = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n`;

// Add the home page
sitemap += `
  <url>
    <loc>${baseUrl}/</loc>
    <lastmod>${today}</lastmod>
  </url>\n`;

// Scan all *Routes.js files in the folder using dynamic import
(async () => {
  const files = fs.readdirSync(routesDir);

  for (const file of files) {
    if (file.endsWith('Routes.js')) {
      // Load the ES Module file using dynamic import
      const routeModule = await import(path.join(routesDir, file));

      // Access the key that contains the exported object
      const routes = Object.values(routeModule)[0]; // Get the first exported object

      // Read all JSON data in the file and add it to the sitemap
      Object.values(routes).forEach((route) => {
        // Check if the publishDate format is correct
        if (!dateRegex.test(route.publishDate)) {
          console.log(`Invalid publishDate format in route: ${route.path}`);
        } else {
          sitemap += `
  <url>
    <loc>${baseUrl}${route.path}</loc>
    <lastmod>${route.publishDate}</lastmod>
  </url>\n`;
        }
      });
    }
  }

  // Sitemap closing tag
  sitemap += '</urlset>';

  // Create the sitemap.xml file
  fs.writeFileSync(path.join(__dirname, 'public', 'sitemap.xml'), sitemap);

  console.log('sitemap.xml successfully created!');
})();

Then let’s add the command to run this code in the script section in package.json.

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "format": "npx prettier . --write",
    "generate:sitemap": "node generate-sitemap.cjs"
  },

Now when we open a terminal and run the following command, the sitemap.xml file is created automatically.

npm generate:sitemap

4. Settings for the Google Analytics section.

• Set up a property in the Google Analytics area.
• Set up an account under the Google Analytics area.
• Google Analytics will prompt you to construct the specified key string in React Project.

The Vite project does not include an index.html file similar to the one in CRA (Webpack). In this case, after downloading the following npm package

npm i react-ga4

You need to initialize the key line you get from Google Analytics in main.js in your React project.

import ReactGA from "react-ga4";

ReactGA.initialize("your GA measurement id");

Once you have done all this and built and deployed your project, you can now ask Google Analytics to validate it.

After an estimated 48 hours, Google Analytics will crawl all your pages and generate the analytical data you want for you.

On the left, all pages and sub-page breakdowns will start to be displayed along with analytics data.

Continue reading 😃.

Click on this link to continue reading this article or to view other articles in this group.