https://github.com/beyonk-group/svelte-facebook-pixel

A facebook pixel module for Svelte / SvelteKit
https://github.com/beyonk-group/svelte-facebook-pixel

analytics beyonk facebook facebook-pixel facebook-tracking svelte tracking vanillajs

Last synced: about 2 months ago
JSON representation

A facebook pixel module for Svelte / SvelteKit

• Host: GitHub
• URL: https://github.com/beyonk-group/svelte-facebook-pixel
• Owner: beyonk-group
• Created: 2018-10-19T10:12:32.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-08-01T15:08:05.000Z (5 months ago)
• Last Synced: 2024-11-02T17:02:20.459Z (2 months ago)
• Topics: analytics, beyonk, facebook, facebook-pixel, facebook-tracking, svelte, tracking, vanillajs
• Language: Svelte
• Homepage:
• Size: 276 KB
• Stars: 22
• Watchers: 3
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    


    


    

    


    




## Svelte Facebook Pixel Component

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-facebook-pixel.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-facebook-pixel) [![Svelte v3](https://img.shields.io/badge/svelte-v2-orange.svg)](https://v2.svelte.dev) [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)

Facebook pixel tracking component for Svelte.

## Install

```bash

$ npm install --save-dev @beyonk/svelte-facebook-pixel

```

## Usage

```html

  import FacebookPixel from '@beyonk/svelte-facebook-pixel'

```

You can import FacebookPixel component whenever and wherever you want, the facebook tracking code is only initialised in the first instance.

### Tracking

Simply call the track mehtod:

```html

	import { FacebookPixel, fb } from '@beyonk/svelte-facebook-pixel'

	import { onMount } from 'svelte

	onMount(() => {

		fb.track('SomeEvent', { some: 'data' })

	})

```

### Multiple Pixels on a page

You can have multiple pixels on a page, for instance, if you need a backup pixel, or if you want to send different events to different pixels.

```html

	import { FacebookPixel, fb } from '@beyonk/svelte-facebook-pixel'

	import { onMount } from 'svelte

	onMount(() => {

		fb.track('SomeEvent', { some: 'data' })

	})

  import { fb } from '@beyonk/svelte-facebook-pixel'

	onMount(() => {

		fb.track('AnotherEvent', { some: 'data' })

	})

```

By default all pixels are initialised with `init()`, and events will be sent to all pixels, however, you can send tracking events to indiviual pixels if you would like:

#### Sending events to all pixels

You can send tracking events to all pixels just as you would with a single pixel:

```js

fb.track('SomeEvent', { some: 'data' })

```

#### Sending events to a single pixel

If you have multiple pixels on your page and want to send an event to only one of them use `trackSingle` and pass the pixel's ID as the first argument:

```js

fb.trackSingle('ABC123', 'SomeEvent', { some: 'data' })

```

## Disabling the pixel (for GDPR)

If you'd like to install the pixel disabled, and enable it later after the user has consented to its use, you can do so by setting `enabled: false` in the pixel configuration:

```html

```

Now, in your component, you can call the following in order to start the pixel and track the current page.

```html

  import { fb } from '@beyonk/svelte-facebook-pixel'

	let _fb = null

	let enabled = false

	onMount(() => {

		enabled = true

		_fb.init()

	})

```

## License

[MIT License](./LICENSE)

## Thanks

Thanks to [William DASILVA](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module) for his original Nuxt facebook pixel module which inspired this project.