Integrating with Customer.io
UpdatedWe offer a number of ways to get data in and out of Customer.io. This flexibility ensures that you can activate your data in Customer.io and that your data is never stuck with us; you can take advantage of your data in any number of downstream platforms. This page provides some basic instructions to get you started, including how to get your data flowing through Customer.io!
Here’s a quick overview of the process to get data into Customer.io. In this video, we’re using the JavaScript source—our most popular and easy-to-use source.
1. Add a JavaScript integration
Our JavaScript client feeds data inAn integration that feeds data into Customer.io. to Customer.io from your website. You’ll add data in integrations for every system or touchpoint you want to collect data from.
- Go to Data & Integrations > Integrations and click Add Integration.
- Select our JavaScript integration.
- Enter a Name for the integration and click Submit. You should give your integration a name that helps you and your teammates understand the resource you’re capturing data from—like “company website” or “community forums.”
- Under Installation Instructions, you’ll find the JavaScript snippet that you need to add to your website. Copy this code and paste it in your website’s
<head>tag.
That’s it! Now you’re ready to capture data from your website.
2. Make a page call
Go to the website where you installed the JavaScript snippet in the steps above and visit a few pages. In Customer.io, go back to your source’s API Calls tab. You should see page events!
Do you have a single page app?
The snippet automatically calls cioanalytics.page() when the snippet loads. If you have a single page app (SPA), it’s likely that each route isn’t necessarily a new page, so you’ll need to call cioanalytics.page() manually for each route in your app.
A page event represents a page view—a page someone visited in your website or app. The JavaScript snippet automatically captures page events.
However, these events are still anonymous. You’ll need to set up identify calls and other events to associate anonymous data with people you know. You can identify people when they provide their email address on a form, login to your website, and so on. See our JavaScript source for help implementing the full array of events you can (and should) capture from your source.
While your source might change, our event types don’t. You can capture the same events—or a subset of events—from the sources we support.
3. Add a destination
A destination is the place you want to send your data to. You can send data to analytics platforms, CRMs, support tools, or other marketing platforms from any of your sources. We reshape data from your sources to fit the shapes expected by your destinations.
- Go to the Data Pipelines tab and click Connections.
- Click Add New under Destinations.
- Select your destination. In our examples, we’re using the Customer.io destination.
- Select the JavaScript Source. This lets you send data from your website (using the JavaScript source) to your new destination!
- Configure your destination. Each destination has its own configuration settings—depending on the ways in which you authenticate with a destination, the types of events it accepts, and so on. See our integration directory and select your destination to get detailed instructions.
- Click Enable Destination.
If you go back to your website and reload a page, you’ll see data flowing right away! These are anonymous page events—pageviews. But, to take advantage of data in your destination, you’ll need to implement the identify method.
Add identify, track, and other calls to your website to get the most out of Data Pipelines and send actionable data to your destinations.
4. Validate your implementation
When you look at a source or destination, you can go to the Data out tab to see the individual events that flow from your source, and the calls that we make to your destination.
You can use these tabs to make sure that your source events are set up properly and mapped correctly to your destination. These pages show events as they come in—a nearly live stream.
Events and Actions: How we map source data to destinations
Your source shows Data In. These are the calls that you make in our JavaScript client library or in our server side libraries, and represent things that people do on your website or in your app. Like, when you identify a person, you’ll see an identify call come into your source.
You can check these events to make sure that you’re sending the right information into Customer.io.
When you set up a destination, you’ll see an Actions tab. An action determines the data that we map to your destination. In most cases, you’ll want to stick with our default actions. But you can customize these if you want—like if you want to filter out specific incoming data for a destination or map specific event names to actions in your destination(s).
Be careful when editing actions for your workspace
The Customer.io integration is how data gets into Customer.io—the people, events, and other data that you’ll use to send messages to your audience. It’s already configured with actionsThe source event and data that triggers an API call to your destination. For example, an incoming identify event from your sources adds or updates a person in our Customer.io Journeys destination. to support incoming data. You can edit these actions if you want to change how we handle incoming data, but take care not to inadvertently break integrations with Customer.io.
