What's the best way to add Google Analytics to a Vite React project? I have added the gtag.js script into the index.html file within the Vite project. It does track users in Real Time but doesn't seem to track anything else. This makes me think the code should be in App.jsx instead...
Because when I go to GA I am getting the message saying there is No data received from my website yet.
I have looked into react-ga but this seems to only work with UA-XXX tags where as I am using GA v4 which uses IDs of G-XXXX
Has anyone added a v4 GA tag into a React project?
Update
Just found https://www.npmjs.com/package/react-ga4
This is how I have it now...
import React from 'react'
import ReactGA from 'react-ga4'
import {Helmet} from 'react-helmet'
import Footer from './components/base/Footer'
import Header from './components/base/Header'
import Form from './components/Form'
import Table from './components/Table'
ReactGA.initialize('G-XXXXXXX')
ReactGA.send('pageview')
function App() {
return (
...
But still getting the message "No data received from your website yet." in GA
It's best to use a vite plugin for that. Currently Vite-plugin-radar is available and it supports 7+ analytics providers ( Google Analytics, Google Tag Manager, Facebook Pixel, Linkedin Insight, Yandex Metrica, Baidu Tongji and Microsoft Advertising)
Another advantage with vite plugins is that mostly they are framework agnostic, so you can use them with Vue, React, Svelte or other vite supported frameworks.
Related
There is a ready front-end built using React.
Is it correct to connect it?
So far, there is only 1 page with one div block in which there are pictures. I read the documentation and didn't quite understand how it was done.
Can you please describe in detail all the steps to enable it?
I have a fresh/clean Laravel project. I don't know Laravel & React well yet. Therefore, I ask you to tell in detail and step by step all the actions so that React styles work in welcome.blade.php.
React structure (src/index.js):
import React from 'React';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import 'macro-css';
const root = ReactDOM.creactRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
I tried to migrate the code from React index.js into Laravel's app.js and I threw all the other files next to it in the hope that it would work.
Please, first go through the Laravel Bootcamp which will take you through how Laravel integrates with React.
Writing Views In React / Vue
Our Breeze and Jetstream starter
kits give you a great
starting point for your next Laravel application powered by Inertia.
In addition, the Laravel Bootcamp
provides a full demonstration of building a Laravel application
powered by Inertia, including examples in Vue and React.
I would like to use the Authenticator component from Amplify UI for sign in in my React App but doing so makes my apps bundle size huge; it is currently 3Mb. I have seen the discussion on reducing bundle size for Amplify more broadly which led to this release/blog which I have followed. I am wondering if there is something similar I should be doing to import the Authenticator from Amplify UI in such a way that it does not import the entire ui-react library because it seems that is adding 1.8Mb to my app, most of which is coming from icons if I'm reading the chart right. I import the Authenticator as shown below:
import { Authenticator } from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
Here is my source map for the app:
package.json looks like this:
Prior to version 2.12.0 we had some treeshaking issues in the #aws-amplify/ui-react package which prevented the icons from being removed. This was fixed in version 2.12.0. See CHANGELOG. It looks like you may be using 2.10.4. Can you make sure you are on the latest version?
npm install #aws-amplify/ui-react#latest
If you don't see a reduction in bundle size after upgrading the latest version that's a bug, and we would like to get it fixed. You can either respond to this issue or even better would be to open a bug here.
The Authenticator component does not import anything from its parent directories, so you could probably just extract the code from here and install any dependencies that are missing.
I have a nxWorkspace with React, React-Native and Nodejs. I've create a shared assets library to use between React and React Native. I'm able to use it with React, but I have no idea how to use it in the React-Native. I've look at the documents and youtbue videos also, but all of them have used with React or Angular.
apps
- web
- mobile
- server
libs
- shared-assets
I was making a linkedin clone following Clever programmer's video. In their video they Imported firebase using import firebase from "firebase"
But I can't import firebase from firebase. I can only import folders in firebase eg: auth, app
Also I have the Import cost extension installed. It detects firebase/auth, firebase/firestore
kind of imports but it doesn't detect import firebase from firebase
How can I solve this problem. Any help will be much appreciated. I'm stuck for 5 days now.
I'm registering a service worker from create react app and I'm getting good scored in lighthouse for being a progressive web app and I can install the web app from the Chrome address bar, all is good
BUT when I update the content on the website nobody gets to see it unless they clear their cache, which they don't. How can I ensure they see the latest content while still getting a top score on lighthouse for being a progressive web app?
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { Router } from './router';
import './scss/index.scss';
ReactDOM.render(<Router />, document.getElementById('shell'));
serviceWorker.register();
To service worker update your cache, you'll need to close ALL TABs of your website.
Another way is use this package to do this job.
https://www.npmjs.com/package/#loopmode/cra-workbox-refresh
It will do all the job for you, and after install the new files, it shows up a button allowing you to update the page