Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
@beyonk/svelte-facebook-pixel
Advanced tools
Weekly downloads
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 307 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.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.