How to use react-facebook-pixel - 10 common examples

To help you get started, we’ve selected a few react-facebook-pixel examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github goodjoblife / GoodJobShare / src / components / ShareExperience / InterviewForm / index.js View on Github external
idCounter = idGenerator(
        typeof __idCounterCurrent !== undefined
          ? __idCounterCurrent
          : getMaxId(storedDraft),
      );
    } catch (error) {
      defaultFromDraft = null;
    }
    const defaultState = defaultFromDraft || defaultForm;

    this.setState({
      // eslint-disable-line react/no-did-mount-set-state
      ...defaultState,
    });

    ReactPixel.track('InitiateCheckout', {
      content_category: PIXEL_CONTENT_CATEGORY.VISIT_INTERVIEW_FORM,
    });
  }
github goodjoblife / GoodJobShare / src / components / LaborRightsSingle / index.js View on Github external
componentDidUpdate(prevProps) {
    this.props.queryMenuIfUnfetched();
    this.props.queryEntryIfUnfetched(idSelector(this.props));

    // send Facebook Pixel 'ViewContent' event if goto reading another labor rights unit
    if (idSelector(prevProps) !== idSelector(this.props)) {
      ReactPixel.track('ViewContent', {
        content_ids: [idSelector(this.props)],
        content_category: PIXEL_CONTENT_CATEGORY.VIEW_LABOR_RIGHT,
      });
    }
  }
github goodjoblife / GoodJobShare / src / components / LaborRightsSingle / index.js View on Github external
componentDidMount() {
    this.props.queryMenuIfUnfetched();
    this.props.queryEntryIfUnfetched(idSelector(this.props));
    this.props.fetchPermission();

    // send Facebook Pixel 'ViewContent' event
    ReactPixel.track('ViewContent', {
      content_ids: [this.props.match.params.id],
      content_category: PIXEL_CONTENT_CATEGORY.VIEW_LABOR_RIGHT,
    });
  }
github goodjoblife / GoodJobShare / src / components / ShareExperience / TimeSalaryForm / index.js View on Github external
componentDidMount() {
    const defaultState =
      getDefaultFormFromLocation(this.props.location) ||
      getDefaultFormFromDraft() ||
      defaultForm;

    this.setState({
      // eslint-disable-line react/no-did-mount-set-state
      ...defaultState,
    });

    ReactPixel.track('InitiateCheckout', {
      content_category: PIXEL_CONTENT_CATEGORY.VISIT_TIME_AND_SALARY_FORM,
    });
  }
github MyBitFoundation / MyBit-Go.website / components / utils / analytics.js View on Github external
export const initPixelConvTrkr = () => {
  ReactPixel.init("146019056346104");
}
github Neufund / ico-transparency-monitor / src / index.js View on Github external
import thunk from 'redux-thunk';
import { Route, Switch, HashRouter } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import RPCProvider from './components/RPCProvider';
import MessageBoxModal from './components/modals';
import withTracker from './components/withTracker';
import reducer from './reducers';
import env from './env.json';
import IcosList from './containers/IcosList';
import InnerIcoPage from './containers/InnerIcoPage';
import ICOStatsPage from './containers/ICOStatsPage';
import './assets/css/index.css';
import { IframeCssTweaker } from './components/IframeCssTweaker';

ReactPixel.init(env.fbPixelId);
ReactPixel.pageView();

const root = document.getElementById('root');

