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 事件。查看更多

環境變數

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