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.

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

• 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 the email attribute, though you should expect the id and email 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 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>