Adrian Javier
 · Pun Enthusiast

Universal Analytics

While the Studio provides a comprehensive view of how your content is performing through the Analytics dashboard, we understand that many Studio 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 the Studio.

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 Studio 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. Open your Studio account, in the left hand column under your account name, click the Settings button

  2. Click on the Integrations tab

  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 three dots in the lower right corner

  2. Hover over the manage tab and click integrations

  3. 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 Studio 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 Studio 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 Studio 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 Studio 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 Studio experience.   

Component Click Event

Each click by a user on the Studio 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in the Studio)

Component Hover Event

Each mouse-over by a user on the Studio 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the component (if set via SDK panel in the 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 the Studio

  • 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in the 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 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in the 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 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in the Studio)

Page View Event

This event is triggered each time a user views a page in a Studio 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the page  (if set via SDK panel in the 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 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in the 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 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in the 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 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 the Studio

  • 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 the Studio)

  • sdkTags: Array of SDK tags of the component  (if set via SDK panel in the Studio)

  • videoPosition: The start time (seconds) of this block of video consumption

  • videoPlayTime: The amount of seconds (~10s) the user was watching the video

1