Counting Up to 1 Billion YouTube Views on “Sweet Child O’ Mine” for Guns N’ Roses

Building a Realtime YouTube Views API. Sorta.

1 BILLION

I was given another chance to help Guns N’ Roses drive awareness to an upcoming career milestone: hitting 1,000,000,000 views on “Sweet Child O’ Mine” on YouTube. The project pitch was simple enough: create a microsite which includes a YouTube views counter and encourages fans to watch and share the video. So I immediately thought… does YouTube even have a realtime views API? 🤔

My research led me to the YouTube Data API which has a Video list endpoint which can get you the public statistics on a YouTube video, including views. It would seem the views number available in this API also mirrors what is printed on the video’s page on YouTube. Sweet. Rather than have each client of my web app hit this API with the same key (and quickly hit API rate limits,) I decided to create a new AWS Lambda function that grabbed the views and dropped it into a JSON file on S3 which clients could access. I then created a rule in CloudWatch which would run the function every minute.

const axios = require('axios')
const AWS   = require('aws-sdk')
const s3    = new AWS.S3()
exports.handler = (event, context, callback) => {
  axios.get(`https://www.googleapis.com/youtube/v3/videos?part=statistics&id=${process.env.video}&key=${process.env.key}`)
  .then(response => {
    let newViews = response.data.items[0].statistics.viewCount
    
    s3.putObject({
      Bucket: process.env.bucket,
      Key: 'views.json',
      Body: JSON.stringify({
        views: newViews
      }),
      ContentType: "application/json"
    }, (error, response) => {
      if (error) {
        callback(null, {
          statusCode: 500,
          body: JSON.stringify({
            status: false
          })
        })
      } else {
        callback(null, {
          statusCode: 200,
          body: JSON.stringify({
            status: true
          })
        })
      }
    })
  })
}

Ok, great, but how often are the views updated for “Sweet Child O’ Mine?” I, unscientifically, used my phone’s stopwatch to uncover that views were updating every five minutes or so. Far from realtime. So while I could add the current count to our web app, it would only increment every 5 minutes. What I was really looking for was a counter which incremented naturally into the future based on the current rate of views.

So, I adjusted my Lambda function to also track the time of change. By simply storing the time in which YouTube last updated views, I was able to understand how much time had passed between changes. So, with an old views count, a new views count, and the time between changes, I should be able to figure out the rate fans viewed the video in the last 5 minutes.

let timeChange = Date.now() - lastUpdate
let viewRate   = (newViews - oldViews) / timeChange

This viewRate variable was also written to the S3 file containing the current views count. I could then use a setInterval method to update the view counter every second at the current incrementation rate.

setInterval(() => {
  views += rate * 1000
}, 1000)

Now the only drawback to this solution is that the current rate might be different than the actual rate and over tick the counter. However, the web app it setup to correct itself as soon as a concrete new view count number comes through. I think it’s all close enough for rock n’ roll. 🎸

The actual counter is powered by Anime.js which makes easy work of dynamically incrementing from one number to another by animating a JavaScript data object in a linear way.

let counter = {
  views: oldCount
}
anime({
  targets: counter,
  views: newCount,
  easing: 'linear',
  round: 1,
  duration: 1000,
  delay: 0,
  update: () => {
    let el = document.getElementsByClassName('views')[0]
    el.innerHTML = counter.views
  }
}

Put it all together and you get something like this.

Thanks again to Guns N’ Roses, Harold Gutierrez, and everyone at UMe for allowing me to develop a small app for this huge milestone. Where do we go now?