Facebook Retargeting Pixel code for React Native

Question

Hi I am try to add facebook retargeting pixel for my react native app, and I am hoping that the community can help me clarify something. First, to track an event PageView or ViewContent of a product, I add the following script to the product page.

<script>
!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','//connect.facebook.net/en_US/fbevents.js');

fbq('init', 'xxxxxxxxxxxxxxxx');
fbq('track', 'PageView');
fbq('track', 'ViewContent', {

        content_name: 'Truyện Cổ Grimm (Bìa Cứng)',
        content_category: 'Truyện đọc',
        content_ids: ['8935212329736'],
        content_type: 'product',
        value: 153750,
        currency: 'VND'

});
</script>

I wonder how can I achieve the same with React Native. I saw the Facebook have FB SDK for react native (https://developers.facebook.com/docs/react-native), and I want to ask, is this SDK what I can achieve similar to what I have for a web above. That if I view a product, do I just do this?

AppEventsLogger.logEvent('ViewContent');

If so, however can I specify other parameters, maybe like this?

AppEventsLogger.logEvent('ViewContent', {

    content_name: 'Truyện Cổ Grimm (Bìa Cứng)',
    content_category: 'Truyện đọc',
    content_ids: ['8935212329736'],
    content_type: 'product',
    value: 153750,
    currency: 'VND'
});

Anyone with success experience with this, please help me out. Thank you very much

Answer 1

You were correct to guess the event to be used with react-native-fbsdk. If you'll look into the source of this SDK here you'll see you can use logEvent method in various ways.

The method you guessed:

AppEventsLogger.logEvent('ViewContent', {
    content_name: 'Truyện Cổ Grimm (Bìa Cứng)',
    content_category: 'Truyện đọc',
    content_ids: ['8935212329736'],
    content_type: 'product',
    value: 153750,
    currency: 'VND'
});

Will log event on FB Analytics and then you can customize your reports on the basis of these params. During my experience with it, I faced one issue that it doesn't support arrays. So the above code will be changed as below:

AppEventsLogger.logEvent('ViewContent', {
    content_name: 'Truyện Cổ Grimm (Bìa Cứng)',
    content_category: 'Truyện đọc',
    content_ids: '8935212329736',
    content_type: 'product',
    value: 153750,
    currency: 'VND'
});

With this you should be good to go. I hope this solved your query.

Note:

Arrays are not supported by React Native Bridge right now. You can check this for the place where arrays are not supported.

Update September 2021

Facebook have now retired their official support of react-native-fbsdk but there is a strong community fork which is actively maintained.