DEV Community: Basile

Google Analytics on React.js Components

Basile — Wed, 05 May 2021 14:37:58 +0000

Intro

Struggling to use Google Analytics on a React-app?
Do you only get data on the landing page of your app, instead of every page?

This article will be about how to fix this problem!

The issue:

Google Analytics (GA) sends a pageview per page load, this means that if you would go on a certain page on your website, it requests that page from the server and loads it for the user. That is what GA records and sends as data.

(This is in the case of a simple page view, page-events will not be discussed here!)

And this is also what is the issue when trying to use GA on a React-app (or any single-page applications). React will load the whole app at once and switch components directly on the browser side.

GA doesn't see this as a new page-load as it doesn't actually load a new page, but as a reload of the same page.

A solution:

There have been different kinds of solutions to this problem, but when I went looking for one I found it confusing to find a clear and up-to-date solution. So here I am, sharing my own recommendation!

The idea would be that, as GA recognizes the page reload of the root URL (yourwebsite.com/path/to/page) but not the URI (That is the part after the root: yourwebsite.com/path/to/page), the trick would be to make it check that URI everytime it reloads. And send that as the whole location of the page.

This solution requires you to use those dependencies:

react-router-dom and react-ga

npm -i react-router-dom react-ga --save
or
yarn add react-router-dom react-ga --save

Create a file in your source folder and give it a name like useGaTracker.js or something, you can name it however you want though.

STEP 1

Go get your UA tracking code on GA.

If you already have created your GA property, you can find that code like this:

Go to Admin
Select the property you are using - and click on Property Settings
Copy your Tracking ID (should start with UA-xxxxxxx-x)

STEP 2

Import { useEffect, useState } from react; { useLocation } from react-router-dom and ReactGA from react-ga inside the useGaTracker.js file.

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

STEP 3

Let's wright the function:

const useGaTracker = () => {
    const location = useLocation();
    const [initialized, setInitialized] = useState(false);

    useEffect(() => {
        if (!window.location.href.includes("localhost")) {
        ReactGA.initialize("UA-xxxxxxxxx-x");
        }
        setInitialized(true);
    }, []);

    useEffect(() => {
        if (initialized) {
        ReactGA.pageview(location.pathname + location.search);
        }
    }, [initialized, location]);
};

export default useGaTracker;

useLocation() is what we will use to get our routing as location.

The first useEffect() will check if your project is running on a localhost, if not, it will initialize your Tracking ID in the ReactGA and set the state initialized to TRUE.

The Second useEffect() will send the pageview to GA with it's location.

This one will also know to send that information each time initialized or location has changed.

STEP 4

Import this function into our routing file.

Go to the file that you use to route your components, and add your function in the router-component (in my case this would be my app.js file:

App.js

import { Route, Switch, Redirect } from 'react-router-dom'
import useGaTracker from './useGaTracker'

const App = () => {

  useGaTracker();

  return (
    <div className="App">
       <Switch>
          <Route path="/" exact component={ Landing } /> 

          <Route path="/about" exact component={ About } />
          <Route path="/discord" exact component={ Discord } />

          <Route path="/404" component={ Error } />
          <Redirect to="/404" />
       </Switch>
    </div>
  );
}

export default App;

Finally

That's about it!

You should have a working connection that will save and send all the different routes you use in your routing file!

Basile&Code

Choosing a Framework in Node.js

Basile — Sat, 10 Apr 2021 14:44:26 +0000

Intro

Today, I will be writing about my findings on using frameworks in
a Node.js project as a beginner.

I can only assume that every person that started coding, has been confronted with this situation...
Where you want to achieve a certain feature or use a certain structure to ease the process when working on a project.

This post will be about my finding in this kind of situation.

1. What do you want to do?

First question to ask yourself would be what kind of features you want to have. In order to install the right framework, you will need to look for the feature you need, and the features the package will provide.

Some packages are specific to certain other frameworks or maybe even to certain database managers, etc ...

Let's give an example:

Vuetify Vuetify is a framework that helps making better ui components when using Vue as framework. Which means that it would not be of much use when you would be working with another type of frameworks like Reactjs or Svelte.

1.2 examples of popular frameworks to use:

When working on a Javascript project it is a popular thing to do to install both a front-end framework (which will be about the components of your website and the interface), and a back-end framework to support the server functionality of that project.

A example would be: React.js and Express.js
React.js

A React-app will provide you with a ready to use package. Which will save you a lot of time.

Express.js

On the other side, Express will be taking care of the server. like connecting an Api, Using a register/login system (can also be a framework on its own), etc...

In both parts of the project you can install specific dependencies to use. Those will be stored inside package.json files. But we will come back to that later on!

Just remember that we can use a lot of different frameworks inside a project, and even have it separated between different parts of a project, like the "front-end" part and the "back-end" part!

But let's continue...

2. Deprecated or not?

Let's assume that we found a framework that fits our needs for our project... It is important to look for it's activity (for example: latest update date) and usability!

Factors to keep in mind:

Has it been recently updated or maintained?
What are the webbrowsers that would support it?
Frequently downloaded/installed?
Decent and/or enough documentation?

As a beginner one of the biggest problems when working with a unknown framework will be figuring out how to use it.

So you might want to only use frameworks that are well documented.

3. They evolve!

Most frameworks are originally open source, which meant that it is a certainty that they will evolve regularly, unless it has been abandoned of course (but that's why we keep part 2 of this article in mind!)

That also means that it is my recommendation to frequently go look at the original repository for new updates/messages.

One of my favorite tips to give is to go check the "issues" page of that repository on GitHub

It can be a goldmine of information and sometimes you may even find answers to unanswered questions about a certain error!

4. The implementation

So... We found our framework, it has what we need, is recently updated, well documented and has been used by others a lot. PERFECT!

Now we need to install it.

To Install a framework, we will need to initialize our node project first.

You can use your terminal to move into your project folder where you can use this line of code into your terminal to initialize node:

npm init

It will ask a few configuration questions to set up your project inside a package.json file.

After installing your first dependency (including frameworks), you will be able to find those under "dependencies":, just like this:

  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "express-session": "^1.17.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "multer": "^1.4.2",
    "mysql": "^2.18.1",
    "nodemon": "^2.0.7",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0"
  }

To add new frameworks it is acutally fairly easy, you just use your package manager, for example, npm or yarn and use the install syntax according to the package manager you use

npm:

>path>to>project> npm install package-name
or...
>path>to>project> npm -i package-name

Yarn:

>path>to>project> yarn add package-name

You will find out that most of the dependencies have this line of code already prepared for you to use on their website or on npmjs.com.