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

你可以在任何动作上计算出这个函数。页面加载、点击、表单提交等，只需更改属性即可满足您的需求。

vue laravel | GTM整合

vue laravel | GTM Integration

laravel

google-tag-manager

vue.js