Menu
 

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. Here’s what that looks like:

<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=["identify",
    "track"];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';
    s.parentNode.insertBefore(t, s);
  })();
</script>

This should be included on every page in your app, just before the closing </body> tag.

Step 2: Identify your users

So we know exactly which users are sending data through your app, you’ll need to add this identify function to your HTML, beneath the Javascript.

<script type="text/javascript">
  // Only send this when a user is logged in
  _cio.identify({
  // Required attributes
  id: 'YOUR_USER_ID_HERE',           // Unique id for the currently signed in user in your application.
  email: 'USER@EXAMPLE>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.

  // Optional (these are examples. You can name attributes what you wish)

  first_name: 'John',       // Add any attributes you'd like to use in the email subject or body.
  plan_name: 'premium'      // To use the example segments, set this to 'free' or 'premium'.
  });
</script>

The first time _cio.identify is called, you must send us the following:

  • id (that user’s unique identifier)
  • created_at (a timestamp which represents when they first signed up)
  • email (or other contact attribute)

But you can also send in any additional user attributes that are of value to you. In the above example we are sending the optional attributes first_name and plan_name. 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 identify call again. You must include their id and any new attribute values - we’ll overwrite them. If there are any new ones included in the call, we’ll add them as well.

  • A Javascript snippet makes it really easy to get started, but isn’t essential. You may do everything through our REST API.