Svelte Facebook Pixel

Svelte Facebook Pixel Component

Facebook pixel tracking component for Svelte.

Install

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

Usage

<FacebookPixel pixels={[ 'ABC123', '123ABC' ]} />

<script>
  import FacebookPixel from '@beyonk/svelte-facebook-pixel'
</script>

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:

<FacebookPixel />

<script>
    import { FacebookPixel, fb } from '@beyonk/svelte-facebook-pixel'
    import { onMount } from 'svelte

    onMount(() => {
        fb.track('SomeEvent', { some: 'data' })
    })
</script>

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.

<!-- __layout.svelte -->
<FacebookPixel />

<script>
    import { FacebookPixel, fb } from '@beyonk/svelte-facebook-pixel'
    import { onMount } from 'svelte

    onMount(() => {
        fb.track('SomeEvent', { some: 'data' })
    })
</script>

<!-- page.svelte -->

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

    onMount(() => {
        fb.track('AnotherEvent', { some: 'data' })
    })
</script>

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:

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:

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:

<FacebookPixel enabled={false} />

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

<FacebookPixel bind:this={_fb} {enabled} />

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

    let _fb = null
    let enabled = false

    onMount(() => {
        enabled = true
        _fb.init()
    })
</script>

License

MIT License

Thanks

Thanks to William DASILVA for his original Nuxt facebook pixel module which inspired this project.