Grappling with Google Analytics for live streams

Google analytics.

In this article, I want to share my experience with video streaming for one of our projects Yourcast.tv. You could find more about this project here:

Image.

At Yourcast.tv we restream YouTube content in playlists. We wondered what is the average video playtime and what videos are most popular?

In our last major experience with Google Analytics, we were grappling with AdMob, advertising, and ROI. In a few words, we had to count the return of investment for mobile app advertising.

Suppose a user came from the ad, installed the app, made an order and in the case of success, we had to count how much it cost to acquire the user, and how much money user returned using our app.

For Yourscast.tv we wanted to know what videos in Livestream are popular, which stream is most watched and which has the longest playtime. That was our next challenge with Google Analytics.

Solving the challenge

Google Analytics side

The Google Analytics part involved the addition of variables in ‘Custom Dimensions’ and ‘Custom Metrics’ in order to receive the variable values from the streamer. We then used them to create additional variables in ‘Calculated Metrics’.

Screenshot from GA.

The technical side

In this part, there are two sides of the solution.

  1. Frontend part. We send data to Google analytics by an interval.
  2. Server side part. We need to send what video file is started to stream

On the frontend, the idea is to send data to Google analytics periodically with constant interval while a user is watching video on the website.

We need to send event. We decided to send these values:

  1. Stream slug as event category
  2. progress as an event action
  3. dimension2 is id of our custom dimension
  4. metric3 is our id for custom metric

Working code:

On the streamer, we need to know what video was most popular on our custom live stream and only streamer knows which video is broadcasting now.

In my opinion, the best way to send data from the backend is repeated frontend request with your data. I opened network tab in ‘Developer Console’ and after some tries, I found that we need to send these data values to google analytics:

  1. “v” = 1
  2. cid — client uuid
  3. t = “event”
  4. ec — event category
  5. el — event label
  6. tid- your google analytics tracking id

Final result

Once we configured the streamer and added the variables, we started receiving additional data from our streams. With this data, we created several custom reports showing top channels by users and average user playtime.

Screenshot from GA.

As a result, we know what is preferred by Yourcast.tv users, and how to further improve the streamer content.

Screenshot from GA.

PS: Yourcast.tv is an open source project and available here https://github.com/maddevsio/yourcast.tv, without this feature.

Sharing your expertise is almost as important as gaining this expertise. Anastasia Rostova (Raspopina) in her article shares her knowledge on how to become a techn blogger.

Custom Software and Mobile App Development.
WebRTC.

What to choose to implement audio/video calls solution...

What to choose to implement...

What to choose to implement audio/video calls solution using WebRTC?

Mad Devs have been working with WebRTC since 2013. We have implemented several projects with video or audio calls enabled. That’s why I want to share...

Yellow Taxi Car.

How we built failover architecture for a taxi service...

How we built failover architecture...

How we built failover architecture for a taxi service part 1 (intro)

This article is the Part 1 of detailed description of my talk at HighLoad++ 2015.Today Namba Taxi is the leading passenger transportation company in...

Uber-like Map with Animated Cars.

How we built a backend system for Uber-like map with...

How we built a backend system for...

How we built a backend system for Uber-like map with animated cars using Go

Hello there. It’s my first blog post in English and I’m going to tell you how we built simple in-memory storage for animated cars. We show animated...