Comments (15)
Is the setup described here #64 (comment) the "correct way" to setup analytics?
Add a file called gatsby-browser.js with and add the following code?
import ReactGA from 'react-ga';
ReactGA.initialize('UA-xxxxxx-x');
exports.onRouteUpdate = (state, page, pages) => {
ReactGA.pageview(state.pathname);
};
UPDATE: Confirmed this worked
from gatsby.
You can check my repo here. I tried the html.js and the gatsby-browser.js
method but it doesn't work. There is nothing in the console.
A console log in my gatsby-browser
file doesn't show neither. Is there any thing I have to do to link it to my project ?
Edit : I finally managed to get it work by following this issue. My script had to be surrounded by ` as you can see here
Thanks for the help !
from gatsby.
I did what @timarney did, but I got path is required in .pageview()
. Any clue?
from gatsby.
@franzejr I find that the pathname
is inside state.location
, so change the code to:
import ReactGA from 'react-ga';
ReactGA.initialize('UA-xxxxxx-x');
exports.onRouteUpdate = (state, page, pages) => {
ReactGA.pageview(state.location.pathname);
};
from gatsby.
Glad you got it working!
And I should finish converting my blog out of Coffeescript — that it's mixed JS/CS right now is confusing.
from gatsby.
I got it working using: onClientEntry
.
import ReactGA from "react-ga";
ReactGA.initialize("UA-XXXX");
exports.onClientEntry = () => {
ReactGA.set({ page: window.location.pathname });
ReactGA.pageview(window.location.pathname);
};
from gatsby.
Not documented yet but there's a onRouteChange
hook you can use. See https://github.com/KyleAMathews/blog/blob/e590c31a1b0f9f72b3725f40664cf064fd4595f6/app.coffee#L15-L20
from gatsby.
How do you get that app.coffee
(or in my case app.js
) file to be loaded?
from gatsby.
@SachaG you need to export a function from gatsby-browser.js called onRouteUpdate
. This will be called on every route change. https://github.com/gatsbyjs/gatsby#structure-of-a-gatsby-site
from gatsby.
Thanks, here's what I ended up with in my gatsby-browser.js
file:
import ReactGA from 'react-ga';
ReactGA.initialize('UA-xxxxxx-x');
exports.onRouteUpdate = (state, page, pages) => {
ReactGA.pageview(state.pathname);
};
I'm not sure if that's the best way to do it though. I'm using React-GA btw.
from gatsby.
Seems reasonable!
On Mon, Aug 22, 2016 at 6:48 PM Sacha Greif [email protected]
wrote:
Thanks, here's what I ended up with in my gatsby-browser.js file:
import ReactGA from 'react-ga';ReactGA.initialize('UA-xxxxxx-x');
exports.onRouteUpdate = (state, page, pages) => {
ReactGA.pageview(state.pathname);
};I'm not sure if that's the best way to do it though. I'm using React-GA
https://github.com/react-ga/react-ga btw.—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#64 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAEVh5zegmY5q7NduS8syNK6t3q1bwPoks5qilFdgaJpZM4GTVL1
.
from gatsby.
Hi !
The gatsby-browser.js
file in the starter I use (https://github.com/wpioneer/gatsby-starter-lumen) is empty. I've tried your way but I can't get any infos on Google Analytics. Any idea @SachaG ?
from gatsby.
@GuillaumeHaben can you post the code you're using?
from gatsby.
@KyleAMathews I'm using the same code as Sasha (except with my GA id instead of xxxxx). I've also installed react-ga.
from gatsby.
We'd need more info to help. It sounds like it should work. Is there errors
in the browser console? Can you add a console.log to your Gatsby-browser.js
and the message shows?
On Tue, Sep 20, 2016 at 8:43 AM Guillaume HABEN [email protected]
wrote:
@KyleAMathews https://github.com/KyleAMathews I'm using the same code
as Sasha (except with my GA id instead of xxxxx). I've also installed
react-ga.—
You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub
#64 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAEVh5Zgz7nRYplVlm2n0gJbpgbEVnNlks5qr_8zgaJpZM4GTVL1
.
from gatsby.
Related Issues (20)
- Gatsby 5 is dead? HOT 1
- webpack and other js resources not found when using a subfolder of a static s3 website to serve public files
- Gatsby static site generation not fully prerendering HTML with loadable imports
- Gatsby minimal TS starter generates code with deprecated React import
- gatsby-transformer-remark doesn't accept "engines" plugin option for graymatter
- matchPath seems to be broken since adapters
- The first Headless CMS starter link is broken
- Gatsby + Directus = Build not working HOT 1
- Validation error
- Unexpected missing while creating page
- Invoking imported function inside `createPages` results in error HOT 1
- Gatsby 4 Upgrade - SyntaxError: Invalid left-hand side in assignment
- command curl -X POST http://localhost:8000/__refresh doesn't delete the documents from the CMS
- Serverless function in Gatsby site throwing error and not returning data locally
- Using webpack-dev-middleware results with npm audit high vulnerability
- Add a short how-to article for removing the 8px margin in html body
- Error using TypeScript package using workspace in gatsby-node.ts : ReferenceError: Cannot access 'D' before initialization
- React Peer Dependency Issue with gatsby-plugin-mdx HOT 3
- Gatsby performance/page-load issue on Mobile. HOT 1
- Query returning some of the key as null but if you fetch it with postman it's giving proper response
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby.