Track audience of Caast Shorts

Shorts Card or Shorts Story is a great way to promote products and offers on your website. In order to measure the impact, you may want to implement your own tracking of the collection audience

Explaination of the events

When using Caast Shorts Carousel, Caast expose 3 useful events in order to properly measure your audience. We will explained the events in the logical order

onCollectionInView

The onCollectionInView event is emitted when Caast Shorts Carousel appear in the user screen, regarding the position you have configured, so it may not be emitted until the user has scrolled to it.

This event will give you usefull data in order to know what just happened, this data is:

collectionId: "d7df2370e4114bcc979bf09782ff0cd2",
collection: {
  "id": "d7df2370e4114bcc979bf09782ff0cd2",
  "attributes": {
    ...
  }
}

The collectionId key is as you can suppose, the ID of the collection configured to show on your page. The collection key contains extra useful informations regarding the collection.

info

This event will only be emitted one time.

onCollectionOpen

The onCollectionOpen event is emitted when one of the Caast Shorts Carousel's item is clicked. This event will give you useful data in order to know what just happened, this data is:

collectionId: "d7df2370e4114bcc979bf09782ff0cd2",
collection: {
  "id": "d7df2370e4114bcc979bf09782ff0cd2",
  "attributes": {
    ...
  }
},
content: {"id":"1f021ec4dbcb4180a0a57e070e15c29f", "attributes": {"name": "Content 1" ...}}
contentId:"1f021ec4dbcb4180a0a57e070e15c29f",
collectionItems: [
  {"id": "1f021ec4dbcb4180a0a57e070e15c29f", "attributes": {"name": "Content 1" ...}},
  {"id": "3596d04d68fb4a25a7c3caea8abcc3a3", "attributes": {"name": "Content 2" ...}}
]

The contentId key is the ID of the clicked content. The collectionItems key contain all the data of the displayed elements inside your collection.

You may need extra data based upon the contentId key, you can found out informations from the content key. For example if you want the name of the content you can apply this code:

var contentName = content.attributes.name;

An other interesting example would be to know the position of the clicked element. To achieve this, you can apply this code:

var contentPosition = collectionItems.map((e) => e.id).indexOf(contentId);
if (contentPosition > -1) {
  /**
   *  We add +1 because indexOf() start at 0
   **/
  console.log('contentPosition is ' + contentPosition + 1);
}

onCollectionContentChange

The onCollectionContentChange event is emitted when Caast collection item is swiped, clicked or have finished playing.

This event contains the same key as explained before but also contains two more insteresting data:

collectionCurrentContentId: "1f021ec4dbcb4180a0a57e070e15c29f",
collectionNextContentId: "3596d04d68fb4a25a7c3caea8abcc3a3",
player: {
  seconds: 12,
  duration: 36
}

The collectionCurrentContentId key is the ID of the content that was being watched, the collectionNextContentId key is the next media which will start to play.

You may want to know if the media that was being watched was usefull for you user and you can easily measure how much of the displayed media have been watched. To achieve this, you can apply this code:

var watchedPourcentage = ((100 * player.seconds) / player.duration).toString()+'%;
console.log('User have watched ' + watchedPourcentage + ' of the content ' + collectionCurrentContentId);

Concrete example

Lets setup a real life example, we assume you already know how to listen an event, if not, follow this tutorial:

📄️ Listen to Caast Events

If you want to implement custom analytics or override some Caast behaviour, you may want to start listening to our emitted events. Caast emits a lots of useful events that you may use, the complete list of events is available here.

In this example we will setup every needed variable in order to implement tracking on your side, you will just have to register the needed data with one of your favorite tracking solution.

document.addEventListener('caast.onLoaded', function (response) {
  if (!response.detail.preload && typeof window.caast !== 'undefined') {
    window.caast.on('all', function (response) {
      /**
       *  Caast event name
       * */
      var eventName = response.type;

      /**
       *  Caast event data
       * */
      var eventData = response.data;

      /**
       *  Caast allowed events
       * */
      var allowed_events = ['onCollectionInView', 'onCollectionOpen', 'onCollectionContentChange'];

      if (allowed_events.indexOf(eventName) > -1) {
        if (eventName === 'onCollectionInView') {
          var collectionId = eventData.collectionId;
          console.log('User have seen collection with ID:' + collectionId);
        } else if (eventName === 'onCollectionOpen') {
          var collectionId = eventData.collectionId;
          var content = eventData.content;
          var contentId = eventData.contentId;
          var contentPosition = eventData.collectionItems.map((e) => e.id).indexOf(contentId);
          console.log('User have open collection with ID:' + collectionId);
          console.log('User have clicked on content with ID:' + contentId);
          if (contentPosition > -1) {
            console.log('The clicked content position is number ' + contentPosition + 1);
          }
          if (content) {
            console.log('The clicked content name is ' + content.attributes.name);
          }
        } else if (eventName === 'onCollectionContentChange') {
          var collectionId = eventData.collectionId;
          var collectionPlayer = eventData.player;
          var collectionCurrentContentWatchedPourcentage = ((100 * collectionPlayer.seconds) / collectionPlayer.duration).toString() + '%';
          var collectionCurrentContentId = eventData.collectionCurrentContentId;
          var collectionNextContentId = eventData.collectionNextContentId;
          var collectionCurrentContentMatching = eventData.collectionItems.find((content) => content.id === collectionCurrentContentId);
          var collectionNextContentMatching = eventData.collectionItems.find((content) => content.id === collectionNextContentId);

          console.log('User have changed content of collection with ID:' + collectionId);
          console.log('User have finished watching content with ID:' + collectionCurrentContentId);
          console.log('User have watched ' + collectionCurrentContentWatchedPourcentage + ' of the content');
          if (collectionCurrentContentMatching) {
            console.log('The finished content name is ' + collectionCurrentContentMatching.attributes.name);
          }
          console.log('User will watch content with ID:' + collectionNextContentId);
          if (collectionNextContentMatching) {
            console.log('The next content name is ' + collectionNextContentMatching.attributes.name);
          }
        }
      }
    });
  }
});