Send data using Javascript

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 `` 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.

Was this article helpful?