Linking vue-gtm (Google Tag Manager) with a Router instance

Question

Linking vue-gtm (Google Tag Manager) with a Router instance

Utilizing the following npm package: https://www.npmjs.com/package/vue-gtm

Within my router.js file (using vue cli 3), I am attempting to connect it to a router instance:

import Vue from 'vue'
import Router from 'vue-router'
import VueGtm from 'vue-gtm'

Vue.use(VueGtm, {
  id: 'GTM-xxxxxxx',
  enabled: true,
  debug: true,
  vueRouter: Router
})

export default new Router({
  mode: 'history'
})

However, it is evident that this approach will not function as intended. How can I properly link vue-gtm to a Router in my scenario, where I export the Router instance without assigning it to a variable?

const router = new Router({})

javascript vue.js vuejs2

Answer 1

Answer №1

There is an error in how you are passing the Router class for vueRouter in the following code:

Vue.use(VueGtm, {
  //vueRouter: Router, // <-- DON'T DO THIS
})

The correct way to pass the vueRouter value is by using the router instance. For example, your router.js file should be structured like this:

const routes = [
  //...
]

const router = new Router({
  mode: 'history',
  routes
})

Vue.use(VueGtm, {
  vueRouter: router, // <-- router instance
  //...
})

export default router

Answer 2

There is an error in how you are passing the Router class for vueRouter in the following code:

Vue.use(VueGtm, {
  //vueRouter: Router, // <-- DON'T DO THIS
})

The correct way to pass the vueRouter value is by using the router instance. For example, your router.js file should be structured like this:

const routes = [
  //...
]

const router = new Router({
  mode: 'history',
  routes
})

Vue.use(VueGtm, {
  vueRouter: router, // <-- router instance
  //...
})

export default router

Linking vue-gtm (Google Tag Manager) with a Router instance

Answer №1

Similar questions

JQuery post request not providing the expected response after posting

Utilizing a variable within an Angular filter: A step-by-step guide

Hide the .prev button on the jQuery slider when it is on the first

Display detailed images upon hovering

How to resolve logic issues encountered during Jasmine testing with describe()?

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?

Is there a way to expand a pie chart into a new pie chart with PHP and Javascript?

Remaking the functionality of jQuery's $.ajax() method while utilizing the .done() method

Determine the remaining days until the end of the month using moment.js

Encountering Problem with Office Object Access in Vue.js Outlook Add-in

Tips for overriding ng-disable in AngularJSUnleashing the

What could be causing the bootstrap 4 col-md-3 block to shrink when using position fixed?

Preserve the form data in HTML even following redirection from a different HTML page

Dynamically populate 7 select boxes with options using JQuery

Using useState in ReactJS does not allow setting state data

The art of sketching precise lines encircling a circular shape through the

Utilizing a d.ts Typescript Definition file for enhanced javascript intellisene within projects not using Typescript

What steps are involved in setting up server-side pagination in AngularJS with angular-ui bootstrap?

The alignment of Bootstrap v4.5 checkbox is limited as it cannot be positioned horizontally or vertically when placed next to an input field

Is there a way to ensure that axios.get runs synchronously?