Is there a way to get page data inside onRouteUpdate (improving gatsby-plugin-google-analytics)

The gatsby-plugin-google-analytics plugin implements onRouteUpdate method where it defines variables and sends data to Google Analytics:

var onRouteUpdate = function onRouteUpdate(_ref, pluginOptions) {
  ...
  var sendPageView = function sendPageView() {
    var pagePath = location ? location.pathname + location.search + location.hash : undefined;
    window.ga("set", "page", pagePath);
    window.ga("send", "pageview");
  };
  ...
};

I want to improve it and add the ability to set custom variables,

ga('set', 'dimension1', author.name );

This is important because using custom variables I can configure use custom dimensions in Google Analytics, like authors.

But I need to get access to page data to retrieve author’s name. How can I do that?

Once I solve this problem for myself, I’ll submit a PR. Thanks!

[Js-Brecht]

// gatsby-browser.js
const doStuff = ({ location, pageContext, data }) => {
    console.log("location:", location);
    console.log("pageContext:", pageContext);
    console.log("data:", data);
}

export const wrapPageElement = ({ element, location, props }) => {
    doStuff({ location, ...props});
    return element
}

This works for me.

the wrapper component is not re-initialized when I navigate to other post from the current one

It is correct that it is not re-initialized, but it is, ultimately, a part of the React tree. When its props change, it will receive them, and when you navigate is when it receives new props.

If you wanted, you could even use a React component, so that you could use hooks inside of it.

// gatsby-browser.js
import React, { useEffect } from 'react';

const FooComponent = ({ location, pageContext, data }) => {
    useEffect(() => {
        console.log("location:", location);
        console.log("pageContext:", pageContext);
        console.log("data:", data);
    })
    return null;
}

export const wrapPageElement = ({ element, location, props }) => (
    <React.Fragment>
        <FooComponent  location={location} {...props} />
        {element}
    </React.Fragment>
)

[Js-Brecht]

Sure it’s no problem. Just make sure to use relative paths, and resolve them to absolute, that way it is portable.

You could use this to pass the path to the plugin:

{
  resolve: “foo-plugin”,
  options: { 
     fooApi: require.resolve(‘./src/utils/someModule’)
  }
}

And in your plugin, something like this:

export const onRouteUpdate = ({ location }, pluginOptions) => {
  const fooApiFn = require(pluginOptions.fooApi).default
}