vue-gtm - npm Package Compare versions

Comparing version 3.0.0-alpha.3 to 3.0.0-alpha.4

CHANGELOG.md

@@ -15,5 +15,7 @@ # Next
   - `3.0.0-vue2` with a npm tag `vue2`: Vue 2.x
+- The class name of the `$gtm` instance changed from `AnalyticsPlugin` to `VueGtmPlugin`
 
 ## Other Changes
 
+- Possibility to track additional event data
 - Throw error on invalid `GTM-ID`
@@ -20,0 +22,0 @@ - Fix handling of multiple `GTM-ID`s

dist/config.d.ts

@@ -1,3 +0,48 @@
-import { VueGtmUseOptions } from "./types";
+export interface VueGtmUseOptions {
+    /**
+     * Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']
+     */
+    id: string | string[];
+    /**
+     * Add url query string when load gtm.js with GTM ID
+     */
+    queryParams?: {
+        gtm_auth: string;
+        gtm_preview: string;
+        gtm_cookies_win: string;
+    };
+    /**
+     * Script can be set to `defer` to increase page-load-time at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible)
+     *
+     * @default false
+     */
+    defer?: boolean;
+    /**
+     * Plugin can be disabled by setting this to `false` for Ex: `enabled: !!GDPR_Cookie`
+     *
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Whether or not display console logs debugs
+     */
+    debug?: boolean;
+    /**
+     * Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components)
+     */
+    loadScript?: boolean;
+    /**
+     * Pass the router instance to automatically sync with router
+     */
+    vueRouter?: any;
+    /**
+     * Don't trigger events for specified router names (case insensitive)
+     */
+    ignoredViews?: string[];
+    /**
+     * Whether or not call `trackView` in `Vue.nextTick`
+     */
+    trackOnNextTick?: boolean;
+}
 declare const config: VueGtmUseOptions;
 export default config;

dist/index.d.ts

 import { Plugin } from "vue";
-import { VueGtmObject } from "./types";
 declare module "@vue/runtime-core" {
     interface ComponentCustomProperties {
-        $gtm: VueGtmObject;
+        $gtm: VueGtmPlugin;
     }
 }
 export declare type VueGtmPlugin = Plugin;
-export { VueGtmUseOptions } from "./types";
+export { VueGtmUseOptions } from "./config";
 declare const _default: VueGtmPlugin;
 export default _default;

dist/index.js

@@ -27,3 +27,3 @@ "use strict";
 var config_1 = require("./config");
-var GtmPlugin_1 = require("./GtmPlugin");
+var plugin_1 = require("./plugin");
 var utils_1 = require("./utils");
@@ -72,3 +72,3 @@ var GTM_ID_PATTERN = /^GTM\-[A-Z]+$/;
     // Add to vue prototype and also from globals
-    Vue.config.globalProperties.$gtm = new GtmPlugin_1.default(config_1.default.id);
+    Vue.config.globalProperties.$gtm = new plugin_1.default(config_1.default.id);
     // Load GTM script when enabled
@@ -104,5 +104,5 @@ if (config_1.default.enabled && config_1.default.loadScript) {
     vueRouter.afterEach(function (to) {
+        var _a;
         // Ignore some routes
-        if (!to.name ||
-            (ignoredViews && ignoredViews.indexOf(to.name.toLowerCase()) !== -1)) {
+        if (!to.name || (ignoredViews && ignoredViews.indexOf(to.name.toLowerCase()) !== -1)) {
             return;
@@ -112,2 +112,3 @@ }
         var name = to.meta.gtm || to.name;
+        var additionalEventData = (_a = to.meta.gtmAdditionalEventData) !== null && _a !== void 0 ? _a : {};
         var baseUrl = vueRouter.options.base || "";
@@ -118,12 +119,10 @@ var fullUrl = baseUrl;
         }
-        fullUrl += to.fullPath.startsWith("/")
-            ? to.fullPath.substr(1)
-            : to.fullPath;
+        fullUrl += to.fullPath.startsWith("/") ? to.fullPath.substr(1) : to.fullPath;
         if (trackOnNextTick) {
             vue_1.nextTick(function () {
-                Vue.config.globalProperties.$gtm.trackView(name, fullUrl);
+                Vue.config.globalProperties.$gtm.trackView(name, fullUrl, additionalEventData);
             });
         }
         else {
-            Vue.config.globalProperties.$gtm.trackView(name, fullUrl);
+            Vue.config.globalProperties.$gtm.trackView(name, fullUrl, additionalEventData);
         }
@@ -130,0 +129,0 @@ });

dist/utils.d.ts

 import "url-search-params-polyfill";
-import { VueGtmUseOptions } from "./types";
+import { VueGtmUseOptions } from "./config";
 /**
@@ -4,0 +4,0 @@ * Console log depending on config debug mode

package.json

 {
   "name": "vue-gtm",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "description": "Google Tag Manager implementation in Vue application",
@@ -20,3 +20,5 @@ "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "clean": "rm -Rf dist yarn.lock node_modules",
+    "build": "tsc",
+    "format": "prettier --write ."
   },
@@ -59,2 +61,3 @@ "repository": {
   "devDependencies": {
+    "prettier": "2.1.2",
     "typescript": "^4.0.3",
@@ -61,0 +64,0 @@ "vue": "^3.0.0"

README.md

@@ -28,5 +28,5 @@ <h1 align="center">Vue Google Tag Manager</h1>
   </a>
-  <!-- <a href="#badge">
+  <a href="#badge">
     <img alt="code style: Prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square">
-  </a> -->
+  </a>
   <a href="https://github.com/mib200/vue-gtm/actions?query=branch%3Amaster+workflow%3ACI">
@@ -77,3 +77,3 @@ <img alt="Build Status" src="https://github.com/mib200/vue-gtm/workflows/CI/badge.svg?branch=master">
   vueRouter: router, // Pass the router instance to automatically sync with router (optional)
-  ignoredViews: ['homepage'], // If router, you can exclude some routes name (case insensitive) (optional)
+  ignoredViews: ['homepage'], // Don't trigger events for specified router names (case insensitive) (optional)
   trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
@@ -105,3 +105,3 @@ }
   vueRouter: router, // Pass the router instance to automatically sync with router (optional)
-  ignoredViews: ['homepage'], // If router, you can exclude some routes name (case insensitive) (optional)
+  ignoredViews: ['homepage'], // Don't trigger events for specified router names (case insensitive) (optional)
   trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
@@ -108,0 +108,0 @@ });

src/config.ts

@@ -1,2 +0,47 @@
-import { VueGtmUseOptions } from "./types";
+export interface VueGtmUseOptions {
+  /**
+   * Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']
+   */
+  id: string | string[];
+  /**
+   * Add url query string when load gtm.js with GTM ID
+   */
+  queryParams?: {
+    gtm_auth: string;
+    gtm_preview: string;
+    gtm_cookies_win: string;
+  };
+  /**
+   * Script can be set to `defer` to increase page-load-time at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible)
+   *
+   * @default false
+   */
+  defer?: boolean;
+  /**
+   * Plugin can be disabled by setting this to `false` for Ex: `enabled: !!GDPR_Cookie`
+   *
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Whether or not display console logs debugs
+   */
+  debug?: boolean;
+  /**
+   * Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components)
+   */
+  loadScript?: boolean;
+  /**
+   * Pass the router instance to automatically sync with router
+   */
+  vueRouter?: any;
+  /**
+   * Don't trigger events for specified router names (case insensitive)
+   */
+  ignoredViews?: string[];
+  /**
+   * Whether or not call `trackView` in `Vue.nextTick`
+   */
+  trackOnNextTick?: boolean;
+}
 
