Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@beyonk/svelte-facebook-pixel
Advanced tools
Readme
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>
Thanks to William DASILVA for his original Nuxt facebook pixel module which inspired this project.
FAQs
Unknown package
The npm package @beyonk/svelte-facebook-pixel receives a total of 310 weekly downloads. As such, @beyonk/svelte-facebook-pixel popularity was classified as not popular.
We found that @beyonk/svelte-facebook-pixel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.