Vue Laravel |Интеграция GTM

Question

Ну, у меня есть настройка Laravel Vue.

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"
  }
}

Я пытаюсь интегрировать GTM.Я мог бы использовать vue-gtm, но так как я не использую vue-router, его очень сложно настроить.Я использую маршруты Laravel.

Какие-нибудь решения для его интеграции?

Если кто-нибудь знает, как интегрировать spatie / laravel-googletagmanager с vue ... Пожалуйста, помогите мне.

Answer 1

vue-gtm не требует роутера. это просто автоматизирует и делает это проще, это не значит, что вы должны это делать.

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)
});

Вы можете полностью игнорировать добавление параметров vueRouter и ignoredViews выше.

Тогда в ваших компонентах, которые должны отправлять события:

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

Вы можете использовать эту функцию для любого действия. Загрузка страницы, щелчок, отправка формы и т. Д. Просто измените свойства в соответствии с вашими потребностями.