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-路由器，所以很难配置。我用的是拉拉维尔路线。

有什么解决办法来整合它吗？

如果有人知道如何将空间/拉拉-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
});

您可以在任何操作上显示该函数。页面加载、单击、表单提交等。只需更改属性以满足您的需要。