Vuepress: @vuepress/google-analytics does not add tracking code as window is undefined?

Created on 12 Feb 2019  ·  16Comments  ·  Source: vuejs/vuepress

  • [x] I confirm that this is a issue rather than a question.

Bug report

if I am building via vuepress build docs but window is undefined.
not really suprising as it does not run in the browser?
However there is this check

export default ({ router }) => {
  console.log(typeof window);  // undefined
  // Google analytics integration
  if (process.env.NODE_ENV === 'production' && GA_ID && typeof window !== 'undefined') {

from this change a while back:
https://github.com/vuejs/vuepress/pull/893/commits/ca618e4b6c1cf5857f90f7d41848668ae56e3aa3

I'm still not sure why a check for window is there?

Version

every version? I know it worked before so I'm baffled how?

tested in:

$ npm ls vuepress
@open-wc/root@ [...]/open-wc/open-wc
└── [email protected]

$ npm ls @vuepress/plugin-google-analytics
@open-wc/root@ [...]/open-wc/open-wc
└── @vuepress/[email protected]

Steps to reproduce

add to your config.js

  plugins: [
    '@vuepress/google-analytics',
    {
      'ga': 'UA-131782693-1'
    }
  ],

live version:

git clone [email protected]:open-wc/open-wc.git
cd open-wc
npm i
npm run site:build
// search for "google-analytics" in the "_site" folder

What is expected?

tracking via analytics e.g. js tracking code get's inserted

What is actually happening?

no tracking code

Other relevant information

$ node --version
v11.7.0

$ npm --version
6.6.0

$ cat /proc/version:
It is a WSL (Windows Subystem Linux)
Linux version 4.4.0-17134-Microsoft ([email protected]) (gcc version 5.4.0 (GCC) ) #523-Microsoft Mon Dec 31 17:49:00 PST 2018

$ lsb_release -a:
Distributor ID: Ubuntu
Description:    Ubuntu 16.04.3 LTS
Release:        16.04
Codename:       xenial
  • Is this a global or local install? local
  • Which package manager did you use for the install? yarn or npm didn't matter

Most helpful comment

FYI, I tried installing the plugins in multiple ways. To fix all your issues, use Yarn. NPM screws up the linking and the moment I just nuked node_modules and used yarn install everything worked. There are a few hours I'll never get back...

All 16 comments

Hmmm, what you searched is the code at build time, why not searching UA-131782693-1?

searching for UA-131782693-1 results in the same => empty

you can take a look at
https://open-wc.org/assets/js/app.6055e0db.js

this is the output produced:

eval("__webpack_require__.r(__webpack_exports__);\n/* global GA_ID, ga */\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (({ router }) => {\n// Google analytics integration\n  if (false) {}\n});\n\n\n\n//# sourceURL=webpack:///./node_modules/@vuepress/plugin-google-analytics/enhanceAppFile.js?");

that really looks wrong

(({ router }) => {\n// Google analytics integration\n  if (false) {}

also I see in analytics that I don't have any more tracking (e.g. 0 users visiting the site - even though I know there are many many)

Hmmm... plugin usage should be:

module.exports = {
  plugins: [
    [ 
      '@vuepress/google-analytics',
      {
        'ga': '' // UA-00000000-0
      }
    ]  
  ] 
}

Please check out docs carefully.

I tried didn't help :(

according to this code both configs should work: https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/plugin-google-analytics/index.js#L6

Hmmm, what I said is that you are using the plugin with a wrong way, the array should be nested.

Yours:

  plugins: [
    '@vuepress/google-analytics',
    {
      'ga': 'UA-131782693-1'
    }
  ],

My:

  plugins: [
    [ 
      '@vuepress/google-analytics',
      {
        'ga': '' // UA-00000000-0
      }
    ]  
  ]

like so?
https://github.com/open-wc/open-wc/pull/220/files

still no tracking on preview build: https://deploy-preview-220--nervous-stonebraker-1f429b.netlify.com/

output is the same in
https://deploy-preview-220--nervous-stonebraker-1f429b.netlify.com/assets/js/app.31c473bd.js

(({ router }) => {\n// Google analytics integration\n  if (false) {}\n});

Sorry to post on an closed issue, but there is no description as to why it was closed (or what the fix was) and I am having the same problem. I checked to make sure my config using is using a nested array, plugins: [ [ '@vuepress/google-analytics', { ga: 'UA-77375244-1' } ] ]. Yep.

What was done to resolve this?

I case anyone gets stuck on this....the problem is that I was trying to use plugins....but plugins are only available on the alpha release of VuePress. On the production 0.x use the ga: 'UA-xxxxxxx' in the config.js file as specified here: https://v0.vuepress.vuejs.org/config/#ga

it's still unresolved but I can't reopen it...

but yes that only effects 1.x alpha

Currently we work around this by using the Snippet Injection functionality from netlify (site settings -> build & deploy -> post processing -> snippet injection, paste in a google analytics code snippet), however the problem with the google-analytics plugin has not been resolved, it might be in your interest to take another look at it, @ulivz .

If it truly turns out to be a bug, please provide valid repro. You guys are just paste code from start to finish, but sorry, I can't reproduce it.

The another thing is that I cannot understand why can you use plugin in 0.x, is the home page of the document not very clear?

image

You may find the repo here: https://github.com/open-wc/open-wc

Also we're not using 0.x of the plugin, although SGarno is. We're currently using: "@vuepress/plugin-google-analytics": "^1.0.0-alpha.30" and "vuepress": "^1.0.0-alpha.30".

I believe @daKmoR has tried using the latest versions (^1.0.0-alpha.37) as well, without success.

When I was tracing the problem down (erroneously in 0.x), I just made some changes that would cause a syntax error in index.js of the plugin and found that it never hit the code. That is what clued me into what was happening to me. I was reading the docs, but didn't catch that those were @next docs (even though it says it all over the place...just didn't get in to my thick skull). Though I think the problem is that not everyone knows what is in 0.x vs 1.x. I didn't realize that plugins were added to 1.x until this issue caught me.

Anyway, one thing I noticed in the docs. It says to use this config:

module.exports = {
  plugins: [
    [ 
      '@vuepress/google-analytics',
      {
        'ga': '' // UA-00000000-0
      }
    ]  
  ] 
}

But the plugin name is @vuepress/plugin-google-analytics. Could that be where the issue actually is? I am not on 1.0x so I can't test, but that is one of the things I tried when I was tracing down the error.

FYI, I tried installing the plugins in multiple ways. To fix all your issues, use Yarn. NPM screws up the linking and the moment I just nuked node_modules and used yarn install everything worked. There are a few hours I'll never get back...

我遇到了同样的问题,我升级了vuepress到1.x,也在/docs/.vuepress/config.js中配置了plugins,但是仍然没有效果。

这里是版本库

这是最新的构建版本

请帮忙看下,谢谢

I fixed this issue after I installed the vuepress from globally to locally.
You can check my repository https://github.com/wenbinke/code-docs for example.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

FadySamirSadek picture FadySamirSadek  ·  3Comments

AleksejDix picture AleksejDix  ·  3Comments

harryhorton picture harryhorton  ·  3Comments

AMontagu picture AMontagu  ·  3Comments

higuoxing picture higuoxing  ·  3Comments