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=["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';
        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

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.

        // 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 _cio.identify is called, you must send us the following:

  • id (that user's unique identifier)

...and we strongly recommend you also send:

  • email (or other contact attribute)
  • created_at (a timestamp which represents when they first signed up)

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, last_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 _cio.identify call again. You must include their id 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>
Was this article helpful?