vuejs - 谷歌标签管理器答案

【问题标题】：vuejs - google tag managervuejs - 谷歌标签管理器
【发布时间】：2018-04-13 06:20:41
【问题描述】：

我有一个带有多个页面的vuejs 项目：

study.vue
result.vue

我的客户希望我添加Google Tag Manager 代码，以便他们可以使用谷歌分析进行跟踪。我应该在我的.vue 文件中的哪里添加代码？还是我应该将其添加到index.html？

更新01

这是我目前所做的：

我将Google Tag Manager 代码添加到index.html。
我安装了vue-gtm。
我有app.js 和bootstrap.js。基本上，bootstrap.js 将添加我所有的其他 js 框架。像lodash.js 或'jquery.js'。我将vue-gtm中的示例代码添加到bootstrap.js中：

window._ = 需要('lodash'); window.moment = require('moment');

window.Vue = require('vue');

从'vue-router'导入VueRouter； Vue.use(VueRouter)

从 'vue-gtm' 导入 VueGtm； Vue.use(VueGtm, { 调试：真 })
在所有vue 文件中，我添加了以下代码：

this.$ua.trackView('Sample', 'samplepath');

但是我得到了错误：

TypeError: 无法读取未定义的属性“trackView”

似乎是什么错误？

【问题讨论】：

标签： javascript google-analytics vuejs2 google-tag-manager

【解决方案1】：

我假设您是在谈论创建帐户时获得的脚本？

您的 HTML 中应该包含两个脚本，一个包含包含 (noscript) 的 cmets，另一个不包含。两者都应该放在你的 index.html 文件中（无论哪个文件有 <head> 和 <body> 标签）。有 noscript 的那个应该紧跟 <body> 标记之后，没有 noscript 的那个应该靠近<head> 部分的顶部。

如果您询问如何触发一个事件，例如当用户与其中一个 Vue 元素交互时，那么是的，触发事件的代码应该放在 Vue 组件中。 p>

更新 1：我研究了它并设置了我自己的 Laravel 安装来测试（因为这似乎是你正在使用的）并对其进行了测试。问题是$ua 是Vue Analytics 的一部分，所以如果你想使用$ua，你还需要安装vue-ua 模块并将其添加到Vue。我不知道为什么跟踪代码管理器模块的文档显示了如何使用分析模块而不参考它，也许您应该在跟踪代码管理器 GitHub 上提出问题以使文档更清晰！

因此，总而言之，您应该将$ua 替换为$gtm。我测试了它，$gtm 有一个trackView 函数，所以它可能会实现你想要的，但我不知道如何使用谷歌标签管理器，所以你必须自己测试一下。

【讨论】：