nuxt-meta-pixel
大規模なプロジェクトに Facebook ピクセル統合が必要でしたが、見つけたものは期待に応えられませんでした。そこで、ピクセルがどのように機能するかを理解するために時間をかけ、あるべき姿にシンプルで、他のどの統合よりもはるかに効果的な独自の統合を開発しました。
機能
- ✨ TypeScript で書かれており、Facebook のイベントも型付けされています。
- 🤖 必要なだけ多くの Meta ピクセルを読み込めます。
- 📨
PageViewイベントは、設定可能なルートの一致に基づいて自動的に送信されます。 - ⚙️
.envファイル経由で設定可能です。 - 🚀 Facebook が提供するすべての機能が利用可能です:
track,trackSingle,trackCustom&trackSingleCustom。 - ❤️ 貢献を歓迎します。
クイックセットアップ
1つのコマンドでモジュールを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