Advanced Matching with New Facebook Pixel in Javascript Web App

Question

I have a single page javascript application, in which I am trying to implement Advanced Matching with the New Facebook Pixel to give us better attribution on our Ads.

We currently init the FB pixel when the app is first loaded, then fire standard track events based on user behavior in the app, e.g. Purchase when the user completes their order.

A simplified view of what is happening is below...

// App loads
// URL: xxxx.com/[client]/
!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');

// Pixel Initialised
// we don't know any user details at this stage

fbq('init', '[PIXELID]');
fbq('track', 'PageView');


// User selects the event they want to purchase tickets from
// URL: xxxx.com/[client]/event/[productid]/

fbq('track', 'PageView');
fbq('track', 'ViewContent', { 
    content_name: 'Store',
    content_ids: '[productid]',
    content_type: 'product_group'
});

// User goes through rest of purchase process
// More Standard Events sent, e.g. Add To Cart

// User completes purchase
// URL: xxxx.com/[client]/order/completed/
// At this point we now know email address, name & phone, but pixel is already initialised. How do we do Advanced Matching?

fbq('track', 'PageView');
fbq('track', 'Purchase', { 
    content_type: 'Store',
    value: 75.00,
    currency: 'USD',
    num_items: 4,
    order_id: '20160710090000',
});    

The advanced matching advises that the fields should be set when the pixel is initialized. However since we only initialize the pixel once on app load (when we don't know any user details) I am unsure how to implement advanced matching. Initializing the same pixel again throws an error and there does not seem to be a way to pass advanced matching fields in a track event or a way to re-initialise the pixel.

Has anyone had success using advanced matching in a single page js app?

Answer 1

You can call fbq('init', '<pixel_id>', '<PII>') a second time with PII once that information is available to you and all subsequent Pixel fires will pick it up. The error you mentioned may have been due to a transient bug.