Facebook Pixel

De acordo com developers.facebook.com:

"O Facebook Pixel é um trecho de código JavaScript que permite rastrear a atividade do visitante em seu site."

Você pode aproveitar as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos Pixel dinamicamente.

O Facebook Pixel só pode ser chamado depois de hydrate para garantir que está sendo executado no cliente.

import Nullstack from 'nullstack';

class FacebookPixel extends Nullstack {

  async hydrate({page, id}) {
    ! 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 = '2.0';
      n.queue = [];
      t = b.createElement(e);
      t.async = !0;
      t.src = v;
      s = b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t, s)
    }(window, document, 'script',
      'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', id);
    fbq('track', 'PageView');
    window.addEventListener(page.event, () => {
      fbq('init', id);
      fbq('track', 'PageView');
    })
  }
}

export default FacebookPixel;
import Nullstack from 'nullstack';
import FacebookPixel from './FacebookPixel';

class Application extends Nullstack {

  // ...

  render() {
    return (
      <main>
        <FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
      </main>
    )
  }


}

export default Application;

Usando um Wrapper

Alternativamente, você pode instalar nullstack-facebook-pixel como uma dependência:

npm install nullstack-facebook-pixel
import Nullstack from 'nullstack';
import FacebookPixel from 'nullstack-facebook-pixel';

class Application extends Nullstack {

  // ...

  render() {
    return (
      <main>
        <FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
      </main>
    )
  }


}

export default Application;

Próximo Passo

🎉 Parabéns. Você concluiu a documentação!

⚔ Se você deseja ver mais exemplos aqui, abra uma issue no github.