[fusion_builder_container hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”no” min_height=”” hover_type=”none” link=””][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]
If you have a single page app that has no routes, getting visitors tracked with Google Analytics is pretty straight forward using the React Google Analytics Module.
First create your tracking ID from Google Analytics by going to https://analytics.google.com/ A howto guide is available here.
Then in the parent component of your React.js app
- Install the react-ga module:
yarn add react-ga
- Import this module at the top of the app:
import ReactGA from 'react-ga';
- And add the 2 lines of code into your constructor as shown below using either a class or the hooks approach.
https://gist.github.com/magician11/d4b306da003e2cf17a530d761d837a7b
I had data being tracked within 24 hours from adding this module.
Any questions, let me know!
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
7 responses to “How to setup Google Analytics with React.js apps”
Hey Man thank you! I was looking for this for awhile 🙂
Now do I need to do that for each component? I have only done it on the main component that is first loaded.
Hey David. You only need it on the main component for single page apps. And you’re welcome!
Hello Andrew, Thanks a lot for your post.
BTW, I’m running my CRA in my localhost computer. Should I deploy CRA up online for GA to track my landing page? or is it possible while i’m working in my localhost dev environment?
Thank you
Hey Johnny. Excellent question. I wasn’t sure, so I just tested it out by running one of my apps from localhost .. and indeed looking at the real-time overview on https://analytics.google.com it shows me connected to it.
In addition, it looks like from the official docs, that Google does detect localhost https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#automatic_cookie_domain_configuration
Thanks for the article Andrew. Do you know how to track Page Load Time with ReactGA? I’m using ReactGA.timing, but I can’t seem to get the page load time to work.
Hey Adrian. I haven’t played with page load times, but maybe you can try
add siteSpeedSampleRate: 100 to the gaOptions object
https://github.com/react-ga/react-ga#reactgainitializegatrackingid-options
Can I place the GA verification code on a separate JS file e.g analytics.js and embed them on my pages? Will it work or I must need to add the exact code on all pages?