feat(page-tracker): prepend router base (#306)

closes #160

Author: MatteoGabriele

src/api/pageview.js

@@ -1,5 +1,6 @@
 import { getOptions } from "@/options";
-import { isBrowser } from "@/utils";
+import { getRouter } from "@/router";
+import { getPathWithBase, isBrowser } from "@/utils";
 import event from "@/api/event";
 
 export default (param) => {
@@ -14,11 +15,17 @@ export default (param) => {
       page_path: param,
     };
   } else if (param.path || param.fullPath) {
-    const { pageTrackerUseFullPath } = getOptions();
+    const {
+      pageTrackerUseFullPath: useFullPath,
+      pageTrackerPrependBase: useBase,
+    } = getOptions();
+    const router = getRouter();
+    const base = router && router.options.base;
+    const path = useFullPath ? param.fullPath : param.path;
 
     template = {
       ...(param.name && { page_title: param.name }),
-      page_path: pageTrackerUseFullPath ? param.fullPath : param.path,
+      page_path: useBase ? getPathWithBase(path, base) : path,
     };
   } else {
     template = param;

src/options.js

@@ -17,6 +17,7 @@ export const getDefaultParams = () => ({
   pageTrackerScreenviewEnabled: false,
   appName: null,
   pageTrackerUseFullPath: false,
+  pageTrackerPrependBase: true,
   pageTrackerSkipSamePath: true,
   globalDataLayerName: "dataLayer",
   globalObjectName: "gtag",

src/track.js

@@ -1,41 +1,31 @@
 import { getOptions } from "@/options";
-import { warn, isFn } from "@/utils";
+import { validateScreenviewShape, isFn } from "@/utils";
 import * as api from "@/api";
 
 export default (to = {}, from = {}) => {
   const {
     appName,
-    pageTrackerTemplate,
-    pageTrackerScreenviewEnabled,
-    pageTrackerSkipSamePath,
+    pageTrackerTemplate: proxy,
+    pageTrackerScreenviewEnabled: useScreenview,
+    pageTrackerSkipSamePath: skipSamePath,
   } = getOptions();
 
-  let template = to;
-
-  if (isFn(pageTrackerTemplate)) {
-    template = pageTrackerTemplate(to, from);
-  } else if (pageTrackerScreenviewEnabled) {
-    warn(
-      `Missing "appName" property inside the plugin options.`,
-      appName == null
-    );
+  if (skipSamePath && to.path === from.path) {
+    return;
+  }
 
-    warn(
-      `Missing "name" property in the route with path value "${to.path}".`,
-      to.name == null
-    );
+  let template = to;
 
-    template = {
+  if (isFn(proxy)) {
+    template = proxy(to, from);
+  } else if (useScreenview) {
+    template = validateScreenviewShape({
       app_name: appName,
       screen_name: to.name,
-    };
-  }
-
-  if (pageTrackerSkipSamePath && to.path === from.path) {
-    return;
+    });
   }
 
-  if (pageTrackerScreenviewEnabled) {
+  if (useScreenview) {
     api.screenview(template);
     return;
   }

src/utils.js

@@ -78,3 +78,25 @@ export const warn = (text, shouldLog = true) => {
 
   console.warn(`[vue-gtag] ${text}`);
 };
+
+export const validateScreenviewShape = (obj = {}) => {
+  warn(
+    `Missing "appName" property inside the plugin options.`,
+    obj.app_name == null
+  );
+
+  warn(`Missing "name" property in the route.`, obj.screen_name == null);
+
+  return obj;
+};
+
+export function getPathWithBase(path = "", base = "") {
+  const pathAsArray = path.split("/");
+  const baseAsArray = base.split("/");
+
+  if (pathAsArray[0] === "" && base[base.length - 1] === "/") {
+    pathAsArray.shift();
+  }
+
+  return baseAsArray.join("/") + pathAsArray.join("/");
+}

test/__snapshots__/options.spec.js.snap

@@ -25,6 +25,7 @@ Object {
   "onReady": null,
   "pageTrackerEnabled": true,
   "pageTrackerExcludedRoutes": Array [],
+  "pageTrackerPrependBase": true,
   "pageTrackerScreenviewEnabled": false,
   "pageTrackerSkipSamePath": true,
   "pageTrackerTemplate": null,
@@ -57,6 +58,7 @@ Object {
   "onReady": null,
   "pageTrackerEnabled": true,
   "pageTrackerExcludedRoutes": Array [],
+  "pageTrackerPrependBase": true,
   "pageTrackerScreenviewEnabled": false,
   "pageTrackerSkipSamePath": true,
   "pageTrackerTemplate": null,

test/api/pageview.spec.js

@@ -152,4 +152,68 @@ describe("pageview", () => {
       });
     });
   });
+
+  describe("router base path", () => {
+    test("use with router installed", async () => {
+      const localVue = createLocalVue();
+      const router = new VueRouter({
+        mode: "abstract",
+        base: "/app/",
+        routes: [{ path: "/" }, { path: "/about" }],
+      });
+
+      localVue.use(VueRouter);
+      localVue.use(
+        VueGtag,
+        {
+          pageTrackerPrependBase: true,
+          config: {
+            id: 1,
+          },
+        },
+        router
+      );
+
+      router.push("/about");
+
+      await flushPromises();
+
+      pageview(router.currentRoute);
+
+      expect(event).toHaveBeenCalledWith("page_view", {
+        send_page_view: true,
+        page_path: "/app/about",
+        page_location: "window_location_href_value",
+      });
+    });
+
+    test("use without router installed", async () => {
+      const localVue = createLocalVue();
+      const router = new VueRouter({
+        mode: "abstract",
+        base: "/app/",
+        routes: [{ path: "/" }, { path: "/about" }],
+      });
+
+      localVue.use(VueRouter);
+      localVue.use(VueGtag, {
+        pageTrackerPrependBase: true,
+        config: {
+          id: 1,
+        },
+      });
+
+      router.push("/about");
+
+      await flushPromises();
+
+      pageview(router.currentRoute);
+
+      expect(event).toHaveBeenCalledWith("page_view", {
+        send_page_view: true,
+        page_path: "/about",
+        page_location: "window_location_href_value",
+      });
+    });
+  });
 });

test/track.spec.js

@@ -173,7 +173,7 @@ describe("track", () => {
       await flushPromises();
 
       expect(console.warn).toHaveBeenCalledWith(
-        `[vue-gtag] Missing "name" property in the route with path value "/about".`
+        `[vue-gtag] Missing "name" property in the route.`
       );
     });
   });