You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue-gtm

Package Overview
Dependencies
Maintainers
2
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-gtm - npm Package Compare versions

Comparing version

3.0.0-alpha.5-vue2
to
3.0.0

2

CHANGELOG.md

@@ -5,3 +5,3 @@ # Next

# 3.0.0 (_currently in development_)
# 3.0.0

@@ -8,0 +8,0 @@ [diff](https://github.com/mib200/vue-gtm/compare/2.3.4...3.0.0)

14

dist/index.d.ts

@@ -1,14 +0,14 @@

import { PluginObject } from "vue";
import { App, Plugin } from "vue";
import { VueGtmUseOptions } from "./config";
declare module "vue/types/vue" {
interface Vue {
export declare function createGtm(options: VueGtmUseOptions): {
install: (app: App) => void;
};
declare module "@vue/runtime-core" {
interface ComponentCustomProperties {
$gtm: VueGtmPlugin;
}
interface VueConstructor<V extends Vue = Vue> {
gtm: VueGtmPlugin;
}
}
export declare type VueGtmPlugin = PluginObject<VueGtmUseOptions>;
export declare type VueGtmPlugin = Plugin;
export { VueGtmUseOptions } from "./config";
declare const _default: VueGtmPlugin;
export default _default;

16

dist/index.js

@@ -25,2 +25,4 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.createGtm = void 0;
var vue_1 = require("vue");
var config_1 = require("./config");

@@ -71,4 +73,3 @@ var plugin_1 = require("./plugin");

// Add to vue prototype and also from globals
// @ts-expect-error
Vue.prototype.$gtm = Vue.gtm = new plugin_1.default(config_1.default.id);
Vue.config.globalProperties.$gtm = new plugin_1.default(config_1.default.id);
// Load GTM script when enabled

@@ -85,2 +86,3 @@ if (config_1.default.enabled && config_1.default.loadScript) {

}
Vue.provide("gtm", initConf);
}

@@ -119,8 +121,8 @@ /**

if (trackOnNextTick) {
Vue.nextTick(function () {
Vue.gtm.trackView(name, fullUrl, additionalEventData);
vue_1.nextTick(function () {
Vue.config.globalProperties.$gtm.trackView(name, fullUrl, additionalEventData);
});
}
else {
Vue.gtm.trackView(name, fullUrl, additionalEventData);
Vue.config.globalProperties.$gtm.trackView(name, fullUrl, additionalEventData);
}

@@ -130,3 +132,7 @@ });

}
function createGtm(options) {
return { install: function (app) { return install(app, options); } };
}
exports.createGtm = createGtm;
var _default = { install: install };
exports.default = _default;

10

package.json
{
"name": "vue-gtm",
"version": "3.0.0-alpha.5-vue2",
"version": "3.0.0",
"description": "Google Tag Manager implementation in Vue application",

@@ -22,3 +22,4 @@ "main": "dist/index.js",

"build": "tsc",
"format": "prettier --write ."
"format": "prettier --write .",
"prepublishOnly": "yarn clean && yarn install --cache-folder .yarn && yarn build"
},

@@ -48,3 +49,2 @@ "repository": {

"tracking",
"Vue2",
"vue",

@@ -64,7 +64,7 @@ "google"

"typescript": "^4.0.3",
"vue": "^2.6.12"
"vue": "^3.0.0"
},
"peerDependencies": {
"vue": "^2.6.0"
"vue": "^3.0.0"
}
}

14

README.md

@@ -57,10 +57,10 @@ <h1 align="center">Vue Google Tag Manager</h1>

import { createApp } from 'vue';
import VueGtm, { VueGtmUseOptions } from 'vue-gtm';
import VueRouter from 'vue-router';
const router = new VueRouter({ routes, mode, linkActiveClass });
import { createGtm } from 'vue-gtm';
import router from "./router";
const app = createApp(App);
// Use a variable to get JSDoc support as well as type checking
const vueGtmOptions: VueGtmUseOptions = {
app.use(router);
app.use(createGtm({
id: 'GTM-xxxxxx' or ['GTM-xxxxxx', 'GTM-yyyyyy'], // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']

@@ -79,5 +79,3 @@ queryParams: { // Add url query string when load gtm.js with GTM ID (optional)

trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
}
app.use(VueGtm, vueGtmOptions);
}));
```

@@ -84,0 +82,0 @@

30

src/index.ts

@@ -1,2 +0,2 @@

import _Vue, { PluginObject } from "vue";
import { App, nextTick, Plugin } from "vue";
import pluginConfig, { VueGtmUseOptions } from "./config";

@@ -14,3 +14,3 @@ import GtmPlugin from "./plugin";

*/
function install(Vue: typeof _Vue, initConf: VueGtmUseOptions = { id: "" }): void {
function install(Vue: App, initConf: VueGtmUseOptions = { id: "" }): void {
if (Array.isArray(initConf.id)) {

@@ -41,4 +41,3 @@ for (const id of initConf.id) {

// Add to vue prototype and also from globals
// @ts-expect-error
Vue.prototype.$gtm = Vue.gtm = new GtmPlugin(pluginConfig.id);
Vue.config.globalProperties.$gtm = new GtmPlugin(pluginConfig.id);

@@ -55,2 +54,4 @@ // Load GTM script when enabled

}
Vue.provide("gtm", initConf);
}

@@ -69,3 +70,3 @@

function initVueRouterGuard(
Vue: typeof _Vue,
Vue: App,
{ vueRouter, ignoredViews, trackOnNextTick }: VueGtmUseOptions

@@ -103,7 +104,7 @@ ): string[] | undefined {

if (trackOnNextTick) {
Vue.nextTick(() => {
Vue.gtm.trackView(name, fullUrl, additionalEventData);
nextTick(() => {
Vue.config.globalProperties.$gtm.trackView(name, fullUrl, additionalEventData);
});
} else {
Vue.gtm.trackView(name, fullUrl, additionalEventData);
Vue.config.globalProperties.$gtm.trackView(name, fullUrl, additionalEventData);
}

@@ -116,12 +117,13 @@ }

declare module "vue/types/vue" {
export interface Vue {
export function createGtm(options: VueGtmUseOptions) {
return { install: (app: App) => install(app, options) };
}
declare module "@vue/runtime-core" {
export interface ComponentCustomProperties {
$gtm: VueGtmPlugin;
}
export interface VueConstructor<V extends Vue = Vue> {
gtm: VueGtmPlugin;
}
}
export type VueGtmPlugin = PluginObject<VueGtmUseOptions>;
export type VueGtmPlugin = Plugin;
export { VueGtmUseOptions } from "./config";

@@ -128,0 +130,0 @@