Git Product home page Git Product logo

Comments (15)

timarney avatar timarney commented on May 2, 2024 6

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.

GuillaumeHaben avatar GuillaumeHaben commented on May 2, 2024 2

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.

franzejr avatar franzejr commented on May 2, 2024 2

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

from gatsby.

calpa avatar calpa commented on May 2, 2024 2

@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.

KyleAMathews avatar KyleAMathews commented on May 2, 2024 1

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.

franzejr avatar franzejr commented on May 2, 2024 1

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.

KyleAMathews avatar KyleAMathews commented on May 2, 2024

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.

SachaG avatar SachaG commented on May 2, 2024

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

from gatsby.

KyleAMathews avatar KyleAMathews commented on May 2, 2024

@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.

SachaG avatar SachaG commented on May 2, 2024

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.

KyleAMathews avatar KyleAMathews commented on May 2, 2024

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.

GuillaumeHaben avatar GuillaumeHaben commented on May 2, 2024

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.

KyleAMathews avatar KyleAMathews commented on May 2, 2024

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

from gatsby.

GuillaumeHaben avatar GuillaumeHaben commented on May 2, 2024

@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.

KyleAMathews avatar KyleAMathews commented on May 2, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.