nuxt-meta-pixel

我需要一个用于大型项目的 Facebook 像素集成，但我发现的那些都不符合我的预期。因此，我花时间了解像素的工作原理，并开发了**一个尽可能简单的独特集成**，并且**比任何其他集成都更有效**。

功能

✨ 使用 TypeScript 编写，甚至 Facebook 的事件也进行了类型化。
🤖 您可以加载任意数量的元像素。
📨 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