Facebook Pixel Library

Overview

The Facebook Pixel library provides a simple and convenient way to integrate Facebook Pixel tracking into your web applications. The library offers methods for configuring the Facebook Pixel and tracking various events with optional data.

import { fb } from '@/facebookPixel'

fb.config({
  autoPageView: true,
  pixel: 'YOUR_PIXEL_ID'
})

Table of Contents

1. Installation

2. Usage

• Configuring Facebook Pixel
• Tracking Events
• In nuxt 3 project
• In vue project

3. API Reference

Installation

To use the Facebook Pixel library in your project, you can install it via your preferred package manager. For example, using npm:

npm install facebook-pixel

Usage

Configuring Facebook Pixel

To configure the Facebook Pixel, instantiate the FacebookPixel class and call the config method with the desired options:

import { fb } from 'facebook-pixel'

fb.config({
  autoPageView: true,
  pixel: 'YOUR_PIXEL_ID',
  disabled: true
})

Tracking Events

Tracking documentation

To track events with optional data, use the track method of the FacebookPixel class:

import { fb } from 'facebook-pixel'

// Track event without data
fb.track('Contact')

// Track event with data
fb.track('Purchase', { value: '0.00', currency: 'USD' })

In nuxt 3 project

Create a plugin to initialize settings

//plugins/facebookPixel.client.ts

import { fb } from 'facebook-pixel'

export default defineNuxtPlugin(() => {
  fb.config({ autoPageView: false, pixel: 'YOUR_PIXEL_ID' })
  fb.track('Purchase', { value: '0.00', currency: 'USD' })
})

In vue project

Start your settings

//src/main.ts

import { fb } from 'facebook-pixel'

export default defineNuxtPlugin(() => {
  fb.config({ autoPageView: false, pixel: 'YOUR_PIXEL_ID' })
})

Add methods per page

//src/components/pages/index.vue

<template>
  <div class="index">
    <IndexTemplate />
  </div>
</template>

<script setup lang="ts">
import { fb } from 'facebook-pixel'

onMounted(() => {
  fb.track('Contact')
})
</script>

API Reference

config(options: FacebookPixelConfig): void Configures the Facebook Pixel based on the provided options.

track(event: EventWithoutData): void Tracks a Facebook event without data.

track(event: EventWithData, data: EventData): void Tracks a Facebook event with optional data.