Advanced Matching with New Facebook Pixel in Javascript Web App

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, eg 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?


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.


Loading the pixel URL directly has worked best for me. In the example below, form_data is data that is available only after the user completes their order.

 // reinitialize with parameters
    var split_name = form_data.name.split(" ");
    var split_dob = form_data.date_of_birth.split("T")[0].split("-")

    // https://stackoverflow.com/questions/39610897/how-to-initialize-facebook-pixel-with-data-that-will-be-populated-after-the-init
    sha256(form_data.email).then(function(em) {
      sha256(split_name[0].toLowerCase()).then(function(fn) {
        sha256(split_name[split_name.length-1].toLowerCase()).then(function(ln) {
          sha256(((form_data.phone).replace(")", "").replace("(","").split(" ").join("-")).split("-").join("")).then(function(pn) {
            sha256(split_dob[0]+split_dob[1]+split_dob[2]).then(function(db) {
              sha256(form_data.city.toLowerCase().split(" ").join("")).then(function(ct) {
                sha256(form_data.region.toLowerCase()).then(function(st) {
                  sha256(form_data.postal_code).then(function(zp) {
                    var pixel = document.createElement('img');
                    pixel.src = "https://www.facebook.com/tr/?id="+my_fb_pixel_id+"&ev=Purchase&ud[em]="+em+"&ud[fn]="+fn+
                      "&ud[ln]="+ln+"&ud[pn]="+pn+"&ud[db]="+db+"&ud[ct]="+ct+"&ud[st]="+st+"&ud[zp]="+zp+"&cd[value]="+
                      form_data.amount+"&cd[currency]=USD&cd[investment_object]="+JSON.stringify(res_ok);
                    document.body.appendChild(pixel)
                  });
                });
              });
            });
          });
        });
      });
    });

(The SHA256 is from: https://www.google.com/search?q=sha256+mozilla&oq=sha256+mozilla&aqs=chrome..69i57j69i60.3197j0j7&sourceid=chrome&ie=UTF-8)

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

I've tried K.Lei's approach of calling fbq('init', '', '') again after the user submits their order (through a form, in my case). However, when I noticed that after I refresh the page and submit the form again (and therefore call init again) with a different Name/Birthdate/Gender/etc., the old PII parameters (from before the page refresh) are still sent. This was while using FB pixel through Segment though.

链接地址: http://www.djcxy.com/p/36232.html

上一篇: Git中的HEAD是什么?

下一篇: 在Javascript Web App中与新的Facebook像素进行高级匹配