Universal Analytics

7 Minute read

Reading Time: 7 minute

While Ceros provides a comprehensive view of how your content is performing through the Analytics dashboard, we understand that many Ceros users also leverage third-party analytics tools to track their web content. The Universal Analytics integration can help bridge this gap. The integration allows you to fire events directly to the analytics platform of your choosing, triggered by custom JavaScript events sent from Ceros.

Click here if you’re looking for the Adobe Analytics integration, or if you are looking to learn about the included Ceros Analytics.

How it works:

The Universal Analytics integration works by pushing Ceros analytics events to the web page as Javascript custom events so that your chosen analytics platform can listen for the events. 

What can be tracked via the Universal Analytics integration:

  • Component Click
  • Component Hover
  • Experience Open
  • Form Submit 
  • Lightbox Click (on-click, open lightbox interaction)
  • Link Click
  • Page View 
  • Video Play
  • Video Progress Percent (captures in 10% intervals)
  • Video Progress Time (captures in 10 second intervals) 

Setting it up

To enable Universal Analytics for the entire account:

  1. Go to your Account page, you can find a link in the top right drop-down menu in the Ceros Admin
  2. Click the Integrations link in the right column
  3. Toggle on Universal Analytics 

To enable Universal Analytics for individual experiences: 

  1. In the project section of your account, hover over the experience you want to integrate with Universal Analytics and click the ‘Integrations’ settings gear. 
  2. Toggle on ‘Universal Analytics’ 

Things to Note

After activating the Universal Analytics integration, the analytics platform you use might have some additional setup needed in order to properly listen for the Ceros events. Additionally, you will have the option to add embed codes from your third-party analytics tool to the <head> tag of your Ceros experiences, this is primarily useful for standalone experiences.

The Published Experience Embed Code will only need to be added to standalone experiences

* You do not need to embed this analytics code if you’re already embedding your Ceros experience! The analytics embed code will already be included on your webpage, therefore including this additional code could result in double-tracking. 

The Preview Embed Code is available if you want to test that the data is flowing correctly. You can add this code to the previewer box and then test the experience in preview mode. 

Ceros Event Delivery

When the Universal Analytics integration is enabled, the Ceros experience will trigger Javascript custom events for each Ceros analytics event. For example, a “component-click” event would essentially be triggered within the Ceros experience as follows:

const event = new CustomEvent('ceros-analytics-event',{detail: {...} });
document.body.dispatchEvent(event);

When the experience is embedded, the events are also triggered in the parent page. Depending on your specific use case you may or may not want to set an embed code in the integration options when the Ceros experience will be deployed via the experience embed code since it’s likely the parent page is already set up with the third-party analytics tracking scripts. 

Listening for Ceros Analytics Events

All Ceros events will be triggered with “ceros-analytics-event” as the CustomEvent event name. Each CustomEvent payload (“detail” property) will include an “eventType” property that will indicate the specific type of event. To listen for these events, your custom integration code should listen for the “ceros-analytics-event” event on the document.body element in the HTML page. For example:

document.body.addEventListener('ceros-analytics-event', function(event){
    if (event.detail.eventType === 'component-click') {
        /*  Do something with the event data */
        console.log('You just clicked: ' + event.detail.componentName);
    }
})

Note: We recommend that customers do not use the “async” tag on the <script> tag when loading custom events on your page. If the “async” tag is enabled, there is a chance you will miss some of our CustomEvents that are sent before your script has loaded to listen for them. Additional information on this can be found here.

Ceros Analytics Event Definitions

The following analytics events are emitted from the Ceros experience.   

Component Click Event

Each click by a user on the Ceros component with an on-click interaction will trigger this event. 

The event detail object will contain the following properties:

  • componentName: Name of the component set in the Studio Layers panel
  • eventType: ’component-click’
  • experienceName: Name of the experience in Ceros
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the component (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in Ceros Studio)

Component Hover Event

Each mouse-over by a user on the Ceros component with an on-hover interaction will trigger this event. 

