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

View Code? Open in Web Editor NEW

19.0 3.0 5.0 281 KB

A facebook pixel module for Svelte / SvelteKit

JavaScript 39.68% Svelte 53.99% HTML 6.32%

svelte beyonk facebook facebook-pixel facebook-tracking vanillajs tracking analytics

svelte-facebook-pixel's Introduction

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.

svelte-facebook-pixel's People

Contributors

Stargazers

Watchers

Forkers

alihamza1214 dextermb fejiroofficial goodspirits benmccann

svelte-facebook-pixel's Issues

how to track a purchase?

fbq("Purchase", { currency, value });

getting this warning

fbq('Purchase', ...);" is not a valid fbq command.

I sended parameters event_id and this result "_removed_" can u help?

What should i do?

i look at facebook pixel helper all data was sended

Is this still working?

I can't make it work on a clean REPL. See it here.

Console returns _fbq is not a function.

I realised that svelte-google-analytics has a better approach using async-script-loader and tried to "replace" Google Analytics by Facebook Pixel code, but I freeze in the callback() part because Facebook's original code is way too obfuscated.

Init function does not work with SvelteKit

The init function as it's currently implemented does not work with SvelteKit. If you have preloading enabled in SvelteKit, then javascript is loaded in link tags instead of script tags, so the follow function fails.

export function init () {
    const fn = function (f, b, e, v, n, t, s) {
      if (f.fbq) return
      n = f.fbq = function () {
        n.callMethod
          ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
      }
      if (!f._fbq) f._fbq = n
      n.push = n
      n.loaded = !0
      n.version = version
      n.queue = []
      t = b.createElement(e)
      t.async = !0
      t.src = v
      s = b.getElementsByTagName(e)[0]
      s.parentNode.insertBefore(t, s)
    }

    fn(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js')
    callback()
  }

I made it work for my purposes by changing the line to s = b.getElementsByTagName('link')[0] but that is obviously not a generalized solution.

error

Uncaught (in promise) TypeError: _fbq is not a function

FacebookPixel.svelte:73 Uncaught (in promise) TypeError: _fbq is not a function
    at query (FacebookPixel.svelte:73)
    at FacebookPixel.track (FacebookPixel.svelte:68)
    at _layout.svelte:14
    at run (index.mjs:18)
    at Array.map (<anonymous>)
    at index.mjs:1372
    at flush (index.mjs:708)
    at init (index.mjs:1458)
    at new App (App.svelte:17)
    at render (app.mjs:288)






<script>
  import { goto, stores } from "@sapper/app";
  import { onMount } from "svelte";
  import FacebookPixel from "@beyonk/svelte-facebook-pixel";
  import Navbar from "../components/Navbar.svelte";
  import Footer from "../components/Footer.svelte";
  import Banner from "../components/Banner.svelte";

  const { page } = stores();
  export let segment;
  let fb;

  onMount(() => {
    fb.track("PageView");
  });
</script>

<style>
  main {
    position: relative;
    background-color: #0f1217;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    color: #fff;
  }

  .mobile-buy-droids {
    display: none;
  }

  @media only screen and (max-width: 768px) {
    .mobile-buy-droids {
      display: flex;
      justify-content: flex-end;
      position: fixed;
      bottom: 0%;
      width: 100%;
      opacity: 1;
      z-index: 2;
    }
  }
</style>

<Navbar {segment} />
<Banner />
<main>
  {#if $page.path !== '/buy'}
    <section class="mobile-buy-droids">
      <a href="buy">
        <img src="/images/droids-buy-now.png" alt="Buy Droids" />
      </a>
    </section>
  {/if}
  <slot />
</main>

<Footer {segment} />
<FacebookPixel bind:this={fb} id={FACEBOOK_TRACKING_ID} />

SvelteKit TS / Support

Hello

I tried to use this package with Svelte Kit with TS.

are there plans to add support to it ?

The errors I got.

There was no default export, solved it with { }
There are no definition files, kind of did a work around on it.
After following the instruction I was getting that fb was not a function, noticed there is an export of fb, I tried to call it but the pixel didnt fire up.

Can't use the package because of JSX

Hello, i can't use it for the moment with sveltekit, i have this error :

If you can help me, thanks!

tracking conversions?

ANyone know what that means? I was asked to add facebook page views tracking and conversion tracking on order success page.