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