Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google analytics #64

Closed
cgarvis opened this issue Oct 21, 2015 · 15 comments
Closed

Google analytics #64

cgarvis opened this issue Oct 21, 2015 · 15 comments

Comments

@cgarvis
Copy link
Contributor

cgarvis commented Oct 21, 2015

Need to be able to fire off page views to google analytics.

@KyleAMathews
Copy link
Contributor

Not documented yet but there's a onRouteChange hook you can use. See https://github.com/KyleAMathews/blog/blob/e590c31a1b0f9f72b3725f40664cf064fd4595f6/app.coffee#L15-L20

@cgarvis cgarvis closed this as completed Oct 25, 2015
@SachaG
Copy link
Contributor

SachaG commented Aug 23, 2016

How do you get that app.coffee (or in my case app.js) file to be loaded?

@KyleAMathews
Copy link
Contributor

@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

@SachaG
Copy link
Contributor

SachaG commented Aug 23, 2016

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.

@KyleAMathews
Copy link
Contributor

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
.

@GuillaumeHaben
Copy link

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 ?

@KyleAMathews
Copy link
Contributor

@GuillaumeHaben can you post the code you're using?

@GuillaumeHaben
Copy link

@KyleAMathews I'm using the same code as Sasha (except with my GA id instead of xxxxx). I've also installed react-ga.

@KyleAMathews
Copy link
Contributor

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
.

@GuillaumeHaben
Copy link

GuillaumeHaben commented Sep 22, 2016

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 !

@KyleAMathews
Copy link
Contributor

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.

@timarney
Copy link
Contributor

timarney commented Feb 24, 2017

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

coopy added a commit to coopy/pernilsson.io that referenced this issue Jun 1, 2017
@franzejr
Copy link

franzejr commented Oct 4, 2017

I did what @timarney did, but I got path is required in .pageview(). Any clue?

@franzejr
Copy link

franzejr commented Oct 4, 2017

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);
};

@calpa
Copy link
Contributor

calpa commented Oct 31, 2017

@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);
};

pragmaticpat pushed a commit to pragmaticpat/gatsby that referenced this issue Apr 28, 2022
Having the error below with element type.
Failed prop type: Invalid prop `children` of type `array` supplied to `Layout`, expected a single ReactElement.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants