Using gatsby-plugin-guess-js with Google Tag Manager

[Dahmon]

Hello, I am currently working on a Gatsby project that is already using Google Tag Manager to handle Google Analytics.
I would like to incorporate gatsby-plugin-guess-js with this site to help with performance, however without using gatsby-plugin-google-analytics I seem to be unable to achieve this.

We are currently using gatsby-plugin-google-tagmanager which does includes our GTM ID but this does not seem to be sufficient for guess-js to function. During the build process a browser window is opened and I am prompted to login to my Google Analytics account to give access. This is fine locally, however not so fine when deploying the site.

Has anyone successfully achieved this or know a possible solution to this problem?

Current gatsby-config setup for GTM and guess-js

{
      resolve: 'gatsby-plugin-google-tagmanager',
      options: {
        id: "{GTM-ID}",
        includeInDevelopment: false,
      },
    },
    {
      resolve: "gatsby-plugin-guess-js",
      options: {
        // Find the view id in the GA admin in a section labeled "views"
        GAViewID: '{GA-VIEW-ID}',
        minimumThreshold: 0.03,
        // The "period" for fetching analytic data.
        period: {
          startDate: new Date("2018-1-1"),
          endDate: new Date(),
        },
      },
    },

Running 'gatsby info --clipboard' returns the following information:
System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Binaries:
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.17763.1.0
npmPackages:
gatsby: ^2.3.32 => 2.5.0
gatsby-image: ^2.0.40 => 2.1.0
gatsby-plugin-eslint: ^2.0.5 => 2.0.5
gatsby-plugin-google-tagmanager: ^2.0.13 => 2.0.13
gatsby-plugin-guess-js: ^1.1.0 => 1.1.0
gatsby-plugin-meta-redirect: ^1.1.1 => 1.1.1
gatsby-plugin-offline: ^2.0.25 => 2.1.0
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-root-import: ^2.0.5 => 2.0.5
gatsby-plugin-sass: ^2.0.11 => 2.0.11
gatsby-plugin-sharp: ^2.0.35 => 2.0.37
gatsby-plugin-sitemap: ^2.0.12 => 2.1.0
gatsby-react-router-scroll: ^2.0.7 => 2.0.7
gatsby-source-filesystem: ^2.0.32 => 2.0.36
gatsby-transformer-sharp: ^2.1.18 => 2.1.19

[omonk]

This is something I've come across this morning whilst having a play around with this plugin, I've done a bit of digging and it appears that the solution is hidden in various comments without much documentation.

Someone else has come across this issue and the solution is to provide a jwt to the plugin during build: guess-js/gatsby-guess#19 (comment)

This is as simple as passing jwt to the plugin options: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-guess-js/src/gatsby-node.js#L5

I've just forked gatsby to add some documentation to this plugin to address this issue.

[Dahmon]

Thank you for the response @omonk!
I'll have to give this a shot when I've got a minute.

[omonk]

No worries!

The JWT token stuff seems to be quite a lot of effort to produce though. Not sure I need to generate each time I deploy? Probably not ideal with JWTs...

[Dahmon]

I followed the first half of this guide that was posted in #15969 to get a private key and email address. @wardpeet suggested by using the email and private key to create a jwt object that I then use in the gatsby-plugin-guess-js config.
This appears to be working for now, however I am still in the middle of trying to verify if guess-js is working as intended.

[wardpeet]

When using gatsby-plugin-guess-js you should see prefetches that are related to a page.

for example when you're on gatsbyjs.org and type __GUESS__.guess() it returns paths to prefetch. You should see prefetches for this route inside the DOM when checking it with devtools.

On gatsbyjs.org, guess is telling us to prefetch /docs/ so we load the docs page javascript and all assets.

Please install [email protected] & [email protected] to make guess work again.

I'm marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