时间戳

首页 > 解决方案 > vue laravel | GTM 集成

laravel - vue laravel | GTM 集成

问题描述

好吧，我有一个 Laravel Vue 设置。

包.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 集成。请帮帮我。

标签： laravelvue.jsgoogle-tag-manager

解决方案

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

您可以在任何操作上计算该功能。页面加载、点击、表单提交等。只需更改属性以满足您的需求。

推荐阅读