Get started

How it works

Our web SDK is a JavaScript snippet that helps you identify, send events for, and send in-app messages to people who visit your website(s) or use your web app(s). Simply drop the snippet into your site and it exposes functions you can call to take advantage of Customer.io.

Install the snippet

Go to Data & Integrations > Integrations > Customer.io API to find and copy our JavaScript snippet with all the values specific to your region and workspace. Include this snippet on every page in your app, immediately before the closing </body> tag. If you want to use Google Tag Manager to install, follow the instructions below.

That’s it! Now you’re ready to use our web SDK. Below is an example snippet for the US region.

<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","on","off"];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.setAttribute('data-use-array-params', 'true');
        
        //Enables in-app messaging
        t.setAttribute('data-use-in-app', 'true');
        
        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>

Configure the SDK

For the most part, copying the JavaScript snippet from any page in your workspace includes all the necessary parameters to use our web SDK. But there are a few parameters you can add or set to change the SDK’s behaviors:

ParameterDefaultDescription
data-use-array-paramstrueWhen true, arrays in identify and track calls keep their shape as passed to Customer.io. Set to false to pass arrays as objects containing keys representing the index/order of items in the request. See handling arrays in track calls for more information.
data-auto-track-pagetrueWhen true, the SDK automatically sends page view events when it loads.
data-use-in-appfalseIf you want to send in-app messages to your website, you must set this to true. See In-App Messages to ensure in-app is enabled in your workspace.

 You no longer need your Organization ID

If you enabled in-app support before January 26, 2023, you used your organization-id when configuring our SDKs so that you could send in-app messages. You can leave this code in your SDK configuration, but it’s no longer necessary; you can send in-app messages without it.

Function reference

The web SDK exposes the following functions.

Functionautomaticanonymousdescription
_cio.identifyIdentifies a person and updates their attributes. Future calls reference this person.
_cio.pageSends a page event, representing a “pageview”.
_cio.trackSends a custom event, representing a person’s activity on your website.
_cio.resetStop identifying a person. You might send this call when someone logs out or refuses tracking consent.
_cio.onListen for an in-app message event.
_cio.offStop listening for an in-app message event.

Use the JavaScript SDK via Google Tag Manager (GTM)

You can inject our JavaScript snippet and use in-app messaging features through Google Tag Manager.

Install the snippet

  1. Log into Google Tag Manager and go to the container for your website.
  2. Create a new tag and select Custom HTML as your tag type.
  3. Paste the the Customer.io JavaScript snippet in the HTML text area. Make sure to replace YOUR_SITE_ID with your workspace site id.
  4. Go down to the Triggering section and add the All Pages trigger. Or, create a custom trigger that covers the individual pages or sections of your website or app that you want to track events from, collect page views from, and show in-app messages on.
  5. Save the new tag with your preferred tag name.
Example GTM installation tag
Example GTM installation tag

Identify people

  1. Create a new tag and select Custom HTML as your tag type.

  2. Add the javascript code that identifies the people you want to message. This example assumes that you have access to a User ID variable in your GTM workspace. Your actual implementation will differ based on how your GTM container is configured.

    <script type="text/javascript">
     var profile_id = {{User ID}};
     if (profile_id && profile_id != 'undefined'){
       _cio.identify({
         id: profile_id
       });
     }
    </script>
    
  3. Below the HTML text area are Advanced Settings. Expand the section and look for Tag Sequencing. Select the first checkbox Fire a tag before… and select the tag that you created in the previous section.

    GTM tag sequencing
    GTM tag sequencing

  4. Go down to the Triggering section and add the All Pages trigger. Or, create a custom trigger covering just the pages or sections of your website or app that you want to track events, collect page views, and show in-app messages.

  5. Save the new tag with your preferred tag name.

Preview and test

  1. Click GTM Preview and go to a page or screen where you would expect to see user activity.
  2. Log into Customer.io go to the Activity Log. Here you should see pageviews generated by the Javascript tracking snippet and identified to your test profile from step 1.
    Example Activity Log entry
    Example Activity Log entry

Submit and publish

When you’ve verified the integration, submit the changes in GTM and publish the new version.

Copied to clipboard!
  Contents
Is this page helpful?