nuxt-meta-pixel

大規模プロジェクト用に Facebook ピクセル連携が必要でしたが、既存のものは期待に応えられませんでした。そのため、ピクセルの仕組みを理解するために時間をかけ、本来あるべきシンプルな、そして他の連携よりもはるかに効果的な独自の連携を開発しました。

機能

✨ TypeScript で記述されており、Facebook のイベントも型指定されています。
🤖 必要な数のメタピクセルを読み込むことができます。
📨 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 イベントを自動的に送信するルートを決定するための 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