seeden / react-g-analytics Goto Github PK
View Code? Open in Web Editor NEWReact google analytics with support for react-router
License: MIT License
React google analytics with support for react-router
License: MIT License
I was reviewing the Google page on Single Page Application Tracking. They recommend using the ga('set', 'page', '/path')
command before sending the page view ga('send', 'pageview')
.
I notice your historyListener method pushes the pageview directly. Would this prevent other events being tracked from registering the current view the event was invoked from? If so, would it be possible to include the set page before sending it?
(I'm new to react-router and ga, sorry if the question is too basic).
Hi,
There is a problem with react-g-analytics with newest version of React Router.
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]
Perhaps, I missed it, but is there anything special that needs to be done when testing locally for react-router v4 integration?
Running command: ga("set", {page: "/", title: "My App", location: http://localhost:3000/})
Expected a string value for field: "location". But found: "object".
log @ analytics_debug.js:10
J @ analytics_debug.js:9
La @ analytics_debug.js:16
zc @ analytics_debug.js:30
wc.set @ analytics_debug.js:29
Y.b.(anonymous function) @ analytics_debug.js:38
ad.set @ analytics_debug.js:56
Y.b.(anonymous function) @ analytics_debug.js:38
jf.R @ analytics_debug.js:68
jf.H @ analytics_debug.js:65
Z.P @ analytics_debug.js:72
cd @ analytics_debug.js:58
A @ analytics_debug.js:58
(anonymous function) @ analytics_debug.js:75
(anonymous function) @ analytics_debug.js:75
Running command: ga("send", {hitType: "pageview"})
Missing required field '"location"' for hit of type '"pageview"'
....same call stack as above....
The code isn't doing anything fancy, which is why it makes me wonder if the problem is the fact that my location is localhost.
import {BrowserRouter} from "react-g-analytics";
const googleAnalyticsId = 'UA-XXXX';
const App = () => (
<BrowserRouter id={googleAnalyticsId}>
<div className="container">
<Header/>
<Match exactly pattern="/" component={Home} />
<Miss component={NoMatch}/>
<Footer/>
</div>
</BrowserRouter>
);
export default App;
It looks to me like it would be happy if it had double quotes: location: "http://localhost:3000/"
Any help is greatly appreciated. Thanks so much for the work on this component.
<Match
pattern='/en'
render={() => (
<Redirect to='/' />
)}
/>
This works with react-router 4 but not your version :(
Looks like we can't track GA custom events (https://developers.google.com/analytics/devguides/collection/analyticsjs/events#overview)?
Am I missing something?
Perhaps use context.router.setRouteLeaveHook
instead of context.history.listen
?
https://github.com/rackt/react-router/blob/master/upgrade-guides/v2.0.0.md#lifecycle-mixin
The readme mentions a mixin for RouteHandler but I'm not seeing that anywhere.
Am I just confused?
I've just added GoogleAnalytics id="UA-24874896-10" tag in my app.js before RouteHandler tag as mentioned here "https://www.npmjs.com/package/react-g-analytics".
After adding, I am getting this in my console:
Warning: Failed Context Types: Required context router
was not specified in GoogleAnalytics
. Check the render method of App
.
and
Uncaught Error: Router is not presented in the component context.
Can you please tell me what am I missing..?
so i have a global ga
variable immediately. what do you think?
Hi guys.
I would like to hear where are you using this library.
Please add a link to your project.
Thank you
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.