Tracking Website Traffic With Google Analytics
Shanmathy Prabakaran - Full Stack Developer at MuleCraft

Tracking Website Traffic With Google Analytics

MuleCraft Digital MuleCraft Digital

MuleCraft Digital

An IT startup, that transforms data into powerful connections. We value efforts and uplift talents.

发布日期: 2023年9月28日
+ 关注

In today's digital age, understanding how users interact with your website is crucial for making informed decisions and optimizing user experiences. Google Analytics is a powerful tool that provides valuable insights into website traffic, user behavior, and more. In this blog, we'll walk through the process of integrating Google Analytics into a React web application, collecting pageview data, and displaying it on the website. Let's harness the power of data to enhance our web presence.

Create a Google Analytics Account

  1. Go to the Google Analytics webpage and sign in with your Google account.
  2. Click on "Start measuring" and follow the prompts to create an Analytics property for your website.
  3. Once your property is set up, you'll receive a Tracking ID (something like G-XXXXXXXXX). It is the Measurement ID of our property and we need to use it in our website's code, if we need to collect data.
  4. If you are not using Google Tag manager, then you have to include a code snippet in your HTML files, immediately next to your <head> tag. If your website has more than one HTML file, then you have to include this code in each of those files.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={MEASUREMENT_ID}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', {MEASUREMENT_ID});
</script>

Once you have added this code, the Data flow will start within less than 48 hours.

Data Flow is active

Install React-GA

React-GA is a library that simplifies the integration of Google Analytics with React applications. To install it, open your terminal and run the following command. 

npm install react-ga

Import React-GA in Your App

In your React project, import React-GA at the top of your main app file (usually App.js or index.js). 

import ReactGA from 'react-ga';

领英推荐

Initialize React-GA

Initialize React-GA with your Tracking ID. Add the following code before your app's render() function. 

ReactGA.initialize('G-XXXXXXXXX');
// Replace it with your Tracking ID

Track Page Views

To track page views, add the following code in your components or route handlers, specifying the page title. 

ReactGA.pageview(window.location.pathname + window.location.search);

To display the collected pageview data on your React website, you can create a component that fetches the data from Google Analytics using the Google Analytics Reporting API and then renders it on your web page.

Sample Code

import React, { useEffect, useState } from 'react';
import ReactGA from 'react-ga';

function App() {
  useEffect(() => {
    // Initialize Google Analytics with your Measurement ID
    ReactGA.initialize('YOUR_MEASUREMENT_ID');

    // Fetch the initial pageview count
    ReactGA.pageview(window.location.pathname + window.location.search);
  }, []);

  // State to store the pageview count
  const [pageviews, setPageviews] = useState(null);

  useEffect(() => {
    // Fetch the pageview count data
    ReactGA.event({
      category: 'Pageviews',
      action: 'Fetch Pageviews',
    });

    // Set the pageview count in state
    ReactGA.event({
      category: 'Pageviews',
      action: 'Pageviews Fetched',
      label: pageviews => setPageviews(pageviews),
    });
  }, []);

  return (
    <div className="App">
      <h1>Pageview Count: {pageviews}</h1>
      {/* Your other components */}
    </div>
  );
}

export default App;
Realtime Data Overview

Note: To access data from Google Analytics API, you need to create proper access token for authorization. Refer to Google Docs for detailed approach on creating API access token.

Digitalize Your Data

By following these steps, you can effortlessly integrate Google Analytics into your React web application. This integration provides valuable insights into your website's performance, user behavior, and more. Understanding your audience better enables you to make data-driven decisions to enhance your website's content, design, and overall user experience. With Google Analytics and React, you're well-equipped to optimize your web presence and achieve your digital goals. Happy tracking!


要查看或添加评论，请登录

MuleCraft Digital的更多文章

社区洞察

其他会员也浏览了