Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@beyonk/svelte-facebook-pixel

Package Overview
Dependencies
0
Maintainers
6
Versions
7
Issues
File Explorer

Advanced tools

@beyonk/svelte-facebook-pixel

<a href="https://beyonk.com"> <br /> <br /> <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" /> <br /> <br /> </a>

    3.0.1latest

Version published
Maintainers
6
Yearly downloads
4,755
increased by27.34%

Weekly downloads

Readme

Source




Svelte Facebook Pixel Component

js-standard-style CircleCI Svelte v3 Svelte v3

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.

Keywords

FAQs

What is @beyonk&#x2F;svelte-facebook-pixel?

&lt;a href=&quot;https:&#x2F;&#x2F;beyonk.com&quot;&gt; &lt;br &#x2F;&gt; &lt;br &#x2F;&gt; &lt;img src=&quot;https:&#x2F;&#x2F;user-images.githubusercontent.com&#x2F;218949&#x2F;144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png&quot; width=&quot;198&quot; &#x2F;&gt; &lt;br &#x2F;&gt; &lt;br &#x2F;&gt; &lt;&#x2F;a&gt;

Is @beyonk&#x2F;svelte-facebook-pixel popular?

The npm package @beyonk&#x2F;svelte-facebook-pixel receives a total of 108 weekly downloads. As such, @beyonk&#x2F;svelte-facebook-pixel popularity was classified as not popular.

Is @beyonk&#x2F;svelte-facebook-pixel well maintained?

We found that @beyonk&#x2F;svelte-facebook-pixel demonstrated a healthy version release cadence and project activity. It has 6 open source maintainers collaborating on the project.

Last updated on 03 May 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc