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

Question

I have a one-pager campaign site which should collect PageView and LEAD event data for Facebook targeting with "advanced matching".

For PageView, I need to initialize the Pixel on page load. For advanced matching, I need to provide user data for initialization script — however, I only have user data available after user has submitted the data, which is when the LEAD event should be sent.

Is it possible to provide the initialization script with a "pointer" to a javascript variable that is used when sending the LEAD event? Help page hints at this, but all the examples have e.g. email parameter provided as plain text or sha256 hash; not as JS variable nor as a textual pointer to one.

From the "Advanced Matching with the Pixel" help page:

To enable this feature, modify the default FB pixel code to pass data into the pixel init 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 example above, you will need to replace email, phone_number, first_name with the names of the variables on your website that capture this data.

Let's say I have user_email variable in the same scope as fbq-init:

var user_email = '';

Later, after the form is submitted, this variable will be populated like

user_email = "john@example.com";

How should I reference the variable in fbq? (1) Like this?

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

(2) Or like this?

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

(3) Or should I provide it simply with the variable:

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

(4) Or should I initialize the pixel without any matching data and later enrich it? (How?)

A reputable ad agency sent me with instructions to submit the name of the variable as in my example 2, but the help page hints at 1 without actually providing any real world examples.

---

I tried all the options 1–3, and it seems variables won't get re-evaluated in subsequent fbq('track', …); calls after the initialization. If user_email is blank to start with, none of the events will include hashed user data.

Moreover even if I start with a valid email user_email = "john@example.com"; (also tried real domains instead of example.com) only method 3 will work — but, as expected, this is not dynamic, ie. if user_email changes the hashes won't.

It is as if there is no string-variable replacement to begin with.

Would the more proper question be: how do I submit user data for advanced matching after the pixel initialization? Instead of trying to make the initialization lazy/dynamic.

Answer 1

Or should I initialize the pixel without any matching data and later enrich it? (How?)

Not like if it is documented anywhere or is recommended by Facebook, but there's no reason apart from semantics to not being able to call init again at a later point in time with additional info.

So you can call init the normal default way first:

fbq('init', 123456)

And at a later point in time, when you have obtained additional user data, you can call init again basically enriching the already running fbq instance with additional data:

fbq('init', 123456, { em: user_email } ) (user_email is a variable holding the address)

Only caveat is that you have to send an event after this additional init call, otherwise the provided data will not be sent to Facebook. But since your goal is to send a new event anyway this is okay.

So long story short:

Feel free to call fbq('init', ...) multiple times, the following events will be enriched with the additional data.

Answer 2

As a workaround it is possible to generate a Lead event with email user data by loading the pixel (image) via 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 pure fbq version would be more desirable. Also, I'm yet unaware of possible drawbacks, should there be any.