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