{"id":4977,"date":"2022-02-16T11:50:50","date_gmt":"2022-02-16T08:50:50","guid":{"rendered":"https:\/\/trackingchef.com\/?p=4977"},"modified":"2022-09-04T17:21:05","modified_gmt":"2022-09-04T14:21:05","slug":"facebook-conversions-api-with-zapier-and-gtm","status":"publish","type":"post","link":"https:\/\/trackingchef.com\/facebook\/facebook-conversions-api-with-zapier-and-gtm\/","title":{"rendered":"Creating a Facebook Conversions API with Zapier and GTM"},"content":{"rendered":"\n<p>My recent blog post on creating a Facebook Conversions API (aka CAPI) using Pipedream has been quite a success. Released in February, it&#8217;s already ranking as our 4th most popular blog post on my blog.<\/p>\n\n\n\n<p>One of the most frequent questions I get about this post is how come I didn&#8217;t choose Integromat or Zapier instead of Pipedream. While I&#8217;m a big fan of these two platforms (Integromat slightly more), Pipedream simply offers better pricing for scale. This is very lucrative if you&#8217;re switching your entire pixel tracking to server-side (i.e. including Pageviews), which can easily add up to tens of thousands of events.<\/p>\n\n\n\n<p>At Zapier or Integromat&#8217;s pricing, this becomes a major expense. So Pipedream was my go to for this.<\/p>\n\n\n\n<p>But some advertisers want a simpler solution (though in all fairness I think it&#8217;s simple enough), so I figured I&#8217;d write up a quick guide for implementing Facebook&#8217;s Conversions API using Zapier.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"important-note\">Important note<\/h2>\n\n\n\n<p>This guide will help you build a CAPI solution that is utilizing the key concepts of the API but is built as a client-side solution. This means you won\u2019t get the full benefits of the CAPI (mainly overcoming ad blockers) but can expect an increase of 5-10% in the number of events tracked, resulting in larger audiences to target in your campaigns (e.g. more users recorded that added to their carts).<\/p>\n\n\n\n<p>Facebook even released this case study with \u201cLove your Melon\u201d which showed a <strong>17% increase in attributed revenue<\/strong> after switching to the Conversions API.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"when-is-zapier-the-right-choice-for-you\">When is Zapier the right choice for you?<\/h2>\n\n\n\n<ul><li>You&#8217;re lazy &#8211; No need to be ashamed of it. You have other, more important, stuff to handle so you&#8217;re willing to pay the premium<\/li><li>You&#8217;re tracking only few events &#8211; In many cases, advertisers don&#8217;t need each and every event tracked using the CAPI solution, making the overall sum events sent smaller<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Important note:<\/strong><\/p><p>To implement the CAPI solution via Zapier you are required to have a paid Zapier account (as the free account doesn&#8217;t have the Webhook app (Premium App)<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"benefits-of-using-zapier\">Benefits of using Zapier<\/h2>\n\n\n\n<ol><li>Simpler set up &#8211; no need to extract your Pixel or Token, just click on your ad account and you&#8217;re all set<\/li><li>No code &#8211; While Pipedream uses a ready made code snippet, you still need to make minor changes to it<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-create-a-zap-trigger\">Step 1 &#8211; Create a Zap &amp; Trigger<\/h2>\n\n\n\n<p>In your Zapier account, create a New Zap. The Zap&#8217;s trigger should be set to &#8220;Webhooks by Zapier&#8221; and the trigger event to &#8220;Catch hook&#8221;.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"880\" height=\"336\" src=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image.png\" alt=\"\" class=\"wp-image-4978\" srcset=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image.png 880w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-300x115.png 300w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-768x293.png 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p>After clicking Continue, you will receive the Custom Webhook URL, e.g. https:\/\/hooks.zapier.com\/hooks\/catch\/123456789\/abc123456\/ Copy this URL and move to the &#8220;Test trigger&#8221; step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sending-a-test-trigger\">Sending a test trigger<\/h3>\n\n\n\n<p>The test trigger will now determine the structure of the data sent into Zapier, so it&#8217;s important to get this correct.<\/p>\n\n\n\n<ol><li>Open a new tab with <a href=\"https:\/\/reqbin.com\/\">Request Bin<\/a><\/li><li>Paste the Webhook URL in the top box<\/li><li>Change the call type from GET to POST<\/li><li>Under the Content tab, select <em>JSON (application\/json)<\/em> from the drop down<\/li><li>Paste the JSON values bellow in the text box<\/li><li>Hit Send<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n        \"event\": \"Purchase\",\n        \"currency\": \"USD\",\n  \t\t\"value\": 30.00,\n        \"fbp\": \"fbp123\",\n        \"fbclid\": \"fbc456\",\n        \"user_agent\": \"Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/91.0.4472.77 Safari\/537.36 Edg\/91.0.864.37\",\n        \"url\": \"https:\/\/fixel.ai\/\"\n}<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Important note:<\/strong><\/p><p>The above JSON snippet represents a Purchase event. You can change it freely to use any other Facebook Pixel event you need (e.g. Lead or Add to Cart).<\/p><\/blockquote>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"841\" height=\"677\" src=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-1.png\" alt=\"\" class=\"wp-image-4979\" srcset=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-1.png 841w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-1-300x241.png 300w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-1-768x618.png 768w\" sizes=\"(max-width: 841px) 100vw, 841px\" \/><\/figure><\/div>\n\n\n<p>Once received in Zapier, you will have these values available to continue creating your Zap.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-create-an-action\">Step 2 &#8211; Create an Action<\/h2>\n\n\n\n<p>Now that we have the webhook dummy data available we can create a new action to pass that data to Facebook. Immediately under the Trigger, create a new Action with the app &#8220;Facebook Conversion&#8221;. Under &#8220;Action Event&#8221;, you can either choose a specific event (Purchase, Lead) or Other, which gives you the option to trigger other events (e.g. Add to Cart or Start Trial).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Pro tip:<\/strong><\/p><p>You can use the &#8220;Send Other Event&#8221; option to create a dynamic action (i.e. a single webhook dynamically triggers a specific event type)<\/p><\/blockquote>\n\n\n\n<p>For sake of simplicity, let&#8217;s select the Purchase event.<\/p>\n\n\n\n<p>Set the Action Source to <em>Website<\/em>.<\/p>\n\n\n\n<p>Next, you will need to select the relevant Facebook Ad Account\/Business Manager and then the relevant pixel for which the event is triggered.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"812\" height=\"450\" src=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-2.png\" alt=\"\" class=\"wp-image-4980\" srcset=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-2.png 812w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-2-300x166.png 300w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-2-768x426.png 768w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/figure><\/div>\n\n\n<p>Under the Event Info section, set the <em>Event Source URL<\/em> to the URL parameter received in the webhook.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"400\" src=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-3.png\" alt=\"\" class=\"wp-image-4981\" srcset=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-3.png 810w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-3-300x148.png 300w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-3-768x379.png 768w\" sizes=\"(max-width: 810px) 100vw, 810px\" \/><figcaption><br><\/figcaption><\/figure><\/div>\n\n\n<p>Under the Customer Information section, set the following values:<\/p>\n\n\n\n<ul><li>Client User Agent -&gt; User Agent<\/li><li>Click ID -&gt; Fbclid<\/li><li>Browser ID -&gt; Fbp<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"773\" height=\"295\" src=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-4.png\" alt=\"\" class=\"wp-image-4982\" srcset=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-4.png 773w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-4-300x114.png 300w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-4-768x293.png 768w\" sizes=\"(max-width: 773px) 100vw, 773px\" \/><\/figure><\/div>\n\n\n<p>Under the Custom Data section, set the following values:<\/p>\n\n\n\n<ul><li>Value -&gt; Value<\/li><li>Currency -&gt; Currency<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"809\" height=\"342\" src=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-5.png\" alt=\"\" class=\"wp-image-4983\" srcset=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-5.png 809w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-5-300x127.png 300w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/02\/image-5-768x325.png 768w\" sizes=\"(max-width: 809px) 100vw, 809px\" \/><\/figure><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Pro tip:<br><\/strong>You can send additional parameters in your request to provide more data about the event. Note that events must use the required parameters as defined per each event type.<\/p><\/blockquote>\n\n\n\n<p>After the mapping is finished, you can now test the event. You can also add the Test Event Code to the events sent to see them in real-time in your Facebook Event Manager.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/09\/image-4846126-1024x546.png\" alt=\"image-4846126\" class=\"wp-image-5362\" srcset=\"https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/09\/image-4846126-1024x546.png 1024w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/09\/image-4846126-300x160.png 300w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/09\/image-4846126-768x409.png 768w, https:\/\/trackingchef.com\/wp-content\/uploads\/2022\/09\/image-4846126.png 1460w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3-adding-the-client-side-script\">Step 3 &#8211; Adding the client-side script<\/h2>\n\n\n\n<p>After completing the Zapier setup, we now need to hop over to Google Tag Manager (GTM) to handle the events on happening on the website. Without completing this, no events will be sent to Zapier. In GTM, create a new Custom HTML tag and paste in the code below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\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=')&#91;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=')&#91;1];\n  });\n  fbp = fbp.length &amp;&amp; fbp&#91;0] || null;\n  fbc = fbc.length &amp;&amp; fbc&#91;0] || null;\n  \tif(!fbc &amp;&amp; window.location.search.includes('fbclid=')){\n\t\tfbc = 'fb.1.'+ (+new Date()) +'.'+ window.location.search.split('fbclid=')&#91;1];\n\t}\n  var headers = new Headers();\n  headers.append(\"Content-Type\", \"application\/json\");\n  var body = {\n    \"event\": event,\n    \"fbp\": fbp,\n    \"fbclid\": fbc,\n    \"user_agent\": navigator.userAgent,\n    \"url\": window.location.origin + window.location.pathname\n  };\n  body = Object.assign({}, body, eventData)\n  var options = {\n    method: \"POST\",\n    headers: headers,\n    mode: \"no-cors\",\n    body: JSON.stringify(body)\n  };\n  fetch(\"ZAPIER_WEBHOOK_URL\", options);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>The only change you need to do in this code is to replace the ZAPIER_WEBHOOK_URL with, well, your Zapier webhook URL (see Step 1 above). Set the tag to trigger on All Pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-4-triggering-the-script\">Step 4 &#8211; Triggering the script<\/h2>\n\n\n\n<p>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<p>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<p>For example, in parallel to sending <em>fbq(&#8216;track&#8217;, &#8216;Lead&#8217;)<\/em> you can send <em>CAPI(&#8216;Lead&#8217;)<\/em>. Notice that there&#8217;s no need to use the &#8216;track&#8217; parameter.<\/p>\n\n\n\n<p>You can also pass custom parameters, such as purchase value and currency, by invoking <em>CAPI(&#8216;Purchase&#8217;, {currency: &#8220;USD&#8221;, value: 30.00})<\/em>. Since the data structure is identical to the Facebook Pixel, there&#8217;s little development effort required here (as the same triggers and data object apply here).<\/p>\n\n\n\n<p>For example. you can use a Custom HTML tag that triggers on Purchase events with this code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n    CAPI(\"Purchase\",{currency:\"USD\",value:30.00)\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>My recent blog post on creating a Facebook Conversions API (aka CAPI) using Pipedream has been quite a success. Released in February, it&#8217;s already ranking as our 4th most popular blog post on my blog. One of the most frequent questions I get about this post is how come I didn&#8217;t choose Integromat or Zapier [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,39],"tags":[],"_links":{"self":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4977"}],"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=4977"}],"version-history":[{"count":2,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4977\/revisions"}],"predecessor-version":[{"id":5363,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4977\/revisions\/5363"}],"wp:attachment":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/media?parent=4977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/categories?post=4977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/tags?post=4977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}