10

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?

Callum Merriman
  • 103
  • 6
  • In a deleted (by reviewers) answer from a FB Dev on May 4th '17: "We recently updated the pixel to support this use case and remove the error message. You can now initialize the pixel a second time to include Advanced Matching data." So it appears that you can call init twice, with the user info on the second call, but nothing more. (So any subsequent logins or account changes won't work) – Cyral Dec 01 '21 at 20:33

1 Answers1

5

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.

K.Lei
  • 86
  • 1
  • 4
  • 1
    Yes, it appears Facebook now allows you to 'init' multiple times on the same page. No longer an issue. – Callum Merriman May 17 '17 at 20:14
  • 1
    I keep getting the duplicate pixel warning in my SPA... I am using Google Tag Manager if that makes a difference... Any suggestions would be greatly appreciated!! – Marnix.hoh Oct 20 '21 at 20:49
  • 2
    I just noticed that calling init once inside the base code and once somewhere else works, but calling it a third time does give me the `Duplicate pixel error` – Marnix.hoh Oct 21 '21 at 07:59