Adding Google Analytics 4 (GA4) Tracking to React App

Install the React GA4 library

npm i react-ga4

On the top level initialize the tracking ID:

import React, { Suspense } from 'react';
import { BrowserRouter } from 'react-router-dom';

import Routes from './Routes';

import ReactGA from 'react-ga4';
const TRACKING_ID = "G-XXXXXXXXXX"; // OUR_TRACKING_ID
ReactGA.initialize(TRACKING_ID);

function App() {
	return (
		<Suspense fallback={<div>Loading...</div>}>
			<BrowserRouter>
				<Routes ReactGA={ReactGA} />
			</BrowserRouter>
		</Suspense>
	);
}
export default App;

Track pages on Routes.js, then start the Google Event Tracker:

import React, { useEffect, lazy } from 'react';
import {Route, Routes as Switch, useLocation} from 'react-router-dom';
import GoogleAnalyticsEventTracker from './components/GoogleAnalyticsEventTracker/GoogleAnalyticsEventTracker';
 
const Home = lazy(() => import('./pages/Home/Home'));
const Page1 = lazy(() => import('./pages/Page1/Page1'));
const Page2 = lazy(() => import('./pages/Page2/Page2'));
const NotFound = lazy(() => import('./pages/NotFound/NotFound'));


const Routes = props => {
	const url = useLocation();
	useEffect(() => {
		document.title = url.pathname;
		props.ReactGA.pageview(url.pathname + url.search);
	}, [url.pathname]);
	const gaEventTracker = GoogleAnalyticsEventTracker('all_custom_events');

	return (
		<Switch>
			<Route path='/' element={<Home gaEventTracker={gaEventTracker.bind(this)}/>} />
			<Route path='/page1' element={<Page1 gaEventTracker={gaEventTracker.bind(this)}/>} />

			<Route path='/page2/*' element={<Page2 gaEventTracker={gaEventTracker.bind(this)}/>} />

			<Route element={<NotFound/>} />
		</Switch>
	);
}
export default Routes;

Inside your page you’ll add an event for any click events, functions that finish, etc.

import React from 'react'

const Page1 = props => {
	const gaEventTracker = props.gaEventTracker;
    return ( 	
	<button 
		className="button" 
		onClick={e => {
			gaEventTracker('click_button');
		}}
	>
		Click button
	</button>
    );  
}  
export default Page1

How to set state with dynamic key-value pair in React

import React, { useEffect, useState } from 'react'

const Form = props => {
	const [state, setState] = React.useState({});
	function handleFieldChange(event) {
		setState({ ...state, [event.target.name]: event.target.value });
	}
    return (  
	<div className="form">
            <div className="row g-3 mb-3">
                <div className="col">
                    <input name="firstname" onChange={handleFieldChange} />
                </div>
                <div className="col">
                    <input name="email" onChange={handleFieldChange} />
                </div>
            </div>
            <div className="row g-3 mb-3">
                    <div className="col">
                        <textarea name="message" onChange={handleFieldChange}></textarea>
                </div>
            </div>
        </div>
    );  
}
export default Form

Install extensions on PHP 8.0

To install PHP 8 extensions on Debian use the following command syntax:

sudo apt install php8.0-<extension>

Where:

  • <extension> is replaced with the actual extension name.

Some available extensions are as shown below:

$ sudo apt install php8.0-
php8.0-bcmath            php8.0-curl-dbgsym       php8.0-gmp-dbgsym        php8.0-mysql             php8.0-pspell-dbgsym     php8.0-tidy
php8.0-bcmath-dbgsym     php8.0-dba               php8.0-imap              php8.0-mysql-dbgsym      php8.0-readline          php8.0-tidy-dbgsym
php8.0-bz2               php8.0-dba-dbgsym        php8.0-imap-dbgsym       php8.0-odbc              php8.0-readline-dbgsym   php8.0-xdebug
php8.0-bz2-dbgsym        php8.0-dev               php8.0-interbase         php8.0-odbc-dbgsym       php8.0-snmp              php8.0-xml
php8.0-cgi               php8.0-enchant           php8.0-interbase-dbgsym  php8.0-opcache           php8.0-snmp-dbgsym       php8.0-xml-dbgsym
php8.0-cgi-dbgsym        php8.0-enchant-dbgsym    php8.0-intl              php8.0-opcache-dbgsym    php8.0-soap              php8.0-xsl
php8.0-cli               php8.0-fpm               php8.0-intl-dbgsym       php8.0-pgsql             php8.0-soap-dbgsym       php8.0-zip
php8.0-cli-dbgsym        php8.0-fpm-dbgsym        php8.0-ldap              php8.0-pgsql-dbgsym      php8.0-sqlite3           php8.0-zip-dbgsym
php8.0-common            php8.0-gd                php8.0-ldap-dbgsym       php8.0-phpdbg            php8.0-sqlite3-dbgsym
php8.0-common-dbgsym     php8.0-gd-dbgsym         php8.0-mbstring          php8.0-phpdbg-dbgsym     php8.0-sybase
php8.0-curl              php8.0-gmp               php8.0-mbstring-dbgsym   php8.0-pspell            php8.0-sybase-dbgsym

Example:

sudo apt install php8.0-{mysql,cli,common,imap,ldap,xml,fpm,curl,mbstring,zip}

To check loaded PHP modules use the command:

$ php -m

How to start, stop, and restart a cron job

Start a cron job

A cron job is started the moment it is added to the crontab. Note that the task may fail to run if the cron daemon isn’t started. To start the cron service on your Linux machine, run one of the following commands, depending on your Linux distro.

sudo /etc/init.d/cron start

Stop a cron job

You can stop a single cron job by removing its line from the crontab file. To do that, run the crontab -e command and then delete the line for the specific task. Alternatively, you can stop the cron job by commenting it out in the crontab file.

To stop all cron jobs at once and maybe resume them later, you can stop the cron daemon using the following commands:

sudo /etc/init.d/cron stop

Restart a cron job

To restart the cron daemon, run the following commands:

sudo /etc/init.d/cron restart