Unbounce + Iterable Integration

There are many different ways to integrate landing pages and online forms with a user's email and data into Iterable. One such way is to use Zapier as an intermediary.

Zapier is helpful because it lets you clean and manipulate the data you pass into Iterable without any coding. Doing this on your own would require you to write a script and host it somewhere. If you are not that technical, or want to set up something quickly, doing it via Zapier is the way to go.

For this specific integration example, you need:

• An Unbounce account
• A Zapier account

# Overview

There are three high-level things you will do in this integration:

1. Set up Unbounce to send your form data to a Zapier webhook.

2. Set up Zapier to catch that data, optionally manipulate it in some way, and send it to an Iterable webhook.

3. (Optional) Set up a journey in Iterable to do something with the user's data once it is in your project.

# Setup

Follow these instruction to integrate Unbounce and Iterable with Zapier:

1. In Zapier, start a new Zap.

   

   • Make it a Webhook (Catch Hook) to Webhook (POST) Zap.

   • Copy the custom webhook URL Zapier generates.

     NOTE

     Do not share this custom URL. It should be private to your project.

   • Leave this Zapier browser tab; you will come back to it in a minute.

2. In Unbounce, activate the Webhook: POST to URL integration.

   

   • Paste the custom webhook URL from Zapier into the field in the window that comes up.

     

   • Press Save and Continue.

3. In Unbounce, map your form data.

   Map the information you collect in the form to the data you want to send to Zapier:

   

   In the case above, we mapped the email we are collecting in the form (Work email) to a field called email in the webhook. You can similarly map any other field (or create custom fields) in this interface. We recommend you have a custom field that passes an arbitrary string (for example, unbounce_signup) that will come in handy later.

   This step is what determines what form data you send and what it is called. This is important for later in the integration.

   Once you are done mapping, click Done. This will set up the webhook in Unbounce.

   NOTE

   At this point, you should fill in and submit your Unbounce form a couple of times with test data. This will send some data up to Zapier, which uses it to gather information on your fields.

4. (Optional) In Zapier, set up data filters as necessary.

   

   You can filter the data you will receive from Unbounce. This is useful if you don't want to process every single form entry (e.g., those that did not opt-in to a newsletter). If you don't need to filter, skip this step.

   Zapier lets you choose the field you want to filter on and then the type of filter (e.g., matches an exact string, as in the screenshot below).

   NOTE

   Filtering is a good reason to send initial test data from Unbounce to the Zapier webhook. Zapier needs to see example data in order to know what fields to expect and potentially filter on.

   In this example, we are filtering on the Newsletter field and only letting through entries where that field exactly matches the string Sign up for the Iterable newsletter.

5. In Iterable, create a server-side API key.

   NOTE

   Do not share this API key; it is private to your project.

6. Construct the Iterable webhook URL.

   For the purposes of this integration, you will use Iterable's POST /api/events/track API endpoint to ingest data. There are other options, but this one is very flexible. Append your API key to this URL:

   https://api.iterable.com/api/events/track?apiKey=
   

   The resulting string (the URL with the appended API key) is the Iterable URL that Zapier will call.

7. In Zapier, enter the data destination and final mapping.

   

   • For URL, paste the Iterable webhook URL you created in step 6.

   • For Payload Type, select JSON.

   • For Unflatten, select Yes.

   • Finally, tell Zapier what data to send to Iterable and with what field names. The Iterable POST /api/events/track API endpoint expects the following fields:

     • eventName - This can be an arbitrary string like unbounce_signup or whatever else you choose from what you are sending from your form. The best way to address this may be to create a custom field back in Unbounce, as discussed in step 3.

     • email - Your user's email address

     • Various dataFields fields

       NOTE

       Iterable expects dataFields to contain multiple values (or key-value pairs). These correspond to any of the other fields you are collecting in your Unbounce form beyond email. To tell Zapier to nest multiple key-value pairs under dataFields in Iterable, do what is shown in the screenshot above:

       For example, to pass both age and height, enter the following in the text fields on the left in Zapier:

       • dataFields__age
       • dataFields__height

       Using a field name of dataFields, followed by two underscores, followed by the field name nests, those fields under dataFields in Iterable.

       For the fields on the right, press the Insert fields button to select which fields to assign.

   • Scroll down in the Zapier page and press Turn Zap On. At this point you are set up to send data from Unbounce to Zapier, and from Zapier to Iterable. Since you are using your private Iterable API key, Iterable will see that Zapier is sending data via a webhook, will catch the data and will add it to your project.

     NOTE

     Since this example uses the POST /api/events/track API, a custom event will be recorded in Iterable. However, this will not create a user profile that can be used in segmentation.

     You will be able to find the user through the user lookup tool, but the user will not be found in any segmentation queries until you create the user profile through an add list action, POST /api/users/update API call, send message action, or update subscriptions action.

     The next step describes how to futher use the incoming data in Iterable.

8. In Iterable, create a journey:

   • Review the Journeys Overview guide.

   • Navigate to Messaging > Journeys and click Create New Journey.

   • Create a journey similar to the following:

     

     • If you open the Start tile, you will see that the entry source is a custom event. In this case, the custom event is unbounce_signup. You may recall this is the eventName field we included in the Zapier webhook call. You can call it any name you like, you just have to be consistent. When Iterable sees that event name, it will trigger this journey.

     • The next step is a simple action tile. In this case, it adds the user to the Email newsletter signups list.

     • Finally, this example updates the user's profile with web-requestdemo as the marketingsource. This is just an example; you could skip this tile entirely, or use it to update with any info relevant to your project.

And that's it. You have taken data from your Unbounce landing page/form, sent it up to Zapier and then on to Iterable, where you can manipulate it as necessary with our journeys.