How to use multiple ReactPixel.track('abc') inside one component? - reactjs

Question

I have a component on which I have to add two ReactPixel.track('abc') and
ReactPixel.track('cba'), how can I achieve this? Do I need to add just one ReactPixe.init('id') or two? Here is a code example:
componentDidMount() {
const options = {
autoConfig: false,
};
ReactPixel.init('123123', options);
ReactPixel.pageView();
ReactPixel.track('abc');
ReactPixel.track('cba');
}

Answer 1

You don't need to add multiple React inits on every page.
Just add it on your App.js(If you use create-react-app).
* You should initiate before you use it.
ReactPixel.init('123123', options);
If you need to get pageview details of whole app you need to use the below code.function in entry level.(I prefer after the init function)
ReactPixel.pageView();
There is no magic. It just call the same function that Facebook has given to you. fbq('track', 'PageView');
You can use track codes inside your functions. As a example after registration is successful you can create this track code.
ReactPixel.track('abc',{#data object goes here});
This is the example that Facebook has given.
fbq('track', 'Purchase',
// begin parameter object data
{
value: 115.00,
currency: 'USD',
contents: [
{
id: '301',
quantity: 1,
item_price: 85.00
},
{
id: '401',
quantity: 2,
item_price: 15.00
}],
content_type: 'product'
}
// end parameter object data
);
You can use this same function with react-facebook-pixel wrapper like this.
ReactPixel.track('abc',{#data object goes here});
Tracking Custom Events
You can track custom events by calling the pixel's fbq('trackCustom') function, with your custom event name and (optionally) a JSON object as its parameters. Just like standard events, you can call the fbq('trackCustom') function anywhere between your webpage's opening and closing tags, either when your page loads, or when a visitor performs an action like clicking a button.
For example, let's say you wanted to track visitors who share a promotion in order to get a discount. You could track them using a custom event like this:
fbq('trackCustom', 'ShareDiscount', {promotion: 'share_discount_10%'});
you can track custom events with react wrapper like this
ReactPixel.trackCustom(#title_of_event,#data_object);
If you need more understanding of what this react-facebook-pixel has done. You can read the code of the package.
https://github.com/zsajjad/react-facebook-pixel/blob/master/src/index.js
Facebook documentation: https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking#advanced_match