Creating a Facebook Conversions API with Zapier and GTM – Fixel

My recent blog post on creating a Facebook Conversions API (aka CAPI) using Pipedream has been quite a success. Released on February, it’s already ranking as our 4th most popular blog post on the Fixel blog.

One of the most frequent questions I get about this post is how come I didn’t choose Integromat or Zapier instead of Pipedream. While I’m a big fan of these two platforms (Integromat slightly more), Pipedream simply offers better pricing for scale. This is very lucrative if you’re switching your entire pixel tracking to server side (i.e. including Pageviews), which can easily add up to tens of thousands of events.

At Zapier or Integromat’s pricing, this becomes a major expense. So Pipedream was my go to for this.

But some advertisers want a simpler solution (though in all fairness I think it’s simple enough), so I figured I’d write up a quick guide for implementing Facebook’s Conversions API using Zapier.

Important note

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’t 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).

Facebook even released this case study with “Love your Melon” that showed a 17% increase in attributed revenue after switching to the Conversions API.

When is Zapier the right choice for you?

You’re lazy – No need to be ashamed of it. You have other, more important, stuff to handle so you’re willing to pay the premium
You’re tracking only few events – In many cases, advertisers don’t need each and every event tracked using the CAPI solution, making the overall sum events sent smaller

Important note:
To implement the CAPI solution via Zapier you are required to have a paid Zapier account (as the free account doesn’t have the Webhook app (Premium App)

Benefits of using Zapier

Simpler set up – no need to extract your Pixel or Token, just click on your ad account and you’re all set
No code – While Pipedream uses a ready made code snippet, you still need to make minor changes to it

Step 1 – Create a Zap & Trigger

In your Zapier account, create a New Zap.

The Zap’s trigger should be set to “Webhooks by Zapier” and the trigger event to “Catch hook”.

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 “Test trigger” step.

Sending a test trigger

The test trigger will now determine the structure of the data sent into Zapier, so it’s important to get this correct.

Open a new tab with Request Bin
Paste the Webhook URL in the top box
Change the call type from GET to POST
Under the Content tab, select JSON (application/json) from the drop down
Paste the JSON values bellow in the text box
Hit Send

{
        "event": "Purchase",
        "currency": "USD",
  		"value": 30.00,
        "fbp": "fbp123",
        "fbclid": "fbc456",
        "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",
        "url": "https://fixel.ai/"
}

Important note:
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).

Once received in Zapier, you will have these values available to continue creating your Zap.

Step 2 – Create an Action

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 “Facebook Conversion”.

Under “Action Event”, 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).

Pro tip:
You can use the “Send Other Event” option to create a dynamic action (i.e. a single webhook dynamically triggers a specific event type)

For sake of simplicity, let’s select the Purchase event.

Set the Action Source to Website.

Next, you will need to select the relevant Facebook Ad Account/Business Manager and then the relevant pixel for which the event is triggered.

Under the Event Info section, set the Event Source URL to the URL parameter received in the webhook.

Under the Customer Information section, set the following values:

Client User Agent -> User Agent
Click ID -> Fbclid
Browser ID -> Fbp

Under the Custom Data section, set the following values:

Value -> Value
Currency -> Currency

Pro tip:
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.

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.

Step 3 – Adding the client-side script

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.

<script>
    function CAPI(event, eventData) {
  var fbp = document.cookie.split(';').filter(function (c) {
    return c.includes('_fbp=');
  }).map(function (c) {
    return c.split('_fbp=')[1];
  });
  var fbc = document.cookie.split(';').filter(function (c) {
    return c.includes('_fbc=');
  }).map(function (c) {
    return c.split('_fbc=')[1];
  });
  fbp = fbp.length && fbp[0] || null;
  fbc = fbc.length && fbc[0] || null;
  	if(!fbc && window.location.search.includes('fbclid=')){
		fbc = 'fb.1.'+ (+new Date()) +'.'+ window.location.search.split('fbclid=')[1];
	}
  var headers = new Headers();
  headers.append("Content-Type", "application/json");
  var body = {
    "event": event,
    "fbp": fbp,
    "fbclid": fbc,
    "user_agent": navigator.userAgent,
    "url": window.location.origin + window.location.pathname
  };
  body = Object.assign({}, body, eventData)
  var options = {
    method: "POST",
    headers: headers,
    mode: "no-cors",
    body: JSON.stringify(body)
  };
  fetch("ZAPIER_WEBHOOK_URL", options);
}
</script>

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.

Step 4 – Triggering the script

Once we have the script in place on all pages, we can now invoke it with the Facebook CAPI events we want to send.

These events can be invoked just like the regular Facebook events that use the fbq() method. Instead, they use the CAPI() method.

For example, in parallel to sending fbq(‘track’, ‘Lead’) you can send CAPI(‘Lead’). Notice that there’s no need to use the ‘track’ parameter.

You can also pass custom parameters, such as purchase value and currency, by invoking CAPI(‘Purchase’, {currency: “USD”, value: 30.00}). 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).

For example. you can use a Custom HTML tag that triggers on Purchase events with this code:

<script>
    CAPI("Purchase",{currency:"USD",value:30.00)
</script>

Creating a Facebook Conversions API with Zapier and GTM – Fixel

Important note

When is Zapier the right choice for you?

Benefits of using Zapier

Step 1 – Create a Zap & Trigger

Sending a test trigger

Step 2 – Create an Action

Step 3 – Adding the client-side script

Step 4 – Triggering the script

Segment Smarter

Product

Use Cases

Resources

Company