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 = "[email protected]";

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 = "[email protected]"; (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

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.