{"id":1252,"date":"2025-12-17T20:08:01","date_gmt":"2025-12-17T17:08:01","guid":{"rendered":"http:\/\/api-sport.pro\/?p=1252"},"modified":"2025-12-17T20:08:01","modified_gmt":"2025-12-17T17:08:01","slug":"como-incrustar-el-widget-de-analisis-xg-en-el-sitio-web","status":"publish","type":"post","link":"https:\/\/api-sport.pro\/es\/como-incrustar-el-widget-de-analisis-xg-en-el-sitio-web\/","title":{"rendered":"\u00bfC\u00f3mo incrustar el widget de an\u00e1lisis xG en el sitio web?"},"content":{"rendered":"<div class=\"table-of-contents\">\n<div class=\"table-of-contents-title\">Contenidos<\/div>\n<ul class=\"table-of-contents-ul\">\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-1\">\u00bfQu\u00e9 son las anal\u00edticas xG en el f\u00fatbol y por qu\u00e9 incrustar el widget xG en el sitio web?<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-2\">\u00bfQu\u00e9 datos proporciona la API de eventos deportivos para las anal\u00edticas xG?<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-3\">Requisitos para el sitio web y claves de acceso para conectarse a la API xG.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-4\">Gu\u00eda paso a paso: c\u00f3mo incrustar el widget de anal\u00edticas xG en el sitio web a trav\u00e9s de la API.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-5\">Ejemplos de solicitudes de API y c\u00f3digo para mostrar el widget xG en la p\u00e1gina.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-6\">Personalizando el dise\u00f1o y los par\u00e1metros del widget de anal\u00edticas xG para su sitio web.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-7\">Limitaciones, velocidad de actualizaci\u00f3n y costo de uso de la API xG.<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-1\">\u00bfQu\u00e9 son las anal\u00edticas xG en el f\u00fatbol y por qu\u00e9 incrustar el widget xG en el sitio web?<\/h2>\n<p>xG (goles esperados) es una m\u00e9trica que muestra cu\u00e1ntos momentos peligrosos cre\u00f3 un equipo y cu\u00e1ntos goles deber\u00eda marcar en funci\u00f3n de la calidad de los disparos, en lugar del marcador real. <em>deber\u00eda haber<\/em> El c\u00e1lculo tiene en cuenta el tipo de disparo, la distancia a la porter\u00eda, el \u00e1ngulo, la posici\u00f3n de los defensores, el tipo de pase y muchos otros factores. Como resultado, xG describe la ventaja real del juego mucho mejor que un marcador de 1:0 o 2:2 en el tablero.<\/p>\n<p>El widget xG incrustable hace que cualquier sitio web de f\u00fatbol sea notablemente m\u00e1s profesional. El usuario ve no solo los n\u00fameros de posesi\u00f3n y disparos, sino tambi\u00e9n un gr\u00e1fico visual de goles esperados a lo largo del partido, comparaci\u00f3n del xG del equipo y distribuci\u00f3n de la calidad de los momentos. Este enfoque es utilizado por los principales medios deportivos y plataformas anal\u00edticas para explicar con m\u00e1s profundidad, <strong>por qu\u00e9<\/strong> el equipo gan\u00f3 o perdi\u00f3.<\/p>\n<p>Al conectar datos a trav\u00e9s de la API de eventos deportivos, por ejemplo, desde el servicio <a href=\"http:\/\/api-sport.pro\/es\/\">API-sport para desarrolladores y empresas<\/a>, puede construir autom\u00e1ticamente sus widgets xG para cualquier partido: desde ligas principales hasta torneos locales. Esto permite:<\/p>\n<ul>\n<li>aumentar la participaci\u00f3n de la audiencia a trav\u00e9s de anal\u00edticas m\u00e1s profundas;<\/li>\n<li>aumentar el tiempo en el sitio y la profundidad de las vistas de la p\u00e1gina del partido;<\/li>\n<li>apoyar contenido para predicciones y apuestas basadas en m\u00e9tricas objetivas;<\/li>\n<li>fortalecer la marca del sitio al demostrar un enfoque experto en estad\u00edsticas.<\/li>\n<\/ul>\n<p>A diferencia de las im\u00e1genes est\u00e1ticas, el widget xG basado en la API puede actualizarse casi en tiempo real, adaptarse al dise\u00f1o del sitio y escalar f\u00e1cilmente a cientos de partidos simult\u00e1neamente. En este art\u00edculo, discutiremos qu\u00e9 datos se necesitan para xG, c\u00f3mo obtenerlos a trav\u00e9s de la API y c\u00f3mo integrar paso a paso su propio widget en el sitio.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-2\">\u00bfQu\u00e9 datos proporciona la API de eventos deportivos para las anal\u00edticas xG?<\/h2>\n<p>El modelo xG cl\u00e1sico se basa en informaci\u00f3n detallada sobre los tiros a puerta y episodios del juego. En la API para eventos de f\u00fatbol, disponible a trav\u00e9s de la ruta base <code>\/v2\/f\u00fatbol\/<\/code> en el dominio <code>2. api.api-sport.ru<\/code>, ya hay una cantidad significativa de estad\u00edsticas que se pueden utilizar como base para an\u00e1lisis xG simplificados o extendidos.<\/p>\n<p>En primer lugar, los endpoints <code>\/v2\/f\u00fatbol\/partidos<\/code> \u0438 <code>\/v2\/f\u00fatbol\/partidos\/{matchId}<\/code> devuelven un objeto <code>estad\u00edsticasDelPartido<\/code>. Agrupa m\u00e9tricas clave por per\u00edodos de partido (TODOS, 1RA, 2DA): <strong>totalDisparosALaPorter\u00eda<\/strong>, <strong>disparosALaPorter\u00eda<\/strong>, <strong>totalDisparosDentroDel\u00c1rea<\/strong>, <strong>totalTirosFueraDel\u00c1rea<\/strong>, <strong>granOportunidadCreada<\/strong>, <strong>granOportunidadMarcada<\/strong>, <strong>granOportunidadFallada<\/strong>, as\u00ed como par\u00e1metros adicionales para ataques, tiros, duelos, etc. Estos indicadores permiten evaluar la calidad de las oportunidades creadas incluso sin las coordenadas cuadro por cuadro de cada tiro.<\/p>\n<p>En segundo lugar, a trav\u00e9s de <code>\/v2\/f\u00fatbol\/partidos\/{matchId}\/eventos<\/code> obtienes una cronolog\u00eda de episodios clave del juego: goles, penales, tarjetas, sustituciones y otros eventos. Al correlacionar eventos con estad\u00edsticas agregadas, es posible construir l\u00edneas de tiempo xG y mostrar en qu\u00e9 segmentos del partido el equipo cre\u00f3 las oportunidades m\u00e1s peligrosas.<\/p>\n<p>Para proyectos avanzados, los datos del partido se pueden combinar con informaci\u00f3n sobre torneos, equipos y jugadores disponibles en las secciones <code>\/v2\/f\u00fatbol\/equipos<\/code>, <code>\/v2\/f\u00fatbol\/jugadores<\/code>, as\u00ed como utilizar las cuotas de los bookmakers del campo <code>oddsBase<\/code> del partido. La combinaci\u00f3n de an\u00e1lisis xG y datos de apuestas permite construir modelos m\u00e1s precisos del valor de las cuotas y crear productos \u00fanicos en la intersecci\u00f3n de estad\u00edsticas y apuestas.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-3\">Requisitos para el sitio web y claves de acceso para conectarse a la API xG.<\/h2>\n<p>Para incrustar el widget xG basado en datos de la API, tu sitio no requiere ninguna infraestructura especial. Cualquier motor moderno (WordPress, soluci\u00f3n personalizada en PHP\/Node.js, frameworks como Laravel o Django) ser\u00e1 suficiente, siempre que puedas agregar tu propio JavaScript y hacer solicitudes HTTP a la API externa desde el servidor.<\/p>\n<p>Es importante se\u00f1alar que la autorizaci\u00f3n en la API de Eventos Deportivos ocurre a trav\u00e9s del encabezado <code>Autorizaci\u00f3n<\/code> con tu clave API. Por razones de seguridad, no se recomienda codificar la clave directamente en JavaScript del lado del cliente, ya que puede verse en el c\u00f3digo fuente de la p\u00e1gina. Es m\u00e1s confiable organizar un proxy backend simple: el frontend llama a tu servidor, y el servidor llama a la API <code>https:\/\/api.api-sport.ru<\/code>, a\u00f1adiendo el encabezado de autorizaci\u00f3n.<\/p>\n<p>Puedes obtener una clave personal en <a href=\"https:\/\/app.api-sport.ru\">la cuenta personal de API-SPORT<\/a>. Despu\u00e9s de registrarte y seleccionar un plan, ver\u00e1s el valor de la clave API y podr\u00e1s usarla en los encabezados de las solicitudes. Un modo de prueba o un plan limitado suele estar disponible para el desarrollo: esto es suficiente para depurar el widget, configurar la cach\u00e9 y verificar la carga en el sitio durante solicitudes masivas.<\/p>\n<p>Desde la perspectiva del frontend, es recomendable asegurar el soporte HTTPS, el correcto funcionamiento de CORS (si est\u00e1s haciendo solicitudes directas desde el navegador) y configurar la cach\u00e9 de respuestas de API en tu servidor. La cach\u00e9 puede establecerse por al menos 15\u201360 segundos para el modo en vivo para reducir el n\u00famero de solicitudes y acelerar la carga del widget xG en la p\u00e1gina.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-4\">Gu\u00eda paso a paso: c\u00f3mo incrustar el widget de anal\u00edticas xG en el sitio web a trav\u00e9s de la API.<\/h2>\n<p>La integraci\u00f3n del widget xG se puede desglosar c\u00f3modamente en varios pasos l\u00f3gicos. Primero, determinas en qu\u00e9 p\u00e1ginas y en qu\u00e9 formato deseas mostrar xG: puede ser un bloque en la tarjeta del partido, una secci\u00f3n separada \u00abAn\u00e1lisis Avanzado\u00bb o una inserci\u00f3n en el material que analiza el juego. En esta etapa, piensas en el tipo de visualizaci\u00f3n: total xG por equipos, gr\u00e1fico de xG por minutos o una opci\u00f3n combinada.<\/p>\n<p>A continuaci\u00f3n, necesitas obtener el ID del partido para las solicitudes de API. Se puede tomar de la base de datos interna, de la respuesta del endpoint <code>\/v2\/f\u00fatbol\/partidos?fecha=YYYY-MM-DD<\/code> o de la integraci\u00f3n con otro de tus m\u00f3dulos (por ejemplo, la l\u00ednea de apuestas o el calendario de transmisiones). Sabiendo <code>idPartido<\/code>, solicitas detalles del partido a trav\u00e9s de <code>\/v2\/f\u00fatbol\/partidos\/{matchId}<\/code> y, si es necesario, eventos a trav\u00e9s de <code>\/v2\/f\u00fatbol\/partidos\/{matchId}\/eventos<\/code>.<\/p>\n<p>En el lado del servidor, implementas la funci\u00f3n de c\u00e1lculo de xG. En el caso m\u00e1s simple, puedes usar estad\u00edsticas agregadas: asignar pesos para tiros desde dentro y fuera del \u00e1rea penal, para grandes oportunidades, para penales. Una f\u00f3rmula simplificada puede servir como punto de partida, y puede ser refinada a medida que se acumulan datos. El resultado del c\u00e1lculo son valores num\u00e9ricos de xG para cada equipo y, opcionalmente, un array de puntos para el gr\u00e1fico de tiempo.<\/p>\n<p>El paso final es renderizar el widget en el frontend. El servidor devuelve un JSON con valores de xG pre-calculados a la p\u00e1gina, y el c\u00f3digo JavaScript construye gr\u00e1ficos (barras, l\u00edneas, \u00abbarra de progreso\u00bb, etc.) en el estilo deseado basado en ello. Esta divisi\u00f3n de responsabilidades te permite mantener la clave API segura mientras gestionas de manera flexible la l\u00f3gica y el dise\u00f1o de la anal\u00edtica xG.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-5\">Ejemplos de solicitudes de API y c\u00f3digo para mostrar el widget xG en la p\u00e1gina.<\/h2>\n<p>A continuaci\u00f3n se muestra un ejemplo simplificado de la integraci\u00f3n: una solicitud a la API de Eventos Deportivos, extrayendo estad\u00edsticas y calculando xG en el servidor o frontend. Primero, obtendremos informaci\u00f3n detallada sobre un partido espec\u00edfico por su ID. El ejemplo utiliza JavaScript con una solicitud a trav\u00e9s de <code>obtener<\/code>. En un proyecto real, es mejor colocar un c\u00f3digo similar en el servidor.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\nfetch('https:\/\/api.api-sport.ru\/v2\/football\/matches\/14570728', {\n  headers: {\n    'Authorization': 'YOUR_API_KEY'\n  }\n})\n  .then(response =&gt; response.json())\n  .then(match =&gt; {\n    const statsAll = match.matchStatistics.find(s =&gt; s.period === 'ALL');\n    const shotsGroup = statsAll.groups.find(g =&gt; g.groupName === 'Shots');\n    const insideBox = shotsGroup.statisticsItems.find(i =&gt; i.key === 'totalShotsInsideBox').homeValue;\n    const outsideBox = shotsGroup.statisticsItems.find(i =&gt; i.key === 'totalShotsOutsideBox').homeValue;\n    const bigChances = statsAll.groups\n      .find(g =&gt; g.groupName === 'Attack')\n      .statisticsItems.find(i =&gt; i.key === 'bigChanceCreated').homeValue;\n    \/\/ \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 xG \u0434\u043b\u044f \u0445\u043e\u0437\u044f\u0435\u0432\n    const xgHome = insideBox * 0.15 + outsideBox * 0.05 + bigChances * 0.35;\n    console.log('xG \u0434\u043e\u043c\u0430\u0448\u043d\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:', xgHome.toFixed(2));\n  })\n  .catch(console.error);\n<\/pre>\n<p>Este es solo un ejemplo de demostraci\u00f3n: los pesos (0.15, 0.05, 0.35) se dan solo para ilustraci\u00f3n y no son un modelo de producci\u00f3n listo. En una soluci\u00f3n en vivo, puedes usar una f\u00f3rmula de xG m\u00e1s compleja que tenga en cuenta par\u00e1metros adicionales de <code>estad\u00edsticasDelPartido<\/code> y eventos del partido. Es importante que la API ya proporcione datos estructurados que puedan ser procesados f\u00e1cilmente de manera program\u00e1tica.<\/p>\n<p>Despu\u00e9s de calcular xG en el backend, es conveniente enviar solo JSON limpio con el resultado al frontend. Aqu\u00ed hay un ejemplo de un proxy PHP simple que obtiene datos del partido de la API, calcula xG y lo devuelve en un formato listo para renderizar en el widget:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\" data-no-translation=\"\">\n&amp;lt;?php\n$matchId = (int)($_GET&#x5B;'matchId'] ?? 0);\n$apiKey  = 'YOUR_API_KEY';\n$ch = curl_init('https:\/\/api.api-sport.ru\/v2\/football\/matches\/' . $matchId);\ncurl_setopt_array($ch, &#x5B;\n    CURLOPT_RETURNTRANSFER =&gt; true,\n    CURLOPT_HTTPHEADER     =&gt; &#x5B;\n        'Authorization: ' . $apiKey,\n    ],\n]);\n$response = curl_exec($ch);\ncurl_close($ch);\n$match = json_decode($response, true);\n$statsAll = null;\nforeach ($match&#x5B;'matchStatistics'] as $periodStats) {\n    if ($periodStats&#x5B;'period'] === 'ALL') {\n        $statsAll = $periodStats;\n        break;\n    }\n}\n$shotsGroup = array_values(array_filter($statsAll&#x5B;'groups'], fn($g) =&gt; $g&#x5B;'groupName'] === 'Shots'))&#x5B;0];\n$attackGroup = array_values(array_filter($statsAll&#x5B;'groups'], fn($g) =&gt; $g&#x5B;'groupName'] === 'Attack'))&#x5B;0];\n$findItem = function($items, $key) {\n    foreach ($items as $item) {\n        if ($item&#x5B;'key'] === $key) return $item;\n    }\n    return null;\n};\n$insideHome = $findItem($shotsGroup&#x5B;'statisticsItems'], 'totalShotsInsideBox')&#x5B;'homeValue'] ?? 0;\n$outsideHome = $findItem($shotsGroup&#x5B;'statisticsItems'], 'totalShotsOutsideBox')&#x5B;'homeValue'] ?? 0;\n$bigHome = $findItem($attackGroup&#x5B;'statisticsItems'], 'bigChanceCreated')&#x5B;'homeValue'] ?? 0;\n$xgHome = $insideHome * 0.15 + $outsideHome * 0.05 + $bigHome * 0.35;\nheader('Content-Type: application\/json; charset=utf-8');\necho json_encode(&#x5B;\n    'matchId' =&gt; $matchId,\n    'xg'      =&gt; &#x5B;\n        'home' =&gt; round($xgHome, 2),\n    ],\n]);\n&#x5B;\/php]\n&lt;p&gt;\u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u2011\u0447\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 JSON \u0438 \u0441\u0442\u0440\u043e\u0438\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0432\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u043a\u0430\u043b\u044b xG \u0434\u043b\u044f \u0445\u043e\u0437\u044f\u0435\u0432 \u0438 \u0433\u043e\u0441\u0442\u0435\u0439 \u0438\u043b\u0438 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u0441\u044f \u0442\u044f\u0436\u0435\u043b\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a API \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u0434 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043b\u0435\u0433\u043a\u0438\u043c \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u043c.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=&quot;universal_article&quot;&gt;\n&lt;h2 id=&quot;contents-6&quot;&gt;\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 xG\u2011\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u043f\u043e\u0434 \u0432\u0430\u0448 \u0441\u0430\u0439\u0442&lt;\/h2&gt;\n&lt;p&gt;\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b xG\u2011\u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0433\u043e\u0442\u043e\u0432, \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0434 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0431\u043e\u0440\u0430 CSS\u2011\u043f\u0440\u0430\u0432\u0438\u043b \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 JavaScript. \u0412\u0438\u0434\u0436\u0435\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0431\u0449\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435 \u0436\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0440\u0430\u0434\u0438\u0443\u0441 \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0447\u0442\u043e \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0430\u0439\u0442\u0430.&lt;\/p&gt;\n&lt;p&gt;\u041e\u0434\u0438\u043d \u0438\u0437 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u2014 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a: \u0432\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0435 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u0434\u043e\u043c\u0430\u0448\u043d\u0435\u0439 \u0438 \u0433\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0444\u043e\u043d, \u0442\u0438\u043f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b (\u0441\u0442\u043e\u043b\u0431\u0446\u044b, \u043b\u0438\u043d\u0438\u0438, \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u2011\u0431\u0430\u0440), \u0430 \u0442\u0430\u043a\u0436\u0435 \u044f\u0437\u044b\u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u042d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0431\u0430\u0437\u0435 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0438 \u0438\u0437 \u0430\u0434\u043c\u0438\u043d\u2011\u043f\u0430\u043d\u0435\u043b\u0438. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 CSS\u2011\u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f xG\u2011\u0431\u043b\u043e\u043a\u0430.&lt;\/p&gt;\n&#x5B;code lang=&quot;css&quot;]\n.xg-widget {\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  background: #0b1020;\n  color: #ffffff;\n  border-radius: 12px;\n  padding: 16px 20px;\n}\n.xg-widget__bar {\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.xg-widget__bar-label {\n  width: 80px;\n  font-size: 13px;\n}\n.xg-widget__bar-track {\n  flex: 1;\n  height: 8px;\n  background: rgba(255, 255, 255, 0.08);\n  border-radius: 999px;\n  overflow: hidden;\n}\n.xg-widget__bar-fill--home {\n  height: 100%;\n  background: #1dd1a1;\n}\n.xg-widget__bar-fill--away {\n  height: 100%;\n  background: #ff9f43;\n}\n<\/pre>\n<p>En el lado de JavaScript, simplemente estableces el ancho <code>.xg-widget__bar-fill--local<\/code> \u0438 <code>.xg-widget__bar-fill--fuera<\/code> proporcional a los valores xG calculados. As\u00ed, obtienes un widget ordenado, f\u00e1cilmente legible y completamente personalizado. Si es necesario, se puede agregar un dise\u00f1o adaptativo para que en dispositivos m\u00f3viles los gr\u00e1ficos se apilen en una columna o se simplifiquen a cifras clave.<\/p>\n<p>Si planeas usar an\u00e1lisis xG no solo para f\u00fatbol, sino tambi\u00e9n para otros deportes soportados por <a href=\"http:\/\/api-sport.pro\/es\/\">la plataforma API-SPORT.<\/a>, tiene sentido extraer estilos y componentes comunes en una biblioteca separada. Luego, agregar nuevos widgets \u2014por ejemplo, para lanzamientos de baloncesto o momentos peligrosos en hockey\u2014 requerir\u00e1 cambios m\u00ednimos en el c\u00f3digo y no interrumpir\u00e1 la integridad visual del proyecto.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-7\">Limitaciones, velocidad de actualizaci\u00f3n y costo de uso de la API xG.<\/h2>\n<p>Cualquier integraci\u00f3n basada en una API externa debe tener en cuenta limitaciones t\u00e9cnicas y comerciales. En el caso del widget xG, esto incluye principalmente l\u00edmites en el n\u00famero de solicitudes por unidad de tiempo, restricciones generales de tr\u00e1fico y almacenamiento en cach\u00e9 razonable. Al dise\u00f1ar la arquitectura, vale la pena calcular cu\u00e1ntos partidos estar\u00e1s sirviendo simult\u00e1neamente, con qu\u00e9 frecuencia actualizar los datos (por ejemplo, cada 15-30 segundos en modo en vivo) y qu\u00e9 volumen de estad\u00edsticas se necesita para cada solicitud.<\/p>\n<p>En t\u00e9rminos de velocidad de actualizaci\u00f3n, la API de Eventos Deportivos est\u00e1 orientada hacia un modo cercano al tiempo real: nuevos eventos y estad\u00edsticas aparecen muy r\u00e1pidamente despu\u00e9s de que realmente ocurren en el partido. Para la mayor\u00eda de los sitios web, esto es m\u00e1s que suficiente, especialmente al usar almacenamiento en cach\u00e9 del lado del servidor. Adem\u00e1s, el equipo de servicio est\u00e1 desarrollando la infraestructura: se planea soporte para conexiones WebSocket en un futuro cercano, lo que permitir\u00e1 recibir actualizaciones sin solicitudes HTTP constantes y hacer que los gr\u00e1ficos xG sean verdaderamente en streaming.<\/p>\n<p>El costo de uso depende de la tarifa elegida y el volumen de datos: los niveles suelen diferir por el n\u00famero de solicitudes, el conjunto de deportes disponibles y la profundidad de las estad\u00edsticas. Para proyectos peque\u00f1os, puedes comenzar con un plan b\u00e1sico y, a medida que la audiencia crezca, cambiar a uno m\u00e1s avanzado. Encontrar\u00e1s t\u00e9rminos detallados y capacidades actuales (incluidos m\u00f3dulos de IA desplegables para an\u00e1lisis inteligentes) en el sitio web. <a href=\"http:\/\/api-sport.pro\/es\/\">API-SPORT \u2014 API de deportes y apuestas<\/a>.<\/p>\n<p>Se debe prestar especial atenci\u00f3n a la integraci\u00f3n del widget xG con la API de cuotas de apuestas, disponible a trav\u00e9s del campo <code>oddsBase<\/code> en el objeto del partido. Al correlacionar la din\u00e1mica de xG con los cambios en las cuotas, puedes construir paneles de an\u00e1lisis \u00fanicos para apostadores y tipsters profesionales. Tal producto aumenta el valor de tu recurso y abre oportunidades adicionales de monetizaci\u00f3n a trav\u00e9s de programas de afiliados y suscripciones premium para estad\u00edsticas extendidas.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Content What is xG analytics in football and why embed the xG widget on the site What data does the sports events API provide for xG analytics Requirements for the site and access keys for connecting to the xG API Step-by-step instructions: how to embed the xG analytics widget on the site via API Examples of API requests and code for displaying the xG widget on the page Customizing the design and parameters of the widget [\u2026]<\/p>","protected":false},"author":1,"featured_media":1251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","faq":"[{\"question\":\"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 xG \u0438 \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d \u043d\u0430 \u0441\u043f\u043e\u0440\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435?\",\"answer\":\"xG (expected goals, \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0435 \u0433\u043e\u043b\u044b) \u2014 \u043c\u0435\u0442\u0440\u0438\u043a\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0433\u043e\u043b\u043e\u0432 \u043f\u043e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0435 \u0443\u0434\u0430\u0440\u043e\u0432. \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044f xG\u2011\u0432\u0438\u0434\u0436\u0435\u0442 \u043d\u0430 \u0441\u0430\u0439\u0442, \u0432\u044b \u0434\u0430\u0451\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438\u0433\u0440\u044b, \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0435 \u0432\u043e\u0432\u043b\u0435\u0447\u0451\u043d\u043d\u043e\u0441\u0442\u044c \u0438 \u0443\u0441\u0438\u043b\u0438\u0432\u0430\u0435\u0442\u0435 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u043e\u0432.\"},{\"question\":\"\u0414\u0430\u0451\u0442 \u043b\u0438 API api-sport.ru \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f xG?\",\"answer\":\"\u0412 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 Sport Events API \u043d\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c xG. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043c\u0430\u0442\u0447\u0430 \u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043f\u043e \u0443\u0434\u0430\u0440\u0430\u043c \u0438 \u043e\u043f\u0430\u0441\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043c (totalShotsInsideBox, totalShotsOutsideBox, bigChanceCreated \u0438 \u0434\u0440.). \u041d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c xG \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0435.\"},{\"question\":\"\u041d\u0443\u0436\u043d\u043e \u043b\u0438 \u043f\u043e\u0434 xG\u2011\u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440?\",\"answer\":\"\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d, \u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a API \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u044e\u0447\u0430, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c xG \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0441\u0430\u0439\u0442\u0430 \u0438\u043b\u0438 \u043b\u0451\u0433\u043a\u0438\u0439 \u043f\u0440\u043e\u043a\u0441\u0438\u2011\u0441\u043a\u0440\u0438\u043f\u0442 \u043d\u0430 PHP\/Node.js. \u0417\u0430\u043f\u0440\u043e\u0441\u044b \u043a API \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u0438\u0437-\u0437\u0430 \u0440\u0438\u0441\u043a\u0430 \u0443\u0442\u0435\u0447\u043a\u0438 API\u2011\u043a\u043b\u044e\u0447\u0430.\"},{\"question\":\"\u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c xG\u2011\u0432\u0438\u0434\u0436\u0435\u0442 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 live \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u0430\u0442\u0447\u0430?\",\"answer\":\"\u0414\u0430, Sport Events API \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u0430\u0442\u0447\u0435\u0439. \u041f\u0440\u0438 \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u043e\u0442\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437 \u0432 15\u201330 \u0441\u0435\u043a\u0443\u043d\u0434) \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c live\u2011\u0433\u0440\u0430\u0444\u0438\u043a\u0438 xG. \u0421 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c WebSocket\u2011\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u0443\u0442 \u0435\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u043c\u0438 \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 HTTP\u2011\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.\"},{\"question\":\"\u041a\u0430\u043a \u0441\u0432\u044f\u0437\u0430\u0442\u044c xG\u2011\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u0441 \u0431\u0443\u043a\u043c\u0435\u043a\u0435\u0440\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430\u043c\u0438?\",\"answer\":\"\u0412 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043c\u0430\u0442\u0447\u0430 Sport Events API \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 oddsBase \u0441 \u0440\u044b\u043d\u043a\u0430\u043c\u0438 \u0438 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u0441\u0442\u0430\u0432\u043e\u043a. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f xG \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c\u0438 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430, \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u0434\u043e\u043e\u0446\u0435\u043d\u0451\u043d\u043d\u044b\u0435 \u0438\u0441\u0445\u043e\u0434\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u0434\u043b\u044f \u0431\u0435\u0442\u0442\u043e\u0440\u043e\u0432.\"}]","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_head":"<title>How to embed the xG analytics widget on the website \u2014 API of sports events<\/title>\n<meta name=\"description\" content=\"Step by step, we will analyze how to embed the xG widget based on the sports events API on the website: what data is needed, how to calculate xG, and how to format the analytics to match your design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/api-sport.pro\/es\/como-incrustar-el-widget-de-analisis-xg-en-el-sitio-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to embed the xG analytics widget on the website \u2014 API of sports events\" \/>\n<meta property=\"og:description\" content=\"Step by step, we will analyze how to embed the xG widget based on the sports events API on the website: what data is needed, how to calculate xG, and how to format the analytics to match your design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/api-sport.pro\/es\/como-incrustar-el-widget-de-analisis-xg-en-el-sitio-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Sports Events API\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-17T17:08:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-vstroit-na-sait-vidzhet-xg-analitiki_posts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1376\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/\",\"url\":\"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/\",\"name\":\"How to embed the xG analytics widget on the website \u2014 API of sports events\",\"isPartOf\":{\"@id\":\"https:\/\/api-sport.pro\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-vstroit-na-sait-vidzhet-xg-analitiki_posts.jpg\",\"datePublished\":\"2025-12-17T17:08:01+00:00\",\"author\":{\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601\"},\"description\":\"Step by step, we will analyze how to embed the xG widget based on the sports events API on the website: what data is needed, how to calculate xG, and how to format the analytics to match your design.\",\"breadcrumb\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#primaryimage\",\"url\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-vstroit-na-sait-vidzhet-xg-analitiki_posts.jpg\",\"contentUrl\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-vstroit-na-sait-vidzhet-xg-analitiki_posts.jpg\",\"width\":1376,\"height\":768,\"caption\":\"\u041a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 xG-\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/api-sport.pro\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to embed the xG analytics widget on the website?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/api-sport.pro\/#website\",\"url\":\"https:\/\/api-sport.pro\/\",\"name\":\"Sports Events API\",\"description\":\"Sports Events API\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/api-sport.pro\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/api-sport.pro\"],\"url\":\"https:\/\/api-sport.pro\/es\/author\/admin\/\"}]}<\/script>","yoast_head_json":{"title":"C\u00f3mo incrustar el widget de an\u00e1lisis xG en el sitio web \u2014 API de eventos deportivos","description":"Paso a paso, analizaremos c\u00f3mo incrustar el widget xG basado en la API de eventos deportivos en el sitio web: qu\u00e9 datos se necesitan, c\u00f3mo calcular xG y c\u00f3mo formatear el an\u00e1lisis para que coincida con su dise\u00f1o.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/api-sport.pro\/es\/como-incrustar-el-widget-de-analisis-xg-en-el-sitio-web\/","og_locale":"es_ES","og_type":"article","og_title":"How to embed the xG analytics widget on the website \u2014 API of sports events","og_description":"Step by step, we will analyze how to embed the xG widget based on the sports events API on the website: what data is needed, how to calculate xG, and how to format the analytics to match your design.","og_url":"https:\/\/api-sport.pro\/es\/como-incrustar-el-widget-de-analisis-xg-en-el-sitio-web\/","og_site_name":"Sports Events API","article_published_time":"2025-12-17T17:08:01+00:00","og_image":[{"width":1376,"height":768,"url":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-vstroit-na-sait-vidzhet-xg-analitiki_posts.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/","url":"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/","name":"C\u00f3mo incrustar el widget de an\u00e1lisis xG en el sitio web \u2014 API de eventos deportivos","isPartOf":{"@id":"https:\/\/api-sport.pro\/#website"},"primaryImageOfPage":{"@id":"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#primaryimage"},"image":{"@id":"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#primaryimage"},"thumbnailUrl":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-vstroit-na-sait-vidzhet-xg-analitiki_posts.jpg","datePublished":"2025-12-17T17:08:01+00:00","author":{"@id":"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601"},"description":"Paso a paso, analizaremos c\u00f3mo incrustar el widget xG basado en la API de eventos deportivos en el sitio web: qu\u00e9 datos se necesitan, c\u00f3mo calcular xG y c\u00f3mo formatear el an\u00e1lisis para que coincida con su dise\u00f1o.","breadcrumb":{"@id":"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#primaryimage","url":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-vstroit-na-sait-vidzhet-xg-analitiki_posts.jpg","contentUrl":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-vstroit-na-sait-vidzhet-xg-analitiki_posts.jpg","width":1376,"height":768,"caption":"\u041a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 xG-\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438?"},{"@type":"BreadcrumbList","@id":"https:\/\/api-sport.pro\/how-to-embed-the-xg-analytics-widget-on-the-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/api-sport.pro\/"},{"@type":"ListItem","position":2,"name":"How to embed the xG analytics widget on the website?"}]},{"@type":"WebSite","@id":"https:\/\/api-sport.pro\/#website","url":"https:\/\/api-sport.pro\/","name":"API de Eventos Deportivos","description":"API de Eventos Deportivos","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/api-sport.pro\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601","name":"administrador","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/api-sport.pro\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g","caption":"admin"},"sameAs":["http:\/\/api-sport.pro"],"url":"https:\/\/api-sport.pro\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/comments?post=1252"}],"version-history":[{"count":3,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1252\/revisions"}],"predecessor-version":[{"id":1679,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1252\/revisions\/1679"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/media\/1251"}],"wp:attachment":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/media?parent=1252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/categories?post=1252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/tags?post=1252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}