const render = (store) => {
  ReactDOM.render(
    <Provider store={store}>
      <RPCProvider>
        <IframeCssTweaker >
          <HashRouter>
            <Switch>
              <Route exact path="/" component={withTracker(IcosList)} />
              <Route exact path="/:name" component={withTracker(InnerIcoPage)} />
              <Route exact path="/stats/:name" component={withTracker(ICOStatsPage)} />
            </Switch>
          </HashRouter>
github cswbrian / district-councils-dashboard / web / src / WithTracker.js View on Github external
throw new Error(
    'Invalid google tracking ID. or set to UA-000000-01 if you dont have any'
  )
}
const fbPixelTrackingID = process.env.REACT_APP_FACEBOOK_TRACKING_ID
if (!fbPixelTrackingID) {
  throw new Error('Invalid facebook pixel tracking ID.')
}
GoogleAnalytics.initialize(trackingId)

const fbPixelAdvancedMatching = {}
const fbPixelOptions = {
  autoConfig: true,
  debug: false,
}
ReactPixel.init(fbPixelTrackingID, fbPixelAdvancedMatching, fbPixelOptions)

const withTracker = (WrappedComponent, options = {}) => {
  const trackPage = page => {
    GoogleAnalytics.set({
      page,
      ...options,
    })
    GoogleAnalytics.pageview(page)

    ReactPixel.pageView()
  }

  const HOC = class extends React.Component {
    componentDidMount() {
      const page = this.props.location.pathname
      trackPage(page)
github Neufund / ico-transparency-monitor / src / index.js View on Github external
import { Route, Switch, HashRouter } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import RPCProvider from './components/RPCProvider';
import MessageBoxModal from './components/modals';
import withTracker from './components/withTracker';
import reducer from './reducers';
import env from './env.json';
import IcosList from './containers/IcosList';
import InnerIcoPage from './containers/InnerIcoPage';
import ICOStatsPage from './containers/ICOStatsPage';
import './assets/css/index.css';
import { IframeCssTweaker } from './components/IframeCssTweaker';

ReactPixel.init(env.fbPixelId);
ReactPixel.pageView();

const root = document.getElementById('root');

const render = (store) => {
  ReactDOM.render(
    <Provider store={store}>
      <RPCProvider>
        <IframeCssTweaker >
          <HashRouter>
            <Switch>
              <Route exact path="/" component={withTracker(IcosList)} />
              <Route exact path="/:name" component={withTracker(InnerIcoPage)} />
              <Route exact path="/stats/:name" component={withTracker(ICOStatsPage)} />
            </Switch>
          </HashRouter>
        </IframeCssTweaker>
github goodjoblife / GoodJobShare / src / components / ShareExperience / CampaignTimeAndSalaryForm / index.js View on Github external
response => {
          const count = response.queries_count;

          ReactGA.event({
            category: GA_CATEGORY.SHARE_TIME_SALARY,
            action: GA_ACTION.UPLOAD_SUCCESS,
          });
          ReactPixel.track('Purchase', {
            value: 1,
            currency: 'TWD',
            content_category: PIXEL_CONTENT_CATEGORY.UPLOAD_TIME_AND_SALARY,
          });

          return () => (
            <SuccessFeedback
              info={`您已經上傳 ${count} 次,還有 ${5 -
                (count || 0)} 次可以上傳。`}
              buttonText="查看最新工時、薪資"
              buttonClick={() => {
                window.location.replace(
                  `/time-and-salary/campaigns/${campaignName}/latest`,
                );
              }}
            />
github goodjoblife / GoodJobShare / src / components / ShareExperience / TimeSalaryForm / index.js View on Github external
response => {
          const count = response.queries_count;

          ReactGA.event({
            category: GA_CATEGORY.SHARE_TIME_SALARY,
            action: GA_ACTION.UPLOAD_SUCCESS,
          });
          ReactPixel.track('Purchase', {
            value: 1,
            currency: 'TWD',
            content_category: PIXEL_CONTENT_CATEGORY.UPLOAD_TIME_AND_SALARY,
          });

          return () => (
            <SuccessFeedback
              info={`您已經上傳 ${count} 次,還有 ${5 -
                (count || 0)} 次可以上傳。`}
              buttonText="查看最新工時、薪資"
              buttonClick={() => {
                window.location.replace('/salary-work-times/latest');
              }}
            />
          );
        },

react-facebook-pixel

Pixel Kit for React

MIT
Latest version published 2 years ago

Package Health Score

56 / 100
Full package analysis