Geek Answers Handbook

Enhanced matching with the new Facebook pixel in the Javascript web application

I have a one-page javascript application in which I try to implement Advanced Matching using the new Facebook pixel to give us better attribution to our ads.

Right now, we launch the FB pixel when the application loads first, and then trigger standard track events based on user behavior in the application, for example. Buy when the user completes their order.

A simplified view of what is happening 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, eg 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', });

In the expanded mapping, it is indicated that the fields should be set when the pixel is initialized. However, since we only initialize the pixel once when the application loads (when we don’t know any user details), I’m not sure how to implement the extended mapping. Initializing the same pixel again causes an error, and there seems to be no way to pass extended matching fields to a track event or a way to reinitialize the pixel.

Has anyone had success using extended matching in a single js application for a page?

+7
source share
2 answers

You can call fbq('init', '<pixel_id>', '<PII>') a second time using PII, as soon as this information is available to you, and all subsequent pixel lights will pick it up. You mentioned an error, possibly due to a temporary error.

+2
source

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

  // reinitialize with parameters var split_name = form_data.name.split(" "); var split_dob = form_data.date_of_birth.split("T")[0].split("-") // /questions/1009942/how-to-initialize-facebook-pixel-with-data-that-will-be-populated-after-the-initialization 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"; document.body.appendChild(pixel) }); }); }); }); }); }); }); });

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

See Also: How to initialize a Facebook pixel with data that will be filled after initialization?

I tried K.Lei again to call fbq ('init', '', '') after the user submits his order (via the form, in my case). However, when I noticed that after refreshing the page and resubmitting the form (and therefore re-invoking init) with a different name / date of birth / gender / etc. Old PII parameters (before page refresh) are still being sent. That was when using the FB pixel across the segment, though.

+1
source

More articles:


All Articles