@@ -3,0 +48,0 @@ // @ts-ignore

src/index.ts

 import { App, nextTick, Plugin } from "vue";
-import pluginConfig from "./config";
-import GtmPlugin from "./GtmPlugin";
-import { VueGtmObject, VueGtmUseOptions } from "./types";
+import pluginConfig, { VueGtmUseOptions } from "./config";
+import GtmPlugin from "./plugin";
 import { loadScript } from "./utils";
@@ -15,3 +14,3 @@
  */
-function install(Vue: App, initConf: VueGtmUseOptions = { id: "" }) {
+function install(Vue: App, initConf: VueGtmUseOptions = { id: "" }): void {
   if (Array.isArray(initConf.id)) {
@@ -78,8 +77,12 @@ for (const id of initConf.id) {
   vueRouter.afterEach(
-    (to: { name?: string; meta: { gtm: string }; fullPath: string }) => {
+    (to: {
+      name?: string;
+      meta: Partial<{
+        gtm: string;
+        gtmAdditionalEventData: Record<string, any>;
+      }>;
+      fullPath: string;
+    }) => {
       // Ignore some routes
-      if (
-        !to.name ||
-        (ignoredViews && ignoredViews.indexOf(to.name.toLowerCase()) !== -1)
-      ) {
+      if (!to.name || (ignoredViews && ignoredViews.indexOf(to.name.toLowerCase()) !== -1)) {
         return;
@@ -90,2 +93,3 @@ }
       const name: string = to.meta.gtm || to.name;
+      const additionalEventData: Record<string, any> = to.meta.gtmAdditionalEventData ?? {};
       const baseUrl: string = vueRouter.options.base || "";
@@ -96,12 +100,10 @@ let fullUrl: string = baseUrl;
       }
-      fullUrl += to.fullPath.startsWith("/")
-        ? to.fullPath.substr(1)
-        : to.fullPath;
+      fullUrl += to.fullPath.startsWith("/") ? to.fullPath.substr(1) : to.fullPath;
 
       if (trackOnNextTick) {
         nextTick(() => {
-          Vue.config.globalProperties.$gtm.trackView(name, fullUrl);
+          Vue.config.globalProperties.$gtm.trackView(name, fullUrl, additionalEventData);
         });
       } else {
-        Vue.config.globalProperties.$gtm.trackView(name, fullUrl);
+        Vue.config.globalProperties.$gtm.trackView(name, fullUrl, additionalEventData);
       }
@@ -116,3 +118,3 @@ }
   export interface ComponentCustomProperties {
-    $gtm: VueGtmObject;
+    $gtm: VueGtmPlugin;
   }
@@ -122,3 +124,3 @@ }
 export type VueGtmPlugin = Plugin;
-export { VueGtmUseOptions } from "./types";
+export { VueGtmUseOptions } from "./config";
 
@@ -125,0 +127,0 @@ const _default: VueGtmPlugin = { install };

src/utils.ts

 import "url-search-params-polyfill";
-import pluginConfig from "./config";
-import { VueGtmUseOptions } from "./types";
+import pluginConfig, { VueGtmUseOptions } from "./config";
 
@@ -22,6 +21,3 @@ /**
  */
-export function loadScript(
-  id: string,
-  config: Pick<VueGtmUseOptions, "defer" | "queryParams"> = {}
-): void {
+export function loadScript(id: string, config: Pick<VueGtmUseOptions, "defer" | "queryParams"> = {}): void {
   const win = window,
@@ -28,0 +24,0 @@ doc = document,

No alert changes

Improved metrics

Total package byte prevSize

47731

0.14%

Worsened metrics

Dev dependency count

3

50%

Number of package files

18

-14.29%

Lines of code

784

-3.09%

No dependency changes