vue-gtm - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

CHANGELOG.md

 # Next
 
-[diff](https://github.com/mib200/vue-gtm/compare/3.1.1...master)
+[diff](https://github.com/mib200/vue-gtm/compare/3.2.0...master)
 
+# 3.2.0
+
+[diff](https://github.com/mib200/vue-gtm/compare/3.1.1...3.2.0)
+
+- Usable gtm instance in composition API ([#107])
+
+[#107]: https://github.com/mib200/vue-gtm/pull/107
+
 # 3.1.1
@@ -6,0 +14,0 @@

dist/index.d.ts

 import { App, Plugin } from "vue";
 import { VueGtmUseOptions } from "./config";
+import GtmPlugin from "./plugin";
 export declare function createGtm(options: VueGtmUseOptions): {
@@ -15,1 +16,5 @@ install: (app: App) => void;
 export default _default;
+/**
+ * Returns gtm plugin to be used via composition api inside setup method
+ */
+export declare function useGtm(): GtmPlugin | undefined;

dist/index.js

@@ -25,3 +25,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createGtm = void 0;
+exports.useGtm = exports.createGtm = void 0;
 var vue_1 = require("vue");
@@ -31,2 +31,3 @@ var config_1 = require("./config");
 var utils_1 = require("./utils");
+var gtmPlugin;
 var GTM_ID_PATTERN = /^GTM\-[0-9A-Z]+$/;
@@ -76,3 +77,4 @@ /**
     // Add to vue prototype and also from globals
-    Vue.config.globalProperties.$gtm = new plugin_1.default(config_1.default.id);
+    gtmPlugin = new plugin_1.default(config_1.default.id);
+    Vue.config.globalProperties.$gtm = gtmPlugin;
     // Load GTM script when enabled
@@ -139,1 +141,8 @@ if (config_1.default.enabled && config_1.default.loadScript) {
 exports.default = _default;
+/**
+ * Returns gtm plugin to be used via composition api inside setup method
+ */
+function useGtm() {
+    return gtmPlugin;
+}
+exports.useGtm = useGtm;

package.json

 {
   "name": "vue-gtm",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Google Tag Manager implementation in Vue application",
@@ -61,3 +61,3 @@ "main": "dist/index.js",
     "prettier": "2.2.1",
-    "typescript": "^4.1.2",
+    "typescript": "^4.1.3",
     "vue": "^3.0.0"
@@ -64,0 +64,0 @@ },

README.md

@@ -188,2 +188,41 @@ <h1 align="center">Vue Google Tag Manager</h1>
 
+## Using with composition API
+
+In order to use this plugin with composition API (inside your `setup` method), you can just call the custom composable `useGtm`.
+
+Example:
+
+```js
+<template>
+  <button @click="triggerEvent">Trigger event!</button>
+</template>
+
+<script>
+import { useGtm } from 'vue-gtm';
+
+export default {
+  name: "MyCustomComponent",
+
+  setup() {
+    const gtm = useGtm();
+
+    function triggerEvent() {
+      gtm.trackEvent({
+          event: 'event name',
+          category: "category",
+          action: "click",
+          label: "My custom component trigger",
+          value: 5000,
+          noninteraction: false,
+      });
+    }
+
+    return {
+      triggerEvent
+    };
+  }
+}
+</script>
+```
+
 ## Methods
@@ -190,0 +229,0 @@

src/index.ts

@@ -6,4 +6,4 @@ import { App, nextTick, Plugin } from "vue";
 
+let gtmPlugin: GtmPlugin | undefined;
 const GTM_ID_PATTERN: RegExp = /^GTM\-[0-9A-Z]+$/;
-
 /**
@@ -46,3 +46,4 @@ * Installation procedure
   // Add to vue prototype and also from globals
-  Vue.config.globalProperties.$gtm = new GtmPlugin(pluginConfig.id);
+  gtmPlugin = new GtmPlugin(pluginConfig.id);
+  Vue.config.globalProperties.$gtm = gtmPlugin;
 
@@ -135,1 +136,8 @@ // Load GTM script when enabled
 export default _default;
+
+/**
+ * Returns gtm plugin to be used via composition api inside setup method
+ */
+export function useGtm(): GtmPlugin | undefined {
+  return gtmPlugin;
+}

No alert changes

Improved metrics

Total package byte prevSize

51695

2.96%

Lines of code

848

2.66%

Number of lines in readme file

272

16.74%

No dependency changes