Send data using Javascript
Our basic integration uses a Javascript snippet, a block of code inserted into your web app. It’s a low-impact way to send data to Customer.io — through your users' web browsers. While an API integration is more flexible, this is a really quick way to get started.
How to use the Javascript snippet
Step 1: Add the basic Javascript
When you create a Customer.io account, you get a unique id
, which we then use to create a Javascript snippet for you. Below is an example snippet for the US region. You can go to Settings > Integrations > Customer.io API to get the snippet with all the values specific to your region and workspace.
You should include this snippet on every page in your app, immediately before the closing </body>
tag.
Use the right snippet for your region
track-eu.js
. If you use the US-based snippet for an EU-region account, we’ll redirect requests accordingly, but your data may be subject to logging in the US.<script type="text/javascript">
var _cio = _cio || [];
(function() {
var a,b,c;a=function(f){return function(){_cio.push([f].
concat(Array.prototype.slice.call(arguments,0)))}};b=["load","identify",
"sidentify","track","page"];for(c=0;c<b.length;c++){_cio[b[c]]=a(b[c])};
var t = document.createElement('script'),
s = document.getElementsByTagName('script')[0];
t.async = true;
t.id = 'cio-tracker';
t.setAttribute('data-site-id', 'YOUR_SITE_ID');
t.src = 'https://assets.customer.io/assets/track.js';
//If your account is in the EU, use:
//t.src = 'https://assets.customer.io/assets/track-eu.js'
s.parentNode.insertBefore(t, s);
})();
</script>
Step 2: Identify your users
To segment users and send emails, you need to identify your users to us. To let us know exactly which users are sending data through your app, you’ll need to add this _cio.identify
function to your HTML, beneath the Javascript snippet placed in Step 1 above.
// Only send this when a user is logged in
<script type="text/javascript">
_cio.identify({
// Required attributes
id: 'YOUR_USER_ID_HERE', // Unique id for the currently signed in user in your application.
// This value is an email address if your workspace uses email
// as an identifier.
// Strongly recommended attributes
email: 'user@domain.com', // Email of the currently signed in user.
created_at: 1339438758, // Timestamp in your system that represents when
// the user first signed up. You'll want to send it
// as seconds since the epoch.
// Example attributes (you can name attributes what you wish)
first_name: 'John', // Add any attributes you'd like to use in the email subject or body.
last_name: 'Smith', // First name and last name are shown on people pages.
plan_name: 'premium' // To use the example segments, set this to 'free' or 'premium'.
});
</script>
**The first time you call ** `_cio.identify`, you _must_ send the following:
id
: the person’s unique identifier. If your workspace uses email as a unique identifier, this value is an email address. Otherwise,id
should be a value that maps a person to your backend systems.
…and we strongly recommend you send:
email
: or other contact attributes. If your workspace uses email as a unique ID, and you can still provide theemail
attribute, though you should expect theid
andemail
addresses to match.created_at
(a timestamp which represents when they first signed up)
You can also send in additional user attributes that are of value to you. In the above example we send first_name
, last_name
and plan_name
attributes. You can use these attributes in the body of an email, or you can use them to segment your users.
Important things to know
- We only track activity for users registered in your app, after
_cio.identify
is called. We do not track anonymous or unregistered user activity. - To update an existing user’s attributes, just send the
_cio.identify
call again. You must include theirid
and any new attribute values. If the attributes already exist in their profile, we’ll overwrite them. If there are any new attributes included in the call, we’ll add them to the profile. - A Javascript snippet makes it really easy to get started, but isn’t essential. You may do everything through our REST API.
- In addition to attributes, you may want to track custom events like “watchedIntroVideo” or “purchased”. Note,
_cio.track
calls should only be made after_cio.identify
is called for the currently logged in user. Otherwise the events will not be associated with a known user in your account. Here are a few examples:
<script type="text/javascript">
_cio.track("watchedIntroVideo");
_cio.track("purchased", { price: "23.45" });
</script>