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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments