<\/figure><\/div>\n\n\nStep 3 – Adding the client-side script\u200b<\/h2>\n\n\n\n Before we jump into the script, there’s one last step to complete in Pipedream.<\/p>\n\n\n\n
Click “Deploy” to save and deploy your workflow. This will generate a URL for the webhook in step 1. Copy this webhook URL.<\/p>\n\n\n\n
Next, add the following JavaScript snippet to all the pages on your site you want to capture events from. Be sure to replace MY_PIPEDREAM_URL<\/em> with the URL copied from Pipedream.<\/p>\n\n\n\nfunction CAPI(event, eventData) {\n let fbp = document.cookie.split(';').filter(c => c.includes('_fbp=')).map(c => c.split('_fbp=')[1]);\n let fbc = document.cookie.split(';').filter(c => c.includes('_fbc=')).map(c => c.split('_fbc=')[1]);\n fbp = (fbp.length && fbp[0]) || null;\n fbc = (fbc.length && fbc[0]) || null;\n\n\tif(!fbc && window.location.search.includes('fbclid=')){\n\t\tfbc = 'fb.1.'+ (+new Date()) +'.'+ window.location.search.split('fbclid=')[1];\n\t}\n\n const headers = new Headers()\n headers.append(\"Content-Type\", \"application\/json\")\n\n const body = {\n \"event\": event,\n \"event_data\": eventData,\n \"fbp\": fbp,\n \"fbclid\": fbc,\n \"user_agent\": navigator.userAgent,\n \"url\": window.location.origin + window.location.pathname\n}\n\nconst options = {\n method: \"POST\",\n headers,\n mode: \"cors\",\n body: JSON.stringify(body),\n}\n\nfetch(\"MY_PIPEDREAM_URL\", options)\n}<\/code><\/pre>\n\n\n\nStep 4 – Triggering the script\u200b<\/h2>\n\n\n\n Once we have the script in place on all pages, we can now invoke it with the Facebook CAPI events we want to send.<\/p>\n\n\n\n
These events can be invoked just like the regular Facebook events that use the fbq() method. Instead, they use the CAPI() method.<\/p>\n\n\n\n
For example, in parallel to sending fbq(‘track’, ‘Lead’)<\/em> you can send CAPI(‘Lead’)<\/em>. Notice that there’s no need to use the ‘track’ parameter.<\/p>\n\n\n\nYou can also pass custom parameters, such as purchase value and currency, by invoking CAPI(‘Purchase’, {currency: “USD”, value: 30.00})<\/em>. Since the data structure is identical to the Facebook Pixel, there’s little development effort required here (as the same triggers and data object apply here).<\/p>\n\n\n\nFinal thoughts\u200b<\/h2>\n\n\n\n This is a very simplified version of the Conversions API, but one that can be set up in under 20 minutes of work. A full-blown Server Side implementation is surely the way to go about it, and yet I understand not all companies will choose that route, so this is my “quick and dirty” alternative to it.<\/p>\n\n\n\n
You might ask what the benefit of this is. In this case, I can share this screenshot from a Fixel client using a similar method to capture the Fixel events. We can see that the Conversions API has added 803 events that would have otherwise been missing from the pixel. This adds ~6% users to our targeting, which can have a positive impact on our audiences, without requiring too much effort.<\/p>\n\n\n\n
GTM Ready code<\/h2>\n\n\n\n If you’re using Google Tag Manager, you will find that the script above won’t work (due to limitation on usage of ECMA6 JS). Instead, you can use this script in your Custom HTML tag.<\/p>\n\n\n\n
<script>\n function CAPI(event, eventData) {\n var fbp = document.cookie.split(';').filter(function (c) {\n return c.includes('_fbp=');\n }).map(function (c) {\n return c.split('_fbp=')[1];\n });\n var fbc = document.cookie.split(';').filter(function (c) {\n return c.includes('_fbc=');\n }).map(function (c) {\n return c.split('_fbc=')[1];\n });\n fbp = fbp.length && fbp[0] || null;\n fbc = fbc.length && fbc[0] || null;\n \tif(!fbc && window.location.search.includes('fbclid=')){\n\t\tfbc = 'fb.1.'+ (+new Date()) +'.'+ window.location.search.split('fbclid=')[1];\n\t}\n var headers = new Headers();\n headers.append(\"Content-Type\", \"application\/json\");\n var body = {\n \"event\": event,\n \"event_data\": eventData,\n \"fbp\": fbp,\n \"fbclid\": fbc,\n \"user_agent\": navigator.userAgent,\n \"url\": window.location.origin + window.location.pathname\n };\n var options = {\n method: \"POST\",\n headers: headers,\n mode: \"cors\",\n body: JSON.stringify(body)\n };\n fetch(\"MY_PIPEDREAM_URL\", options);\n}\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"In this post I’ll explain how to build a simple Facebook Conversions API solution for your site with (almost) no code.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-4968","post","type-post","status-publish","format-standard","hentry","category-facebook"],"_links":{"self":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/comments?post=4968"}],"version-history":[{"count":5,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4968\/revisions"}],"predecessor-version":[{"id":5291,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4968\/revisions\/5291"}],"wp:attachment":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/media?parent=4968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/categories?post=4968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/tags?post=4968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}