Vue Laravel | GTM Integration

Well I have a Laravel Vue setup.

Package.json

{
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "4.0.0-beta",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "1.2.0",
    "lodash": "^4.17.4",
    "vue": "^2.4.2"
  },
  "dependencies": {
    "favico.js": "^0.3.10",
    "intersection-observer": "^0.5.0",
    "laravel-echo": "^1.3.2",
    "moment-timezone": "^0.5.14",
    "popper.js": "^1.12.2",
    "pusher-js": "^4.2.1",
    "sweetalert2": "^6.6.8",
    "vue-image-crop-upload": "^1.3.15",
    "vue-moment": "^2.0.2",
    "vue-multiselect": "2.0.2",
    "vue-observe-visibility": "^0.3.1",
    "vue-switches": "^1.1.7",
    "vue-template-compiler": "^2.4.2"
  }
}

I am trying to integrate GTM. I could have used vue-gtm but since I am not using vue-router Its really hard to configure. I am using Laravel routes.

Any solutions to integrate it?

If anyone know how to integrate spatie/laravel-googletagmanager with vue .. Please help me out.

vue-gtm does not require the router. it just automates it and makes it easier, it doesn't mean you have to do this.

import VueGtm from 'vue-gtm';
import VueRouter from 'vue-router';
const router = new VueRouter({ routes, mode, linkActiveClass });

Vue.use(VueGtm, {
  id: 'GTM-xxxxxxx', // Your GTM ID
  enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
  debug: true, // Whether or not display console logs debugs (optional)
  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)
});

You can completely disregard adding the vueRouter and ignoredViews parameters above.

Then in your components that need to dispatch events:

this.$gtm.trackEvent({
  event: null, // Event type [default = 'interaction'] (Optional)
  category: 'Calculator',
  action: 'click',
  label: 'Home page SIP calculator',
  value: 5000,
  noninteraction: false // Optional
});

You can figure that function on any action. Page load, click, form submission, etc. Just change the properties to meet your needs.