以Nuxt3 开发的业务中，我们可能要做各种埋点动作， 比如 google埋点， facebook 埋点， 神策埋点, 百度埋点
如果不同的埋点方， 提供了 npm 包的形式，也是可以直接 npm 安装使用， 今天讲讲，怎么通过 script的方式添加
google 埋点
进入管理后台 - analytics.google.com/analytics/w…
如果没有，就添加数据流
手动添加
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag () {
dataLayer.push(arguments);
}
gtag('js', new Date()); gtag('config', 'G-xxxxxxx');
</script>
就是这样一段js
配置
在 nuxt.config.ts中配置
export default defineNuxtConfig({
devtools: { enabled: true },
app: {
head: {
script: [
// 方式一： 直接 innerHTML 注入
{
innerHTML: `<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxx"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-xxx'); </script>
`,
type: 'text/javascript'
},
// 方式二：引入外部链接
{
// 添加的就是 public/js/facebook.js 代码
src: '/js/facebook.js',
type: 'text/javascript'
}
]
}
},
})
facebook 追踪代码
public/js/facebook.js
!(function (f, b, e, v, n, t, s) {
if (f.fbq) return
n = f.fbq = function () {
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
}
if (!f._fbq) f._fbq = n
n.push = n
n.loaded = !0
n.version = '2.0'
n.queue = []
t = b.createElement(e)
t.async = !0
t.src = v
s = b.getElementsByTagName(e)[0]
s.parentNode.insertBefore(t, s)
})(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js')
fbq('init', 'xxxxxxx')
fbq('track', 'PageView')
其他写法都差不多。
上面已经演示了 在 nuxt3中使用2种方法接入第三方埋点
随着项目越来越大， 比较推荐使用外部链接的方式，方便维护。
注意事项
在nuxt.config.ts 接入 script ， 需要自己注意 依赖顺序。毕竟是js是从上往下执行的。需要注意代码的引入和代码的调用顺序。
