Svelte Facebook Pixel

Overview

The Svelte Facebook Pixel Component is a tracking component for Svelte v3 that allows users to implement Facebook pixel tracking on their website. It provides an easy way to track events and pageviews with Facebook pixels.

Features

• Multiple Pixels on a page: Users can have multiple pixels on a page, allowing for backup pixels or different events to be sent to different pixels.
• Track events: Users can track events by simply calling the track method.
• Track Single Pixel: Users can send events to individual pixels if desired.
• Disable Pixel for GDPR: Users can install the pixel in a disabled state and enable it later after the user has consented to its use.

Installation

To install the Svelte Facebook Pixel Component, follow these steps:

1. Install the component using npm:

npm install svelte-facebook-pixel-component

2. Import the FacebookPixel component in your Svelte component:

import FacebookPixel from 'svelte-facebook-pixel-component';

3. Initialize the FacebookPixel component in your component:

let pixel = new FacebookPixel({
  pixelId: 'YOUR_PIXEL_ID',
  enabled: true
});

4. In your component’s HTML, call the start method to start the pixel and track the current page:

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    pixel.start();
    pixel.track('PageView');
  });
</script>

5. Customize the component to fit your tracking needs and add additional events as desired.

Summary

The Svelte Facebook Pixel Component is a useful tool for implementing Facebook pixel tracking in Svelte v3 projects. It allows for easy tracking of events and pageviews with the ability to have multiple pixels on a page. It also provides options to disable the pixel for GDPR compliance. The component is easy to install and use, making it a valuable addition to any Svelte project.