All the Events

"Anonymous" Events

If you have already added your site ID on the configuration page and have JavaScript enabled in your browser—and aren't using a content blocker to prevent loading any of the scripts on this page—You're being tracked.

Don't be alarmed... Unless you have scrolled down and clicked on any of the "Send Event" buttons below, chances are that all we're tracking at this point are your page views across this domain. There are two event types that can be tracked with the JavaScript SDK, both of which can be sent to Customer.io at any time after the JavaScript snippet's initialization. The two event types are: track and page events.

If you have enabled anonymous event merging in your workspace, then anonymous events are only "anonymous" until you associate the tracked anonymous_id with an identified profile in Customer.io.

track Events

To make a long story short, track events are typically all you will be responsible for sending. They are initiated in the following manner: 

  window._cio.track(EVENT_NAME, {
    ...EVENT_PROPERTIES
    })

In the code snippet above EVENT_NAME should be a String value. And EVENT_PROPERTIES should be a valid JavaScript or JSON Object. The ... is a little built-in JavaScript feature known as a "spread operator", in this case we're exemplifying that you can use it to copy the key-value pairs of your EVENT_PROPERTIES Object into a new Object.

Ready to send a track event? Go ahead and click the button below, and we'll send an event named "websdk_playground_test_event_1" (or "cdp_playground_test_event_1" if using the cdp) with the following metadata: 

  {
    message: "CIO Web SDK Test",
    source: <current_url>,
    timestamp: <epoch_timestamp>
  }

Track an event

This data will be used to send a track call to your Customer.io workspace.

page Events

Click on the following buttons to "navigate" to another page

To make a long story short, whenever your webpage reloads, as soon as the tracking snippet is successfully fetched (either from cache or from the CDN where the snippet is hosted) and initialized, a page call will be sent. That default "page view" activity will contain very basic information, including the browser's screen height, width, and the "referrer". All of this data can be pulled up from your JavaScript Developer Tools. Open the JavaScript browser developer tools and try looking up the following values:

  • Find your screen width with window.innerWidth
  • Find your screen height with window.innerHeight
  • Find the referrer url with document.referrer

Is your application a "Single Page Application" (SPA)? If so, and if you want to track different view changes, you'll need to send a page call within your code to show the "location" changes.

Resources