The event detail object will contain the following properties:

  • componentName: Name of the component set in the Studio Layers panel
  • eventType: ’component-hover’
  • experienceName: Name of the experience in Ceros
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the component (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the component (if set via SDK panel in Ceros Studio)

Experience Open Event

This event will be triggered each time the experience is loaded into the browser.

The event detail object will contain the following properties:

  • eventType: ’experience-open’
  • experienceName: Name of the experience in Ceros
  • pageName: Page name (if configured) that was initially loaded
  • pageNum: Page number that was initially loaded

Form Submit Event

This event will be triggered when a user submits a Hubspot or Marketo form embedded in a Ceros Event. 

The event detail object will contain the following properties:

  • componentName: Name of the component set in the Studio Layers panel
  • eventType: ‘form-submit’
  • experienceName: Name of the experience in Ceros
  • formId: ID of the form that was submitted (defined in the Forms provider)
  • formName:: Name of the form that was submitted (defined in the Forms provider)
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the component (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in Ceros Studio)

Lightbox Click Event

This event is triggered when a user clicks on a component that is configured with an on-click open lightbox interaction in the Ceros Studio. 

The event detail object will contain the following properties:

  • componentName: Name of the component set in the Studio Layers panel
  • eventType: ‘lightbox-click’
  • experienceName: Name of the experience in Ceros
  • lightboxUrl: URL of the light box that was opened
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the component (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in Ceros Studio)

Link Click Event

This event is triggered when a user clicks on a component configured with an on-click go to url interaction in the Ceros Studio.

The event detail object will contain the following properties:

  • componentName: Name of the component set in the Studio Layers panel
  • eventType: ‘link-click’
  • experienceName: Name of the experience in Ceros
  • url: URL of the link that was clicked
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the component (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in Ceros Studio)

Page View Event

This event is triggered each time a user views a page in a Ceros experience. A page view event is triggered on experience load as well as every page transition.

The event detail object will contain the following properties:

  • eventType: ‘page-view’
  • experienceName: Name of the experience in Ceros
  • page: URL path of the page (e.g. /my-experience/p/5)
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the page (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the page  (if set via SDK panel in Ceros Studio)

Video Play Event

This event is triggered when a user plays a video. This event is only triggered once per user session (i.e. until the experience is reloaded). You can monitor video consumption using the video progress events. 

Note: this event is only triggered for videos that were uploaded to the Ceros Studio.   

The event detail object will contain the following properties:

  • componentName: Name of the component set in the Studio Layers panel
  • eventType: ‘video-play’
  • experienceName: Name of the experience in Ceros
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the component (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in Ceros Studio)

Video Progress Percent Event

This event is triggered for every 10% of a video watched by a user. Since users can often skip around in a video, the % progress reported by this event is the total % of the video watched so far and not a sequential % of the video watched. For example, if a user were to watch the first 15% of a video and then jump and watch the last 10% of the video, 10% and 20% video progress events would be triggered. A 100% progress would only be triggered when the user watched the entire video in any order.   

Note: this event is only triggered for non-looping videos that were uploaded to the Ceros Studio.   

The event detail object will contain the following properties:

  • componentName: Name of the component set in the Studio Layers panel
  • eventType: ‘video-progress-percent’
  • experienceName: Name of the experience in Ceros
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the component (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in Ceros Studio)
  • videoProgressPct: Total percentage (in 10% increments) of the video watched by the user.  

Video Progress Time Event

This event is triggered when a user watches 10 seconds of a video. Essentially this confirms that a user watched the video from videoPosition to videoPosition + videoPlayTime.

Note: this event is only triggered for non-looping videos that were uploaded to the Ceros Studio.  

The event detail object will contain the following properties:

  • componentName: Name of the component set in the Studio Layers panel
  • eventType: ‘video-progress-time’
  • experienceName: Name of the experience in Ceros
  • pageName: Page name (if configured) of the component 
  • pageNum: Page number of the component 
  • sdkPayload: SDK payload of the component (if set via SDK panel in Ceros Studio)
  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in Ceros Studio)
  • videoPosition: The start time (seconds) of this block of video consumption
  • videoPlayTime: The amount of seconds (~10s) the user was watching the video

Was this helpful?

You already voted!
1 out of 1 people found this helpful