OP.GG Extensions: leading provider of League of Legends analytics creates Summoner statistics…
OP.GG Extensions: leading provider of League of Legends analytics creates Summoner statistics overlay
With 10 million users per day watching content presented by 2.2 million streamers, Twitch is already huge with gamers and game companies. Now, the world’s most popular social video platform and community for video game culture is inviting developers to help it bring streaming to the next level. With Twitch Extensions, developers can unleash their creativity to help augment and enhance the Twitch experience. You can start developing Twitch Extensions here.
OP.GG is one of the best League of Legends stats platforms on the web, serving analytics to more than 27 million gamers around the world. With its new player statistic overlay for Twitch, OP.GG has just found a better way to deliver player data. It will now surface a summoner’s data during that player’s LoL broadcasts, adding analytic depth to the game streaming experience.
The player statistics overlay finds new ways to get important League of Legends data out in front of the people who want it, when they want it. Right now, in order to find summoner data viewers must open a second browser, go to a LoL stats site, and enter the summoner’s ID — but this is cumbersome. Twitch Extensions allows OP.GG to deliver its data without this unnecessary friction. Once users have the data in front of them, they can also decide how they want to use it. For instance, Twitch viewers can use OP.GG’s overlay to bring up champion matchups during the game for additional context.
Acquiring the Eye of the Watchers
OP.GG provides one of the simplest business cases for using Twitch Extensions. OP.GG is a content provider in the same way as a movie studio. And like a movie studio, its content is only valuable if that content gets out in front of the people who want to see it. Currently, OP.GG mainly delivers LoL data through a website. In order to grow, it must look for new and better ways to deliver its content to the eyes of watchers, while also removing any blockers that keep watchers away from this data.
This is where Twitch Extensions comes in, providing a frictionless way to reach new eyeballs. If, as a developer, you are sitting on valuable content and are looking for better ways to get it out to a captive audience, you may want to follow OP.GG’s successful strategy and build an overlay-based Extension.
“We are excited to bring our advanced analytics to the future of video game streaming content.” — Sangrak Choi, CTO, OP.GG
How Hard Is It to Build an Overlay?
Under the covers, OP.GG is connecting its data to a summoner’s ID on Twitch. Understanding how it does so is a good way to start developing your own Twitch Extension. The important take-away here is that once you understand the design of the Twitch API, building Extensions is not difficult. You can leverage many of the web skills you already have.
OP.GG’s developers used Twitch EBS for their PubSub system between summoner and follower. A project called OP.GG Twitch Extension Backend was created to hold temporary summoner data during streaming. Meanwhile, the full data driving the overlay comes from the OP.GG database.
Using standard web-based technologies, the Extension goes through the following stages as the broadcaster sets his summoner profile:
First, the summoner’s information is cached on the OP.GG Twitch Extension Backend.
Next, when a viewer connects to the player’s Twitch broadcast, this summoner information is retrieved from OP.GG Twitch Extension Backend.
Finally, when the viewer clicks the Extension button, the summoner information is requested from OP.GG’s in-game data using the JSONP protocol.
This data is inserted into the overlay using JavaScript.
OP.GG’s coders found developing on the Twitch Extensions platform to be very flexible. Because the technical foundation is a sandbox iframe that can use AJAX, anything that can be rendered using HTML and JavaScript can ultimately be turned into a Twitch Extension. All you have to do is add data.
What Else Can Be Done with an Overlay?
Having wrapped up its first Twitch Extension, OP.GG is already looking at other opportunities to integrate their data with Twitch streams. Besides adding more metrics and features to its current overlay, OP.GG is considering building an additional Extension for League of Legends to show in-game demonstrations. OP.GG would also like to form partnerships with other companies like Riot Games and Bluehole to provide team statistics and information about in-game items such as guns and vehicles.
Twitch Extensions is changing how we watch game broadcasts by placing valuable contextual data at the viewer’s fingertips, transforming a mostly passive experience into an interactive one. Wouldn’t you like to play a role in helping to shape this change? Get started today and learn more about Twitch Extensions by exploring the documentation.