How-to build a match page

How-to build a match page

Welcome to our guide on how to build a match page! This guide will walk you through the process of building a match page using the Sportmonks Football API.

Introduction

Building a comprehensive match page for football games can greatly enhance the user experience of your sports application. The Sportmonks' Football API offers extensive data that allows you to create detailed and dynamic match pages, including events, statistics, live scores, lineups and many more. The Sportmonks' Football API provides all the data needed to create a rich match page experience.

Getting Started

  1. Sign Up for Sportmonks API: If you haven't already, sign up for the Sportmonks Football API and obtain your API key.
  2. Read the API Documentation: Read the Sportmonks Football API Documentation to familiarize yourself with the API endpoints and available data.


STEP 1: GATHER THE TOOLS

You are going to need the following tools:

  1. Sportmonks API token
  2. Code editor
  3. Postman or your browser

Our Developer Tools Guide includes a link to another article that discusses the tools in depth.

STEP 2: DECIDE WHICH EVENTS AND STATISTICS YOU WANT TO SHOW

At Sportmonks, we offer the following events:

  • Goal (as well as own goal, penalty)
  • Cards (Yellow card, Red card, Yellow/Red card)
  • Substitutions
  • VAR (Goal under review, Goal disallowed, Goal cancelled, Goal confirmed, Penalty disallowed, Penalty confirmed, VAR Card)
  • Penalty and Missed Penalty
  • Penalty Shootout Missed/Goal

For match statistics, think about anything that can happen during a match, such as the number of shots (on/off target), passes, attacks, fouls, corners, offsides, yellow/red cards, saves, substitutions, goal attempts, penalties, injuries, and many more.

Player statistics include all relevant statistics regarding a player, such as the number of goals scored, how many fouls he/she made, the number of cards received, passes, tackles, shots, etc.

Arsenal vs Liverpool

STEP 3: CHOOSE THE CORRECT ENDPOINT/INCLUDE

You can retrieve all the events mentioned above by adding the 'events' include to your API request.

Player and match statistics and events do not have endpoints but can be evoked by using includes instead.

  • Match statistics use the include statistics.type
  • Player statistics use the include lineups.details.type
  • Events use events.type

Since this is about a single match page with various events and stats, we will need the specific fixture ID. That’s why we’ll work with the fixtures by ID endpoint. It’s also possible to include both stats and lineups includes in the same request, but expect a lengthy response in that case.

Another nice feature to add is comparing the two teams’ past results against each other. This is often used to see how one team performs against another. This endpoint is called GET Fixture by Head To Head.


STEP 4: EXAMPLE BASIC REQUESTS

Next up is creating the request. For that, you will need the base URL of our API for a request regarding Football, which is https://api.sportmonks.com/v3/football/

Then, we need to specify the endpoint we would like to receive.

https://api.sportmonks.com/v3/football/fixtures/{ID}

If you add your API token by adding ?api_token=YOUR_TOKEN to your request, you are ready to send your request!

We will use the match between Arsenal and Liverpool on February 4th, 2024. So, this is how our request looks now:

https://api.sportmonks.com/v3/football/fixtures/18842501?api_token=YOUR_TOKEN

After that, we need to add the includes mentioned above. You can do that by adding &include=statistics.type;lineups.details to your request. This is how your request should look now:

https://api.sportmonks.com/v3/football/fixtures/18842501?api_token=YOUR_TOKEN&include=statistics.type;lineups.details

Beneath, you can see part of the example response.

STEP 5: EVALUATE THE RESPONSE

LINEUPS

First, we want to know what formation both teams used. Luckily, this information is included in the metadata include you can use on our fixtures/livescores endpoints. Before we fill in the formation, let us first explain formation positions. Players have different formation_positions. So, for example, one player has the player’s formation_position: 1, another has formation_position: 2, etc. Our API slots formations from right to left, meaning that the visitorteam_formation will look like the one down below.

Arsenal vs Liverpool lineups

HOW TO DISPLAY FORMATIONS

You can use the formation numbers in combination with the lineup formation to display formations.

Players have different formation_positions. So, for example, one player has the player’s formation_position: 1, another has formation_position: 2, etc. Formations are described using numbers that correspond to positions on the field, starting from defence (right to left), then midfield (right to left), and finally, attackers (right to left). For example, in a 4-3-3 formation, the goalkeeper will take number 1, and the defenders will take number 2, 3, 4, 5. Formation numbers 6, 7, and 8 represent the central midfielders. Self-evident, formation numbers 9, 10 and 11 are representing the attackers.

You can add the players to the grid according to their player formation. So, if you look at the example on the right-hand side, you will get the following formation numbers:

  1. Alisson
  2. Joe Gomez
  3. Virgil van Dijk
  4. Ibrahim Konaté
  5. Alexander-Arnold
  6. Curtis Jones
  7. Alexis Mac Allister
  8. Ryan Gravenberch
  9. Luis Díaz
  10. Diogo Jota
  11. Cody Gakpo


PLAYER STATISTICS

Here, we can see the detailed player statistics of the player named Cody Gakpo. Apart from standard player information, such as which team he belongs to and what his player ID or position is, we can see the total number of shots, goals, fouls, cards, passing, dribbles and duels. There’s also an ‘other’ tab with even more information, but we won’t go into detail for that one. Keep in mind this is only part of the response.

Let’s add one more part for detailed player statistics: ;lineups.details.type.

The API Request is as follows: https://api.sportmonks.com/v3/football/fixtures/18842501?api_token=YOUR_TOKEN&include=statistics.type;lineups.details.type


TEAM STATISTICS

As its name suggests, we can see the team statistics of the two teams. We can see the number of shots, passes, attacks, and plenty of other data for both teams. Keep in mind that this is only a part of the response.


MATCH EVENTS

You also want to show events on all match pages. Just add;events.type to see every event in the match.

Events show goals, cards, and substitutions and the exact minute at which this happened. So, we can see that there was a substitute in the 79th minute. Reiss Nelson came into the team, and Bukayo Saka left the pitch. Gabriel Martinelli scored the third goal of the match, resulting in a 2-1 lead for Arsenal in the 67th minute. He didn’t need an assist, as you can see by the related player name field being ‘null’. Last but not least, you can see Jakub Kiwior got a yellow card in the 69th minute.

https://api.sportmonks.com/v3/football/fixtures/18842501?api_token=YOUR_TOKEN&include=statistics.type;lineups.details.type; events.type


Conclusion

By following this guide, you can create a comprehensive match page using the Sportmonks Football API. This page will provide users with real-time updates, detailed match statistics, and an engaging user experience. For more detailed information on our API endpoints and data, refer to the Sportmonks Football API Documentation.

Happy coding!

要查看或添加评论,请登录

Sportmonks的更多文章

社区洞察

其他会员也浏览了