10

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:

Function reference

The web SDK exposes the following functions.

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.

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.

   

   

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.

   

   

Submit and publish

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