Incorrect pageTrackerTemplate TypeScript Type Declaration

[CainHarniessFs]

Environment *

npm ls vue-gtag:

-- [email protected]

npm ls vue:

[email protected] C:\Users\cain.harniess\repos\New Globe\Bridge.TerritoryDashboards.App\Client
+-- UNMET PEER DEPENDENCY [email protected]
-- [email protected]
  -- [email protected]

npm ERR! peer dep missing: [email protected], required by @vue/[email protected]
npm ERR! peer dep missing: vue@^2.x, required by @vue/[email protected]
npm ERR! peer dep missing: vue@^2.0.0, required by [email protected]
npm ERR! peer dep missing: vue@^2.x, required by [email protected]

1. Operating system:
   Windows
2. Browser and version:
   Edge 111.0.1661.51 (Official build) (64-bit)

Description *

I think the TypeScript type declaration from the pageTrackerTemplate property is incorrect when compared against the documentation. I believe it is missing both the to and from parameters.

Please can you review the below and confirm whether this is intended?

Expected behavior

In the documentation for the page tracker template here, the pageTrackerTemplate in the code sample has the following signature.

  pageTrackerTemplate(to) {
    return {
      page_title: 'amazing page',
      page_path: to.path
    }
  },

Additionally, there is the following note.

The pageTrackerTemplate method will have both the to and the from route instances passed as parameters.

I'd expect the below to be a valid pageTrackerTemplate declaration when using TypeScript in Vue 3 and Vue Router v4 - the latter meaning that the arguments are of type RouteLocationNormalized.

// main.ts in app.use(VueGTag, ...

    pageTrackerTemplate(to: RouteLocationNormalized) {
      return services.googleAnalyticsService.createPageview(
        to.name?.toString() ?? "Untitled",
        to.path,
        to.fullPath
      );
    },

where googleAnalyticsService.createPageView returns an interface that extends the vue-gtag PageView interface. (see other notes below).

Actual behavior

I receive the following TypeScript error.

Type '(to: RouteLocationNormalized) => PageView' is not assignable to type '() => PageView'.
  Target signature provides too few arguments. Expected 1 or more, but got 0.ts(2322)
vue-gtag.d.ts(270, 5): The expected type comes from property 'pageTrackerTemplate' which is declared here on type 'PluginOptions'

The type declaration is

  export interface PluginOptions {
    ...
    pageTrackerTemplate?: () => PageView;
    ...

It looks like it is missing both the to and from parameters.

Reproducible Demo in case of a bug report

I think my explanation above is sufficient for this issue. Let me know if you disagree.

Other Notes

We have extended the PageView interface in order to send additional values with page view events, and this worked on the previous version of vue-gtag.

// createPageview declaration.
  public createPageview(
    title: string,
    path: string,
    fullPath: string
  ): SpotlightPageView {
    return {
      page_title: title,
      page_path: path,
      page_location: fullPath,
      connection_status: "online"
      // Comment in to activate debugging in the Google Analytics portal
      // debug_mode: true
    };
  }

// SpotlightPageView declaration.
export default interface SpotlightPageView extends PageView {
  connection_status?: string;
  debug_mode?: boolean;
}

Thanks,
Cain

[yanzhihong23]

I had the same problem. You can declare your config as PluginOptions.

import { PluginOptions } from 'vue-gtag'

{
  pageTrackerTemplate(to: RouteLocationNormalized) {
      return services.googleAnalyticsService.createPageview(
        to.name?.toString() ?? "Untitled",
        to.path,
        to.fullPath
      );
    }
} as PluginOptions