How to initialize Facebook Pixel with data that will be filled after initialization?

Question

I have a single-pager campaign site that needs to collect PageView and LEAD events for Facebook targeting using “advanced matching”.

For PageView I need to initialize Pixel on page load. For advanced matching, I need to provide user data to initialize the script - however, I only have user data available after the user sends the data, that is, when the LEAD event should be dispatched.

Is it possible to initialize a script with a pointer to a javascript variable that is used when dispatching a LEAD event? The help page suggests this, but all examples have, for example, an email parameter provided in plain text or sha256 hash; not as a JS variable, not as a text pointer to one.

On the "Extra Pixel Compatibility" help page:

To enable this feature, change the default FB pixel code to transfer data to the pixel initialization call.

 fbq('init', '<FB_PIXEL_ID>', { em: '{{_email_}}', // Data will be hashed automatically via a dedicated function in FB pixel ph: '{{_phone_number_}}', fn: '{{_first_name_}}' .... }) 

In the above example, you will need to replace the email, phone_number, first_name with the variable names on your website that capture this data.

Say I have a user_email variable in the same scope as fbq-init :

 var user_email = ''; 

Later, after submitting the form, this variable will be filled as

 user_email = " [e-mail] "; 

How do I refer to a variable in fbq ? (one) Like this?

 fbq('init', 123456, { em: '{{_user_email_}}' }); 

(2) Or how is it?

 fbq('init', 123456, { em: 'user_email' }); 

(3) Or should I just provide a variable:

 fbq('init', 123456, { em: user_email }); // nb: user_email === false when this is run 

(4) Or do I need to initialize a pixel without any matching data, and then enrich it? (How?)

The Regency Advertising Agency sent me instructions for sending the variable name, as in my example 2, but the man page hints at 1 without actually providing real examples.

---

I tried all options 1-3, and it seems that the variables will not be reevaluated in subsequent calls to fbq('track', …); after initialization. If user_email empty to begin with, none of the events will contain hashed user data.

Moreover, even if I start with a valid email address user_email = " [e-mail] "; (also tried real domains instead of example.com), only method 3 will work, but, as expected, this is not dynamic, i.e. if user_email modifies hashes, it will not.

As if there is no variable string replacement to start with.

Will the question be more correct: how can I send user data for extended matching after pixel initialization? Instead of making initialization lazy / dynamic.

Answer 1

As a workaround, you can create a Lead event with email user data by loading a pixel (image) through javascript:

 // here the user email is unknown, so PageView is generated without email fbq('init', 123456, {}); fbq('track', 'PageView'); // Later the form is submitted via ajax, so the user email is known $.ajax(…).done(function(data) { // I decided to sha256 hash the email address in the backend and return it for the javascript handler var pixel = document.createElement('img'); pixel.src = 'https://www.facebook.com/tr/?id=123456&ev=Lead&ud[em]=' + data; document.body.appendChild(pixel); // confirmed by the Pixel helper Chrome extension, this does generate a valid tracking event // (ironically, we're loading the noscript version via javascript) }); 

Of course, a cleaner version of fbq would be more desirable. In addition, I still do not know about the possible shortcomings, if any.