YouTube API Codelab:
Web Application Example
This code is only interesting if you run it while authenticated as a YouTube user that has videos that have received views within the past month. Feel free to use your own YouTube account, but if you’d rather use a test account, try the following: firstname.lastname@example.org, password 1234test. That account contains videos that received views from 2012-06-13 to 2012-09-18.
An archive of the code broken down into separate lessons can be found at:
See discovery document at https://www.googleapis.com/discovery/v1/apis/youtube/v3/rpc and user documentation https://developers.google.com/youtube/v3/
Now that we have a valid OAuth 2 access token, we can use it to talk to the YouTube Data API and retrieve two pieces of information.
First, we retrieve the YouTube channel id and user id associated with the current authenticated user. The user id is needed later on when making requests to the YouTube Analytics API.
Next, we retrieve a list of YouTube video ids for all the uploads in the current authenticated user’s account, making use of the channel id we previously obtaining. We pass in this list of video ids into the YouTube API call to retrieve metadata about each video. Once we have that metadata, we can construct a list of those videos’ titles and add that list to the existing HTML on the page. Videos that have never received any views (because they are not active or because they were simply never watched) are excluded from the list. Eventually, clicking on any item in the list will retrieve analytics data for that video and display a chart, but for the time being, clicking on any item will just display the corresponding video id.
Instead of simply displaying the video id when clicking on a video list item as we previously did, we now want to make a call to the YouTube Analytics API to retrieve analytics data for that video when it is clicked.
There are a number of different types of reports that can be retrieved via the YouTube Analytics API. For the purposes of this example, we’ll be retrieving a report of the view counts aggregated by day and filtered by a single video id, over the course of the past month. If you decide to change the parameters passed in to the YouTube Analytics API call, make careful note of the combinations of supported parameters, since many types of metrics/dimensions combinations are invalid.
For the time being, we’ll simply display the raw response from the Analytics API on the web page.
If you don’t have any videos in your own YouTube account, you can authenticate with the credentials email@example.com/1234test. Please note that because immediate OAuth 2 is used, if you’ve previously authenticated as a different account then when you visit the same page the existing account will automatically be used. Since there’s currently no “Logout” link in the web application, the easiest way to switch authenticated accounts is to open an “Incognito” window in Google Chrome, or use a different web browser.
The specifics of using the Google Chart Tools API is a bit out of scope for this codelab, but the thrust of it is that we first determine the column titles from the analytics response, and then pass those along with the rows of data to the google.visualization.arrayToDataTable() method, which format the data in a way that can then be visualized. Fortunately, the data that’s returned in the analytics API response is in a very similar format to what the google.visualization.arrayToDataTable() method expects; the only massaging involves using the jQuery.map() method to create an array of column titles.
We’re now done with all the coding, and the last step is adding CSS definitions to improve the appearance of the user interface.
Now that you’ve worked through the lessons in the example, think about ways you can modify the existing code to provide a different experience. For instance, you can change the user interface (via HTML or CSS). Or you could change the YouTube Analytics report definition to something different, and/or creating a different chart is another way the example can be enhanced.