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 (預設值：**) - glob 表達式，用於決定哪些路徑應該自動發送 PageView 事件。查看更多

環境變數

// .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