I Have a Carousel Component and I wanted to change the URL so that google analytics could see to which steps the user went (without reloading the page).
I used React Router with its BrowserRouter component to update the route with the help of this.props.history.push(`#${value}`); and withRouter which successfully updates the URL route. But Google Analytics doesn't seem to see the difference... The website site is at this link If you wanna check the behavior:
http://upscale-technology.com
Normally your Google Analytics details are added to the HTML file triggering a page view when it is loaded. When you visit another page of the same website and Google Analytics is implemented there, it will log the new page.
In a single page application, routing is taken care of on the client without page reloads. What you are looking for is a way to let Google Analytics know that it should log a page view when a certain action is taken. It could be a click event, state change or a route change. It's up to you.
To achieve this you can use the React-GA library. Use it in the following way.
// Import it at the top of the file
import ReactGA from 'react-ga';
// Initialize it once, e.g. in your componentDidMount for example.
ReactGA.initialize('UA-000000-01');
// Whenever you want to log anything to Google Analytics, use the below.
ReactGA.pageview('/carousel/#1');
NOTE:
Be careful where you implement the .pageview([url]) function. If you are not careful it might be triggered on a re-render. This would mean you get false page views in you metrics skewing your analytics.
Related
What is the need of showing different URL path in react application, I can display all the react component conditionally on same URL path
What is the need of showing different URL path in react application, I
can display all the react component conditionally on same URL path
While you could render a single React app component that conditionally renders dynamic content without using the URL path, using routing/navigation libraries like react-router allow the app to do this conditional content rendering based on the URL. In other words, instead of using internal conditions to render dynamic content the app is using the URL.
React apps are essentially Single Page Apps (SPAs), meaning when the React app is hosted on a server only the single root index.html file is requested and sent over the wire.
A single-page application (SPA) is a web application or website that
interacts with the user by dynamically rewriting the current web page
with new data from the web server, instead of the default method of a
web browser loading entire new pages. The goal is faster transitions
that make the website feel more like a native app.
Using different URL paths in the browser's address bar is an easy way to let the React app know what "page" the user is really trying to access. If all the user enters is "https://yourDomain.com/app" where the app is hosted, then how would they get to any specific page after the initial page load other than navigating there via the app's navigation? The URL path is what allows direct navigation via a browser, e.g. "https://yourDomain.com/app/login".
If I did understand you right you mean the use of different URLs on the same website for different pages of your website. If thats the case you want to use a libary for routing. I personally like React-Router-Dom, there is great documentation on online pages and Youtube. Just search vor react-router-dom v6.
You can add it like so: npm install react-router-dom
if not, please elaborate your question further
Using the router, window.location, the link element and also the href provided by react to my knowledge do generally not cause a re-fetch of the entire react application but only cause a mounting of a new component. Is that correct?
But if I for example change the URL in the browser's URL bar from localhost:4000/hello to localhost:4000/bye will that cause a re-fetch of the entire react application or does react somehow stop the browser from doing that by recognizing that it is the same domain?
And what about the behaviour of the browser's refresh and back buttons in regards to this matter?
if you change URL by window api its refetch whole react again. but if you change URL by react router api its only change page components
Apologies if this is a duplicate question or has been addressed elsewhere but I haven't been able to find an answer. I am trying to integrate google analytics in a react app that uses react-router-dom as per https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker. I am using BrowserRouter and the React Hooks [TypeScript] code with no modifications from the link provided.
The resulting beacon from google analytics always has the correct page route, but uses the title from the previous page. This is an issue because in the realtime report for pageviews, the same route (page) with a different page title is reported as a separate metric.
Is this an issue or am I missing something? If it is an issue, has anyone found a workaround with or without the react-ga module?
Since this is a new site with no GA history I ended up implementing a GA4 property using react-ga4 instead. For pageviews you don't need anything other than an initialize call.
so I've got a React app being served by Nginx and it uses an API server backend to which the NGINX server forwards requests, which is consumed by the React App. The react app uses the React Router package for routing.
Most of the react app is pretty simple, when you go to a specific page, it mounts a React Component which fetches some data from the API Server, and then updates itself to display that data. In doing so, it also updates the Document Title and other metadata related to the data that was fetched.
The react app is just a basic Create-React-App scaffolded application and the NGINX config is just pointing and the default index.html (which in turn loads the javascript chunks etc, standard React infrastructure).
I have a problem now where the app generally works well but if you copy a link from the app and paste it to someone, it will always show the base title of the application, and indeed if you preview the HTML source of any page on the webapp, it will always show the base title.
Here is an example (although SO doesn't do metadata link previews afaik):
https://bugwalker.io/bugs/92
My guess is that the requests that fetch metadata for a link, or fetch source page, don't have Javascript enabled and as a result it never mounts the react components and never gets to update the title etc.
Is there a way to fetch the metadata to populate the title and other metadata even when javascript is disabled? Or is there something else going on that I am completely missing?
Thanks in advance!
For this you need react helmet: https://github.com/nfl/react-helmet. On each page of your React application you should specify the title like so:
<Helmet>
<title>Some Page</title>
</Helmet>
I have a nextjs app connected with redux (using withRedux) and my navigation is driven by a header, in which i use links for links to different parts of the page.
I'm implemented _app.js to set up the container, provider, withRedux and in the getInitialProps in _app.js i fetch a list of users by dispatching an action, and make the results available on the store.
it all works fine when i visit the home page, then i click on the link to the UserList. the dispatch call to load the users is done on getInitialProps in _app.js.
If i visit the route directly in the browser (localhost:3000/UserList) getInitialProps is not called and the UserList page is empty.
I don't know where to go from here, i've spent a day and a half.
Not sure if you are working with server, my case I am working with nextjs static site. In the NextJS documentation itself they mentioned
getInitialProps will only be executed on the client when
navigating to a different route via the Link component or using the
routing APIs
Means on server side getInitialProps is always called, but on client side navigating to URL directly doesn't work.
I am planning to use componentWillMount and Dynamic Import for the solution.
I will update if thing works.