feat: version 3

.github/workflows/deployment.yml

@@ -25,6 +25,9 @@ jobs:
 
       - name: Run linter
         run: npm run lint
+
+      - name: Run type check
+        run: npm run typecheck
 
       - name: Run tests
         run: npm run test:once

.vscode/settings.json

@@ -4,5 +4,8 @@
   "editor.codeActionsOnSave": {
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
-  }
+  },
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.detectIndentation": false
 }

biome.json

@@ -8,11 +8,12 @@
   "files": {
     "ignoreUnknown": false,
     "ignore": ["dist"],
-    "include": ["./src"]
+    "include": ["./src/**/*.ts", "./tsconfig.json", "./global.d.ts"]
   },
   "formatter": {
     "enabled": true,
-    "indentStyle": "space"
+    "indentStyle": "space",
+    "indentWidth": 2
   },
   "organizeImports": {
     "enabled": true

package.json

@@ -2,7 +2,7 @@
   "name": "vue-gtag",
   "description": "Global Site Tag (gtag.js) plugin for Vue",
   "type": "module",
-  "version": "2.1.1",
+  "version": "3.0.0-beta.8",
   "author": {
     "name": "Matteo Gabriele",
     "email": "m.gabriele.dev@gmail.com"
@@ -15,9 +15,11 @@
   "scripts": {
     "dev": "vite build --watch",
     "fix": "biome check --write",
-    "build": "vite build",
-    "lint": "biome check",
+    "lint": "biome lint",
+    "build": "tsc --noEmit && vite build",
+    "typecheck": "tsc --noEmit",
     "test": "vitest",
+    "test:cov": "vitest run --coverage",
     "test:once": "vitest run",
     "prepublishOnly": "npm run lint && npm run test:once && npm run build"
   },
@@ -34,14 +36,12 @@
     "vue",
     "vuejs"
   ],
-  "main": "./dist/vue-gtag.cjs.js",
-  "module": "./dist/vue-gtag.esm.js",
-  "unpkg": "./dist/vue-gtag.umd.js",
-  "jsdelivr": "./dist/vue-gtag.umd.js",
-  "types": "vue-gtag.d.ts",
+  "main": "./dist/vue-gtag.js",
+  "module": "./dist/vue-gtag.js",
+  "unpkg": "./dist/vue-gtag.js",
+  "types": "./dist/vue-gtag.d.ts",
   "files": [
-    "dist",
-    "vue-gtag.d.ts"
+    "dist"
   ],
   "bugs": {
     "url": "https://github.com/MatteoGabriele/vue-gtag/issues"
@@ -52,10 +52,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@types/node": "^22.13.5",
+    "@vitest/coverage-v8": "^3.0.5",
     "flush-promises": "^1.0.2",
     "jsdom": "^26.0.0",
     "mockdate": "^3.0.5",
+    "terser": "^5.39.0",
     "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.0.5",
     "vue": "^3.0.0",
     "vue-router": "^4.5.0"

src/add-configuration.test.ts

@@ -0,0 +1,75 @@
+import mockdate from "mockdate";
+import addConfiguration from "./add-configuration";
+import query from "./api/query";
+import { resetSettings, updateSettings } from "./settings";
+
+mockdate.set("2025-02-27");
+
+vi.mock("./api/query");
+
+describe("addConfiguration", () => {
+  beforeEach(resetSettings);
+
+  it("should query with initial configuration", () => {
+    updateSettings({
+      tagId: "UA-12345678",
+    });
+
+    addConfiguration();
+
+    expect(query).toHaveBeenNthCalledWith(1, "js", new Date());
+    expect(query).toHaveBeenNthCalledWith(2, "config", "UA-12345678", {
+      send_page_view: false,
+    });
+  });
+
+  it("should query multiple domains", () => {
+    updateSettings({
+      tagId: "UA-1",
+      additionalAccounts: [
+        { tagId: "UA-2" },
+        { tagId: "UA-3", config: { currency: "USD" } },
+        { tagId: "UA-4", config: { send_page_view: true } },
+      ],
+    });
+
+    addConfiguration();
+
+    expect(query).toHaveBeenNthCalledWith(1, "js", new Date());
+    expect(query).toHaveBeenNthCalledWith(2, "config", "UA-1", {
+      send_page_view: false,
+    });
+
+    expect(query).toHaveBeenNthCalledWith(3, "config", "UA-2", {
+      send_page_view: false,
+      groups: "default",
+    });
+
+    expect(query).toHaveBeenNthCalledWith(4, "config", "UA-3", {
+      currency: "USD",
+      send_page_view: false,
+      groups: "default",
+    });
+
+    expect(query).toHaveBeenNthCalledWith(5, "config", "UA-4", {
+      send_page_view: true,
+      groups: "default",
+    });
+  });
+
+  it("should add the linker", () => {
+    updateSettings({
+      tagId: "UA-1",
+      linker: {
+        domains: ["domain.com"],
+      },
+    });
+
+    addConfiguration();
+
+    expect(query).toHaveBeenNthCalledWith(1, "set", "linker", {
+      domains: ["domain.com"],
+    });
+    expect(query).toHaveBeenNthCalledWith(2, "js", new Date());
+  });
+});

src/add-configuration.ts

@@ -0,0 +1,47 @@
+import linker from "./api/linker";
+import query from "./api/query";
+import { getSettings } from "./settings";
+import type { ConfigParams } from "./types/settings";
+
+function mergeDefaults(config: ConfigParams = {}): ConfigParams {
+  return {
+    send_page_view: false,
+    ...config,
+  };
+}
+
+export default function addConfiguration() {
+  const {
+    tagId,
+    config,
+    groupName,
+    linker: linkerOptions,
+    additionalAccounts,
+  } = getSettings();
+
+  if (!tagId) {
+    return;
+  }
+
+  if (linkerOptions) {
+    linker(linkerOptions);
+  }
+
+  query("js", new Date());
+  query("config", tagId, mergeDefaults(config));
+
+  if (!additionalAccounts) {
+    return;
+  }
+
+  for (const account of additionalAccounts) {
+    query(
+      "config",
+      account.tagId,
+      mergeDefaults({
+        groups: groupName,
+        ...account.config,
+      }),
+    );
+  }
+}

src/add-gtag.test.ts

@@ -0,0 +1,147 @@
+import { createRouter, createWebHistory } from "vue-router";
+import addConfiguration from "./add-configuration";
+import addGtag from "./add-gtag";
+import addRouterTracking from "./add-router-tracking";
+import { resetSettings, updateSettings } from "./settings";
+import * as utils from "./utils";
+
+vi.mock("./utils", async () => ({
+  ...(await vi.importActual("./utils.ts")),
+  injectScript: vi.fn(),
+}));
+
+vi.mock("./add-configuration");
+vi.mock("./add-router-tracking");
+vi.mock("./api/query");
+
+describe("addGtag", () => {
+  beforeEach(resetSettings);
+
+  it("should download the gtag.js library", async () => {
+    updateSettings({
+      tagId: "UA-12345678",
+    });
+
+    await addGtag();
+
+    const resource = "https://www.googletagmanager.com/gtag/js";
+    const preconnect = false;
+    const id = "UA-12345678";
+    const dataLayer = "dataLayer";
+    const url = `${resource}?id=${id}&l=${dataLayer}`;
+
+    expect(utils.injectScript).toHaveBeenCalledWith(url, {
+      preconnectOrigin: preconnect,
+      defer: false,
+    });
+  });
+
+  it("should download a custom version of the gtag.js library", async () => {
+    updateSettings({
+      tagId: "UA-12345678",
+      resource: {
+        url: "custom_resource_url",
+      },
+    });
+
+    await addGtag();
+
+    const resource = "custom_resource_url";
+    const id = "UA-12345678";
+    const dataLayer = "dataLayer";
+    const url = `${resource}?id=${id}&l=${dataLayer}`;
+
+    expect(utils.injectScript).toHaveBeenCalledWith(url, {
+      preconnectOrigin: false,
+      defer: false,
+    });
+  });
+
+  it("should fire callback when plugin is ready", async () => {
+    const spyOnReady = vi.fn();
+
+    updateSettings({
+      tagId: "UA-12345678",
+      onReady: spyOnReady,
+    });
+
+    await addGtag();
+
+    expect(spyOnReady).toHaveBeenCalled();
+  });
+
+  it("should fire callback when downloading library throws an error", async () => {
+    const spyOnError = vi.fn();
+
+    vi.spyOn(utils, "injectScript").mockRejectedValue(new Error());
+
+    updateSettings({
+      tagId: "UA-12345678",
+      onError: spyOnError,
+    });
+
+    await addGtag();
+
+    expect(spyOnError).toHaveBeenCalled();
+  });
+
+  it("should add initial gtag config call", async () => {
+    updateSettings({
+      tagId: "UA-12345678",
+    });
+
+    await addGtag();
+
+    expect(addConfiguration).toHaveBeenCalled();
+  });
+
+  it("should initialize router tracking", async () => {
+    const router = createRouter({
+      history: createWebHistory(),
+      routes: [{ path: "/", component: { template: "<div />" } }],
+    });
+
+    updateSettings({
+      tagId: "UA-12345678",
+      pageTracker: {
+        router,
+      },
+    });
+
+    await addGtag();
+
+    expect(addRouterTracking).toHaveBeenCalled();
+    expect(addConfiguration).toHaveBeenCalled();
+  });
+
+  it("should not bootstrap gtag if tagId is missing", async () => {
+    await addGtag();
+
+    expect(addConfiguration).not.toHaveBeenCalled();
+  });
+
+  it("should not inject the script in case the user has it already", async () => {
+    updateSettings({
+      tagId: "UA-12345678",
+      useCustomScript: true,
+    });
+
+    await addGtag();
+
+    expect(utils.injectScript).not.toHaveBeenCalled();
+  });
+
+  it("should fire the onReady callback even if using custom script loader", async () => {
+    const spyOnReady = vi.fn();
+
+    updateSettings({
+      tagId: "UA-12345678",
+      useCustomScript: true,
+      onReady: spyOnReady,
+    });
+
+    await addGtag();
+
+    expect(spyOnReady).toHaveBeenCalled();
+  });
+});