beyonk-group / svelte-facebook-pixel Goto Github PK

Facebook pixel tracking component for Svelte.

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

<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.

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>

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:

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

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

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' })

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>

MIT License

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