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:

Cross Site Cookie Support

The data-cross-site-support parameter is designed to help you use the snippet in situations where cookies might not be available.

When set to true, the SDK can set cookies when you use certain third party platforms like Shopify. Shopify uses iframes to embed your website, and this setting enables the SDK to set first-party cookies from your embedded site.

Cross-site tracking may not work for all users. Safari blocks cross-site tracking by default (via the Prevent cross-site tracking setting).

In-memory storage fallback

The data-enable-in-memory-storage can help you use the web SDK in some situations where cookies aren’t available.

When set to true, the web SDK will store information in memory as a fallback. This setting allows for tracking when cookies aren’t available due to privacy settings, running on third party platforms, etc.

If a user’s cookies are unavailable and they haven’t been identified, you won’t be able to track their anonymous activity; anonymous tracking is unavailable when reading from memory. But if a user’s cookies are available, anonymous tracking will work as it normally does.

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.