繁体 English 中英

vuejs-Google跟踪代码管理器

[英]vuejs - google tag manager

原文 2017-11-01 00:03:12 9 1 javascript/ google-analytics/ vuejs2/ google-tag-manager

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

学习
结果

我的客户希望我添加Google Tag Manager跟踪Google Tag Manager代码，以便他们可以使用google analytics进行跟踪。 我应该在.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._ = require（'lodash'）; window.moment = require（'moment'）;
window.Vue = require（'vue'）;
从'vue-router'导入VueRouter; Vue.use（VueRouter）
从'vue-gtm'导入VueGtm; Vue.use（VueGtm，{debug：true}）
在所有vue文件中，我添加以下代码：
$ ua.trackView（'Sample'，'samplepath'）;

但是我得到了错误：

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

似乎是什么错误？

1 个解决方案

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

HTML中应包含两个脚本，一个包含(noscript)注释，另一个不包含。 两者都应该放在index.html文件中（无论哪个文件带有<head>和<body>标记）。 在一个具有无脚本应在后立即去<body>标签，不具有无脚本应该去靠近顶部的一个<head>部分。

如果您询问如何触发事件，例如当用户与这些Vue元素之一进行交互时，则是的，触发事件的代码应该放在Vue组件中。

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

因此，在总结，则应更换$ua与$gtm来代替。 我对其进行了测试，并且$gtm具有trackView函数，因此它可能会实现您想要的功能，但是我不知道如何使用Google trackView代码管理器，因此您必须自己对其进行测试。