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:

Open your Studio account, in the left-hand column under your account name, click the Settings button
Click on the Integrations tab
Toggle on Universal Analytics

To enable Universal Analytics for individual experiences:

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
Hover over the Manage tab and click Integrations
Toggle on ‘Universal Analytics’

Things to Note

After activating the Universal Analytics integration, the analytics platform you use might have some additional setup needed to properly listen for the Ceros events. Additionally, you will have the option to add tracking scripts from your third-party analytics tool and anything else you'd like to include (meta tags, etc.) to the <head> tag of your Studio experiences, this is primarily useful for standalone experiences.

The Published Experience Tracking Script will only need to be added to standalone experiences.

* You do not need to embed this script if you’re already embedding your Studio experience! The analytics tracking script will already be included on your webpage, therefore including this additional script 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 a tracking script 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.