[Google Analytics] Error: Missing path, href or title in page call for GA

[lukasoppermann]

Hey,

I am trying to send page view data to google analytics from my node server. However I get the following error:

(node:63483) UnhandledPromiseRejectionWarning: Error: Missing path, href or title in page call for GA
    at pageView (/Users/lukasoppermann/Repos/veare/node_modules/@analytics/google-analytics/lib/analytics-plugin-ga.cjs.js:106:11)
    at Object.page (/Users/lukasoppermann/Repos/veare/node_modules/@analytics/google-analytics/lib/analytics-plugin-ga.cjs.js:65:7)
    at _callee4$ (/Users/lukasoppermann/Repos/veare/node_modules/@analytics/core/lib/analytics.cjs.js:2441:53)
    at tryCatch (/Users/lukasoppermann/Repos/veare/node_modules/@analytics/core/lib/analytics.cjs.js:1058:40)
    at Generator.invoke [as _invoke] (/Users/lukasoppermann/Repos/veare/node_modules/@analytics/core/lib/analytics.cjs.js:1287:22)
    at Generator.prototype.<computed> [as next] (/Users/lukasoppermann/Repos/veare/node_modules/@analytics/core/lib/analytics.cjs.js:1110:21)
    at asyncGeneratorStep (/Users/lukasoppermann/Repos/veare/node_modules/@analytics/core/lib/analytics.cjs.js:1749:24)
    at _next (/Users/lukasoppermann/Repos/veare/node_modules/@analytics/core/lib/analytics.cjs.js:1771:9)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

My setup is as follows:

1. No GA in the frontend (I guess that is the idea)
2. I have an analytics.ts file that exports the Analytics object and I import it into my routes.ts file where I call the .page method.

→ analytics.ts

import config from '../config/appConfig'
import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'

export default Analytics({
  app: config.appName,
  plugins: [
    googleAnalytics({
      trackingId: config.trackingId
    })
  ]
})

→ routes.ts

// ...
    analytics.page(
      // {
      // title: req.path,
      // url: `${config.baseUrl}/${req.path}`,
      // path: req.path
      // }
    )
// ...

I tried analytics.page without any arguments (as seen above) and with the arguments that are commented out. I also tried only supplying url as shown in the example. However I always get the above mentioned error.

Possible Fix

The line with the "bug" is here: https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-google-analytics/src/node.js#L58-L59

I think it needs to be changes to:

  const { path, url, title } = properties
  pageView({ path, url, title }, client)

@DavidWells is that correct? Do you want to quickly fix it or should I send a PR?

What am I missing here?

[DavidWells]

Yeah I think you are right

The property is usually url https://github.com/DavidWells/analytics/blob/master/packages/analytics-core/src/modules/page.js#L62 but in reality, you can pass any arbitrary values to the page call

Does using href work for you send data to GA on serverside?

analytics.page({
  title: req.path,
  href: `${config.baseUrl}/${req.path}`,
  path: req.path
} )

This should pass the href down into the universal-analytics client https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-google-analytics/src/node.js#L91

[lukasoppermann]

I tried it but it does not work. I thought the same, but I think it does not work, because you are extracting the values in the page function and passing a new object with only the three values. (The lines I mentioned before)

On Fri, Oct 30, 2020, 03:51 David Wells [email protected] wrote:

Yeah I think you are right

The property is usually url https://github.com/DavidWells/analytics/blob/master/packages/analytics-core/src/modules/page.js#L62 but in reality, you can pass any arbitrary values to the page call

Does using href work for you send data to GA on serverside?

analytics.page({ title: req.path, href: ${config.baseUrl}/${req.path}, path: req.path} )

This should pass the href down into the universal-analytics cleint https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-google-analytics/src/node.js#L91

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/DavidWells/analytics/issues/104#issuecomment-719138260, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGGVOW2AZELOGLGAHRGCNLSNIS3LANCNFSM4TDOIDIA .

[DavidWells]

Looks like the href parameter passed here https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-google-analytics/src/node.js#L59 maps to "hostname" in pageview here https://github.com/peaksandpies/universal-analytics/blob/master/lib/index.js#L124

I think this might have to be hostname e.g. config.baseUrl in your example.

Try changing to:

analytics.page({
  title: req.path,
  href: config.baseUrl, // <-- hostname
  path: req.path
})

[lukasoppermann]

I tried it, but no luck. 😢 The error is produced here: https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-google-analytics/src/node.js#L88-L90 so reading the code, it must be that one of the 3 variables is missing / undefined.

export function pageView({ path, href, title }, client) {
  if (!path || !href || !title) {
    throw new Error('Missing path, href or title in page call for GA')
  }
  client.pageview(path, href, title).send()
} 

The analytics page function (L56-L60) is this:

    page: ({ payload, config }) => {
      const { properties } = payload
      const { path, href, title } = properties
      pageView({ path, href, title }, client)
    },

So if I am reading this correctly, you extract path, href, title and pass only those 3 to the pageView function.

[lukasoppermann]

I investigated further and it is actually the path & title elements that are not present!

They are not present throughout the entire tree. So also within the page function of the core analytics method they are not available. 😕

I have no idea where to look, to find a solution, however, the href seems to be the only property that is actually carried over.

[DavidWells]

The analytics.page function passes through all values. Here is an example with a modified page call for GA

const analyticsLib = require('analytics').default
const googleAnalytics = require('@analytics/google-analytics').default

const originalPlugin = googleAnalytics({
  trackingId: '1234'
})

const customPageDebugger = {
  page: ({ payload }) => {
    const { properties } = payload
    console.log('See all props properties', properties)
  }
}

const customPageGoogleAnalytics = Object.assign({}, originalPlugin, customPageDebugger)

const analytics = analyticsLib({
  app: 'my-app-name',
  plugins: [
    customPageGoogleAnalytics
  ]
})

analytics.page({
  title: 'Title xyz',
  href: `https://localhost:8000`,
  path: '/foo',
  lol: 'hi'
})

/*
Prints
See all props properties {
  title: 'Title xyz',
  href: 'https://localhost:8000',
  path: '/foo',
  lol: 'hi'
}
*/

I am seeing title, href, path, & lol when running the above code.

Those values are passed into the underlying GA plugin here

If you are missing the title title, href, path you should see an error thrown from here

 if (!path || !href || !title) {
    throw new Error('Missing path, href or title in page call for GA')
  }

---

Some questions

Are you using any other plugins?

Is your serverside code passing through some sort of bundler? It's possible it's including the browser code and not the serverside code for node

[lukasoppermann]

Hey, I think it works now. I had some issue with what I put in as arguments. 🙃

So it works fine. The only "issue" that is left, is that I have to add // @ts-ignore because I get a typescript error otherwise if I pass href instead of url.

[lukasoppermann]

@DavidWells should I send a PR for the href vs url fix?

I think it is just one line that needs to be changed.

[lukasoppermann]

Don't use the repo anymore.