nuxt-meta-pixel
我需要为大型项目集成 Facebook 像素，但我找到的现有方案都无法满足我的期望。所以我花时间研究了像素的工作原理，并开发了一个简单易用且比任何其他集成都更有效的独特集成方案。
功能
- ✨ 用 TypeScript 编写，甚至 Facebook 的事件都经过类型定义。
- 🤖 你可以加载任意数量的 Meta 像素。
- 📨
PageView事件根据可配置的路由匹配自动发送。 - ⚙️ 可通过
.env文件进行配置。 - 🚀 Facebook 提供的所有可能性都可用：
track,trackSingle,trackCustom和trackSingleCustom。 - ❤️ 欢迎贡献。
快速设置
通过一个命令将模块安装到您的 Nuxt 应用中
npx nuxi module add nuxt-meta-pixel
就是这样！你现在可以在你的 Nuxt 应用中使用 nuxt-meta-pixel 了 ✨
入门
模块配置
该模块也可以在键 metapixel 下进行配置。
// nuxt.config.ts
// This example show how to load multiple pixels
export default defineNuxtConfig({
modules: ['nuxt-meta-pixel'],
runtimeConfig: {
public: {
metapixel: {
default: { id: '1176370652884847', pageView: '/posts/**' },
ads01: { id: '415215247513663' },
ads02: { id: '415215247513664', pageView: '!/posts/**' },
}
}
}
})
像素选项
- id
string- 你的像素 ID - autoconfig
boolean(默认值:true) - 启用或禁用像素自动配置。 查看更多 - pageView
string(默认值:**) - 用于决定哪些路由应该自动发送 PageView 事件的 glob 表达式。 查看更多
环境变量
// .env
// This example show how to define pixel ids via your environment variables
NUXT_PUBLIC_METAPIXEL_DEFAULT_ID=ID1
NUXT_PUBLIC_METAPIXEL_ADS01_ID=ID2
NUXT_PUBLIC_METAPIXEL_ADS02_ID=ID3
你尝试通过环境变量更新的变量必须在你的 nuxt.config.ts 中定义。将 DEFAULT, ADS01 或 ADS02 替换为你定义的名称。
高级用法
// app.vue
// This example show how to use fbq in your pages
<script setup lang="ts">
const { $fbq } = useNuxtApp()
onMounted(() => {
$fbq('track', 'CompleteRegistration')
$fbq('trackSingle', YOUR_PIXEL_ID, 'CompleteRegistration')
})
</script>
<template>
<div>nuxt-meta-pixel</div>
</template>
有用资源
贡献
本地开发
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release