{"id":82981,"date":"2022-10-20T18:00:28","date_gmt":"2022-10-20T16:00:28","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/"},"modified":"2020-09-16T17:05:25","modified_gmt":"2020-09-16T20:05:25","slug":"uso-de-la-api-de-informes-de-ux-de-chrome","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/","title":{"rendered":"Utilisation de l&#039;API Chrome UX Reporting"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/#Consulta-de-datos-de-origen\" >Consulta de datos de origen<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/#Errores\" >Errores<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/#Consulta-de-datos-de-URL\" >Consulta de datos de URL<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/#Normalizacion-de-URL\" >Normalizaci\u00f3n de URL<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/#Consulta-por-factor-de-forma\" >Consulta por factor de forma<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/#Evaluacion-del-desempeno-de-Core-Web-Vitals\" >Evaluaci\u00f3n del desempe\u00f1o de Core Web Vitals<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/uso-de-la-api-de-informes-de-ux-de-chrome\/#%C2%BFQue-sigue\" >\u00bfQue sigue?<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Aprenda a utilizar la API de informes de la experiencia de usuario de Chrome para obtener un acceso RESTful f\u00e1cil a los datos de la experiencia del usuario real en millones de sitios web.<\/p>\n<p>\n          <time>25 de junio de 2020<\/time><\/p>\n<div class=\"w-layout-container--narrow w-post-signpost\">\n  <span class=\"w-post-signpost__title\">Aparece en:<\/span><br \/>\n  Tiempos de carga r\u00e1pidos\n<\/div>\n<\/header>\n<p>los <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\">Informe de UX de Chrome<\/a> El conjunto de datos (CrUX) representa c\u00f3mo los usuarios de Chrome en el mundo real experimentan los destinos populares en la web.  Desde 2017, cuando el conjunto de datos consultables se lanz\u00f3 por primera vez en BigQuery, los datos de campo de CrUX se han integrado en herramientas para desarrolladores como PageSpeed \u200b\u200bInsights, CrUX Dashboard y Search Console. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520\">Informe Core Web Vitals<\/a>, lo que permite a los desarrolladores medir y monitorear f\u00e1cilmente las experiencias de los usuarios reales.  La pieza que ha faltado todo este tiempo ha sido una herramienta que proporciona acceso gratuito y RESTful a los datos de CrUX mediante programaci\u00f3n.  Para ayudar a cerrar esa brecha, nos complace anunciar el lanzamiento de las nuevas <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\">API de informes de UX de Chrome<\/a>!<\/p>\n<p>Esta API se ha creado con el objetivo de proporcionar a los desarrolladores un acceso sencillo, r\u00e1pido y completo a los datos de CrUX.  La API de CrUX solo informa <em>campo<\/em> datos de la experiencia del usuario, a diferencia de los existentes <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/v5\/get-started\">API de PageSpeed \u200b\u200bInsights<\/a>, que tambi\u00e9n informa <em>laboratorio<\/em> datos de las auditor\u00edas de rendimiento de Lighthouse.  La API de CrUX est\u00e1 optimizada y puede servir r\u00e1pidamente los datos de la experiencia del usuario, lo que la hace ideal para aplicaciones de auditor\u00eda en tiempo real.<\/p>\n<p>Para garantizar que los desarrolladores tengan acceso a todas las m\u00e9tricas que m\u00e1s importan (los elementos b\u00e1sicos de Web Vitals), la API de CrUX audita y supervisa la pintura de contenido m\u00e1s grande (LCP), el retraso de la primera entrada (FID) y el cambio de dise\u00f1o acumulativo (CLS) en ambos el origen y el nivel de URL.<\/p>\n<p>\u00a1As\u00ed que profundicemos y veamos c\u00f3mo usarlo!<\/p>\n<h2 id=\"querying-origin-data\"><span class=\"ez-toc-section\" id=\"Consulta-de-datos-de-origen\"><\/span>Consulta de datos de origen <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Los or\u00edgenes en el conjunto de datos CrUX abarcan todas las experiencias subyacentes a nivel de p\u00e1gina.  El siguiente ejemplo demuestra c\u00f3mo consultar la API de CrUX para obtener los datos de la experiencia del usuario de un origen utilizando cURL en la l\u00ednea de comando.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\"><mark class=\"highlight-line highlight-line-active\"><span class=\"token assign-left variable\">API_KEY<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"[YOUR_API_KEY]\"<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token function\">curl<\/span> <span class=\"token string\">\"https:\/\/chromeuxreport.googleapis.com\/v1\/records:queryRecord?key=<span class=\"token variable\">$API_KEY<\/span>\"<\/span> <span class=\"token punctuation\"><\/span><\/span><br><span class=\"highlight-line\">  --header <span class=\"token string\">'Content-Type: application\/json'<\/span> <span class=\"token punctuation\"><\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  --data <span class=\"token string\">'{\"origin\": \"https:\/\/web.dev\"}'<\/span><\/mark><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Ejecute esta consulta de forma interactiva en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/records\/queryRecord?apix=true&amp;apix_params=%7B%22resource%22%3A%7B%22origin%22%3A%22https%3A%2F%2Fwww.google.com%22%7D%7D\">Explorador de API de CrUX<\/a>.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Todas las solicitudes de API deben proporcionar un valor para el <code>key<\/code> par\u00e1metro-<code>[YOUR_API_KEY]<\/code> en el ejemplo anterior se deja como marcador de posici\u00f3n.  Obtenga su propia clave API de CrUX privada con solo hacer clic en un bot\u00f3n en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/goo.gle\/crux-api-key\">Documentaci\u00f3n de la API de CrUX<\/a>.  Para mayor comodidad, el interactivo <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/records\/queryRecord?apix=true\">Explorador de API de CrUX<\/a> no requiere una clave API.<\/p>\n<\/div>\n<p>los <code>curl<\/code> El comando consta de tres partes:<\/p>\n<ol>\n<li>El punto final de la URL de la API, incluida la clave API privada de la persona que llama.<\/li>\n<li>los <code>Content-Type: application\/json<\/code> encabezado, que indica que el cuerpo de la solicitud contiene JSON.<\/li>\n<li>El codificado JSON <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/records\/queryRecord#request-body\">cuerpo de solicitud<\/a>, especificando el <code>https:\/\/web.dev<\/code> origen.<\/li>\n<\/ol>\n<p>Para hacer lo mismo en JavaScript, use el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" name=\"crux-api-util\"><code>CrUXApiUtil<\/code><\/a>  utilidad, que realiza la llamada a la API y devuelve la respuesta decodificada.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">const<\/span> CrUXApiUtil <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><mark class=\"highlight-line highlight-line-active\">CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token constant\">API_KEY<\/span> <span class=\"token operator\">=<\/span> <span class=\"token string\">'[YOUR_API_KEY]'<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token constant\">API_ENDPOINT<\/span> <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">https:\/\/chromeuxreport.googleapis.com\/v1\/records:queryRecord?key=<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token constant\">API_KEY<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">query<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">requestBody<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token constant\">API_KEY<\/span> <span class=\"token operator\">==<\/span> <span class=\"token string\">'[YOUR_API_KEY]'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">throw<\/span> <span class=\"token string\">'Replace \"YOUR_API_KEY\" with your private CrUX API key. Get a key at https:\/\/goo.gle\/crux-api-key.'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">return<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token constant\">API_ENDPOINT<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    method<span class=\"token operator\">:<\/span> <span class=\"token string\">'POST'<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    body<span class=\"token operator\">:<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span>requestBody<span class=\"token punctuation\">)<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">.<\/span>error<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token keyword\">return<\/span> Promise<span class=\"token punctuation\">.<\/span><span class=\"token function\">reject<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">return<\/span> response<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Reemplazar <code>[YOUR_API_KEY]<\/code> con tu <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/goo.gle\/crux-api-key\">llave<\/a>.  A continuaci\u00f3n, llame al <code>CrUXApiUtil.query<\/code> funci\u00f3n y pasar en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/records\/queryRecord#request-body\">cuerpo de solicitud<\/a> objeto.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\">CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  origin<span class=\"token operator\">:<\/span> <span class=\"token string\">'https:\/\/web.dev'<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Si existen datos para este origen, la respuesta de la API es un objeto codificado en JSON que contiene <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/Metric\">m\u00e9trica<\/a> que representa la distribuci\u00f3n de experiencias de usuario.  Las m\u00e9tricas de distribuci\u00f3n son los intervalos de histogramas y los percentiles.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"highlight-line\"><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">\"record\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token property\">\"key\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token property\">\"origin\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/web.dev\"<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token property\">\"metrics\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token property\">\"largest_contentful_paint\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token property\">\"histogram\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"end\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2500<\/span><span class=\"token punctuation\">,<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.7925068547983514<\/span><\/mark><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2500<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"end\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.1317422195536863<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.07575092564795324<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token property\">\"percentiles\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">          <span class=\"token property\">\"p75\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2216<\/span><\/mark><br><span class=\"highlight-line\">        <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      <\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>los <code>start<\/code> y <code>end<\/code> propiedades del <code>histogram<\/code> El objeto representa el rango de valores que experimentan los usuarios para la m\u00e9trica dada.  los <code>density<\/code> La propiedad representa la proporci\u00f3n de experiencias de usuario dentro de ese rango.  En este ejemplo, el 79% de las experiencias de usuario de LCP en todas las p\u00e1ginas web.dev est\u00e1n por debajo de los 2500 milisegundos, que es el umbral de LCP \u00abbueno\u00bb.  los <code>percentiles.p75<\/code> El valor significa que el 75% de las experiencias de los usuarios en esta distribuci\u00f3n son menos de 2216 milisegundos.  Obtenga m\u00e1s informaci\u00f3n sobre la estructura de respuesta en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/records\/queryRecord#response-body\">cuerpo de respuesta<\/a> documentaci\u00f3n.<\/p>\n<h3 id=\"errors\"><span class=\"ez-toc-section\" id=\"Errores\"><\/span>Errores <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Cuando la API de CrUX no tiene ning\u00fan dato para un origen determinado, responde con un mensaje de error codificado en JSON:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><br><span class=\"token property\">\"error\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">\"code\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">404<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"message\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"chrome ux report data not found\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"status\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"NOT_FOUND\"<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Para depurar este error, primero verifique que el origen solicitado sea navegable p\u00fablicamente.  Puede probar esto ingresando el origen en la barra de URL de su navegador y compar\u00e1ndolo con la URL final despu\u00e9s de cualquier redirecci\u00f3n.  Los problemas comunes incluyen agregar u omitir innecesariamente el subdominio y usar el protocolo HTTP incorrecto.<\/p>\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--worse\">\n<p>    Error\n  <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><span class=\"token property\">\"origin\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"http:\/\/www.web.dev\"<\/span><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><figcaption class=\"w-compare__caption\">\n<p>  Este origen incluye incorrectamente el <code>http:\/\/<\/code> protocolo y <code>www.<\/code> subdominio. <\/p>\n<\/figcaption><\/figure>\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--better\">\n<p>    \u00c9xito\n  <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><span class=\"token property\">\"origin\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/web.dev\"<\/span><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><figcaption class=\"w-compare__caption\">\n<p>  Este origen es navegable p\u00fablicamente. <\/p>\n<\/figcaption><\/figure>\n<p>Si el origen solicitado <em>es<\/em> la versi\u00f3n navegable, este error tambi\u00e9n puede ocurrir si el origen tiene un n\u00famero insuficiente de muestras.  Todos los or\u00edgenes y URL incluidos en el conjunto de datos deben tener una cantidad suficiente de muestras para anonimizar a los usuarios individuales.  Adem\u00e1s, los or\u00edgenes y las URL deben ser <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/reference\/robots_txt\">rastreable p\u00fablicamente<\/a>.  Referirse a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report#methodology\">Metodolog\u00eda CrUX<\/a> para obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo se incluyen los sitios web en el conjunto de datos.<\/p>\n<h2 id=\"querying-url-data\"><span class=\"ez-toc-section\" id=\"Consulta-de-datos-de-URL\"><\/span>Consulta de datos de URL <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ha visto c\u00f3mo consultar la API de CrUX para conocer la experiencia general del usuario en un origen.  Para restringir los resultados a una p\u00e1gina en particular, use el <code>url<\/code> par\u00e1metro de solicitud.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\"><mark class=\"highlight-line highlight-line-active\"><span class=\"token assign-left variable\">API_KEY<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"[YOUR_API_KEY]\"<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token function\">curl<\/span> <span class=\"token string\">\"https:\/\/chromeuxreport.googleapis.com\/v1\/records:queryRecord?key=<span class=\"token variable\">$API_KEY<\/span>\"<\/span> <span class=\"token punctuation\"><\/span><\/span><br><span class=\"highlight-line\">  --header <span class=\"token string\">'Content-Type: application\/json'<\/span> <span class=\"token punctuation\"><\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  --data <span class=\"token string\">'{\"url\": \"https:\/\/web.dev\/fast\/\"}'<\/span><\/mark><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Este comando cURL es similar al ejemplo de origen, excepto que el cuerpo de la solicitud usa el <code>url<\/code> par\u00e1metro para especificar la p\u00e1gina a buscar.<\/p>\n<p>Para consultar datos de URL de la API CrUX en JavaScript, llame al <code>CrUXApiUtil.query<\/code> funci\u00f3n usando el <code>url<\/code> par\u00e1metro en el cuerpo de la solicitud.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\">CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  url<span class=\"token operator\">:<\/span> <span class=\"token string\">'https:\/\/web.dev\/fast\/'<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Si existen datos para esta URL en el conjunto de datos CrUX, la API devolver\u00e1 una respuesta codificada en JSON como la que se muestra a continuaci\u00f3n.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"highlight-line\"><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">\"record\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token property\">\"key\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token property\">\"url\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/web.dev\/fast\/\"<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token property\">\"metrics\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token property\">\"largest_contentful_paint\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token property\">\"histogram\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"end\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2500<\/span><span class=\"token punctuation\">,<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.8477304539092148<\/span><\/mark><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2500<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"end\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.08988202359528057<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.062387522495501155<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token property\">\"percentiles\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">          <span class=\"token property\">\"p75\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">1947<\/span><\/mark><br><span class=\"highlight-line\">        <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      <\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Fiel a su estilo, los resultados muestran que <code>https:\/\/web.dev\/fast\/<\/code> tiene un 85% de experiencias de LCP \u00abbuenas\u00bb y un percentil 75 de 1.947 milisegundos, que es ligeramente mejor que la distribuci\u00f3n de todo el origen.<\/p>\n<h3 id=\"url-normalization\"><span class=\"ez-toc-section\" id=\"Normalizacion-de-URL\"><\/span>Normalizaci\u00f3n de URL <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La API de CrUX puede normalizar las URL solicitadas para que coincidan mejor con la lista de URL conocidas.  Por ejemplo, consultar la URL <code>https:\/\/web.dev\/fast\/#measure-performance-in-the-field<\/code> resultar\u00e1 en datos para <code>https:\/\/web.dev\/fast\/<\/code> debido a la normalizaci\u00f3n.  Cuando esto sucede, un <code>urlNormalizationDetails<\/code> El objeto se incluir\u00e1 en la respuesta.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"highlight-line\"><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">\"record\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token property\">\"key\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token property\">\"url\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/web.dev\/fast\/\"<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token property\">\"metrics\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> ... <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">\"urlNormalizationDetails\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token property\">\"normalizedUrl\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/web.dev\/fast\/\"<\/span><span class=\"token punctuation\">,<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token property\">\"originalUrl\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/web.dev\/fast\/#measure-performance-in-the-field\"<\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Aprender m\u00e1s acerca de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/records\/queryRecord#urlnormalization\">Normalizaci\u00f3n de URL<\/a> en la documentaci\u00f3n de CrUX.<\/p>\n<h2 id=\"querying-by-form-factor\"><span class=\"ez-toc-section\" id=\"Consulta-por-factor-de-forma\"><\/span>Consulta por factor de forma <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"w-aside w-aside--key-term\">\n<p><strong>T\u00e9rmino clave:<\/strong><br \/>\nUn factor de forma es el tipo de dispositivo en el que un usuario visita un sitio web.  Los tipos de dispositivos comunes incluyen computadoras de escritorio, tel\u00e9fonos y tabletas.<\/p>\n<\/div>\n<p>Las experiencias de los usuarios pueden variar significativamente seg\u00fan las optimizaciones del sitio web, las condiciones de la red y los dispositivos de los usuarios.  Para comprender mejor estas diferencias, profundice en el origen y el rendimiento de la URL mediante el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/records\/queryRecord#formfactor\"><code>formFactor<\/code><\/a>  dimensi\u00f3n de la API CrUX.<\/p>\n<p>La API admite tres valores de factor de forma expl\u00edcitos: <code>DESKTOP<\/code>, <code>PHONE<\/code>y <code>TABLET<\/code>.  Adem\u00e1s del origen o URL, especifique uno de estos valores en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\/rest\/v1\/records\/queryRecord#request-body\">cuerpo de solicitud<\/a> para restringir los resultados solo a las experiencias de los usuarios.  El siguiente ejemplo demuestra c\u00f3mo consultar la API por factor de forma usando cURL.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\"><mark class=\"highlight-line highlight-line-active\"><span class=\"token assign-left variable\">API_KEY<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"[YOUR_API_KEY]\"<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token function\">curl<\/span> <span class=\"token string\">\"https:\/\/chromeuxreport.googleapis.com\/v1\/records:queryRecord?key=<span class=\"token variable\">$API_KEY<\/span>\"<\/span> <span class=\"token punctuation\"><\/span><\/span><br><span class=\"highlight-line\">  --header <span class=\"token string\">'Content-Type: application\/json'<\/span> <span class=\"token punctuation\"><\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  --data <span class=\"token string\">'{\"url\": \"https:\/\/web.dev\/fast\/\", \"formFactor\": \"PHONE\"}'<\/span><\/mark><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Para consultar la API de CrUX para datos espec\u00edficos de factor de forma usando JavaScript, llame al <code>CrUXApiUtil.query<\/code> funci\u00f3n usando el <code>url<\/code> y <code>formFactor<\/code> par\u00e1metros en el cuerpo de la solicitud.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\">CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  url<span class=\"token operator\">:<\/span> <span class=\"token string\">'https:\/\/web.dev\/fast\/'<\/span><span class=\"token punctuation\">,<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">  formFactor<span class=\"token operator\">:<\/span> <span class=\"token string\">'PHONE'<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Omitiendo el <code>formFactor<\/code> par\u00e1metro es equivalente a solicitar datos para todos los factores de forma combinados.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"highlight-line\"><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">\"record\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token property\">\"key\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token property\">\"url\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/web.dev\/fast\/\"<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token property\">\"formFactor\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"PHONE\"<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token property\">\"metrics\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token property\">\"largest_contentful_paint\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token property\">\"histogram\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">            <span class=\"token property\">\"end\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2500<\/span><span class=\"token punctuation\">,<\/span><\/mark><br><span class=\"highlight-line\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.778631284916204<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2500<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"end\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.13943202979515887<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">            <span class=\"token property\">\"density\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.08193668528864119<\/span><\/span><br><span class=\"highlight-line\">          <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">        <span class=\"token property\">\"percentiles\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><span class=\"highlight-line\">          <span class=\"token property\">\"p75\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2366<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>los <code>key<\/code> el campo de la respuesta har\u00e1 eco de la <code>formFactor<\/code> Solicite la configuraci\u00f3n para confirmar que solo se incluyen las experiencias telef\u00f3nicas.<\/p>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Precauci\u00f3n:<\/strong><br \/>\nCuanto m\u00e1s detallada sea la solicitud, por ejemplo, una combinaci\u00f3n espec\u00edfica de URL y factor de forma, menos experiencias de usuario incluir\u00e1.  Esto puede generar errores de \u00abno encontrado\u00bb m\u00e1s frecuentes, especialmente cuando se consultan URL menos populares o el tipo de dispositivo de tableta menos popular.<\/p>\n<\/div>\n<p>Recuerde de la secci\u00f3n anterior que el 85% de las experiencias de los usuarios en esta p\u00e1gina ten\u00edan un LCP \u00abbueno\u00bb.  Compare eso con las experiencias espec\u00edficas del tel\u00e9fono, de las cuales solo el 78% se consideran \u00abbuenas\u00bb.  El percentil 75 tambi\u00e9n es m\u00e1s lento entre las experiencias telef\u00f3nicas, pasando de 1.947 milisegundos a 2.366 milisegundos.  La segmentaci\u00f3n por factor de forma tiene el potencial de resaltar disparidades m\u00e1s extremas en las experiencias de los usuarios.<\/p>\n<h2 id=\"assessing-core-web-vitals-performance\"><span class=\"ez-toc-section\" id=\"Evaluacion-del-desempeno-de-Core-Web-Vitals\"><\/span>Evaluaci\u00f3n del desempe\u00f1o de Core Web Vitals <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El programa Core Web Vitals define objetivos que ayudan a determinar si una experiencia de usuario o una distribuci\u00f3n de experiencias puede considerarse \u00abbuena\u00bb.  En el siguiente ejemplo, usamos la API CrUX y la <code>CrUXApiUtil.query<\/code> funci\u00f3n para evaluar si la distribuci\u00f3n de las m\u00e9tricas de Core Web Vitals (LCP, FID, CLS) de una p\u00e1gina web es \u00abbuena\u00bb.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\">CrUXApiUtil<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  url<span class=\"token operator\">:<\/span> <span class=\"token string\">'https:\/\/web.dev\/fast\/'<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token function\">assessCoreWebVitals<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">assessCoreWebVitals<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">const<\/span> <span class=\"token constant\">CORE_WEB_VITALS<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token string\">'largest_contentful_paint'<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token string\">'first_input_delay'<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token string\">'cumulative_layout_shift'<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token constant\">CORE_WEB_VITALS<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">metric<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">const<\/span> data <span class=\"token operator\">=<\/span> response<span class=\"token punctuation\">.<\/span>record<span class=\"token punctuation\">.<\/span>metrics<span class=\"token punctuation\">[<\/span>metric<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>data<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'No data for'<\/span><span class=\"token punctuation\">,<\/span> metric<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">const<\/span> p75 <span class=\"token operator\">=<\/span> data<span class=\"token punctuation\">.<\/span>percentiles<span class=\"token punctuation\">.<\/span>p75<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">const<\/span> threshold <span class=\"token operator\">=<\/span> data<span class=\"token punctuation\">.<\/span>histogram<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>end<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <\/span><br><span class=\"highlight-line\">    <\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">const<\/span> passes <span class=\"token operator\">=<\/span> p75 <span class=\"token operator\">&lt;<\/span> threshold<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">The 75th percentile (<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>p75<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">) of <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>metric<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> <\/span><span class=\"token template-punctuation string\">`<\/span><\/span> <span class=\"token operator\">+<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>passes <span class=\"token operator\">?<\/span> <span class=\"token string\">'passes'<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">'does not pass'<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> <\/span><span class=\"token template-punctuation string\">`<\/span><\/span> <span class=\"token operator\">+<\/span><\/span><br><span class=\"highlight-line\">        <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">the Core Web Vitals \"good\" threshold (<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>threshold<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">).<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<div class=\"w-aside w-aside--gotchas\">\n<strong>Gotchas!<\/strong> <\/p>\n<p>La API solo se puede llamar con un origen o URL a la vez.  Para evaluar varios sitios web o p\u00e1ginas, realice llamadas independientes a la API.<\/p>\n<\/div>\n<p>Los resultados muestran que esta p\u00e1gina aprueba las evaluaciones de Core Web Vitals para las tres m\u00e9tricas.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-text\"><code class=\"language-text\">The 75th percentile (1973) of largest_contentful_paint passes the Core Web Vitals \"good\" threshold (2500).<br>The 75th percentile (20) of first_input_delay passes the Core Web Vitals \"good\" threshold (100).<br>The 75th percentile (0.05) of cumulative_layout_shift passes the Core Web Vitals \"good\" threshold (0.10).<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Combinado con una forma automatizada de monitorear los resultados de la API, los datos de CrUX se pueden usar para garantizar que las experiencias del usuario <strong>conseguir r\u00e1pido<\/strong> y <strong>mantente r\u00e1pido<\/strong>.  Para obtener m\u00e1s informaci\u00f3n sobre Core Web Vitals y c\u00f3mo medirlos, consulte Web Vitals y Herramientas para medir Core Web Vitals.<\/p>\n<h2 id=\"what's-next\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-sigue\"><\/span>\u00bfQue sigue? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Las caracter\u00edsticas incluidas en la versi\u00f3n inicial de la API de CrUX solo ara\u00f1an la superficie de los tipos de informaci\u00f3n que son posibles con CrUX.  Los usuarios del conjunto de datos CrUX en BigQuery pueden estar familiarizados con algunas de las funciones m\u00e1s avanzadas, que incluyen:<\/p>\n<ul>\n<li>M\u00e9tricas adicionales\n<ul>\n<li><code>first_paint<\/code><\/li>\n<li><code>dom_content_loaded<\/code><\/li>\n<li><code>onload<\/code><\/li>\n<li><code>time_to_first_byte<\/code><\/li>\n<li><code>notification_permissions<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Dimensiones adicionales\n<ul>\n<li>mes<\/li>\n<li>pa\u00eds<\/li>\n<li>tipo de conexi\u00f3n efectiva (ECT)<\/li>\n<\/ul>\n<\/li>\n<li>Granularidad adicional\n<ul>\n<li>histogramas detallados<\/li>\n<li>m\u00e1s percentiles<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Con el tiempo, esperamos integrar m\u00e1s de estas caracter\u00edsticas con la facilidad de uso y los precios gratuitos de la API de CrUX para permitir nuevas formas de explorar los datos y descubrir informaci\u00f3n sobre el estado de las experiencias de los usuarios en la web.<\/p>\n<p>Echa un vistazo al oficial <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\">Documentos de la API de CrUX<\/a> a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/goo.gle\/crux-api-key\">adquirir su clave API<\/a> y explorar m\u00e1s aplicaciones de ejemplo.  Esperamos que lo pruebes y nos encantar\u00eda escuchar cualquier pregunta o comentario que puedas tener, as\u00ed que comun\u00edcate con nosotros en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/groups.google.com\/a\/chromium.org\/forum\/#!forum\/chrome-ux-report\">Foro de discusi\u00f3n de CrUX<\/a>.  Y para estar al d\u00eda de todo lo que hemos planeado para la API de CrUX, suscr\u00edbete al <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/groups.google.com\/a\/chromium.org\/forum\/#!forum\/chrome-ux-report-announce\">Foro de anuncios de CrUX<\/a> o s\u00edguenos en Twitter en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/ChromeUXReport\">@ChromeUXReport<\/a>.<\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda a utilizar la API de informes de la experiencia de usuario de Chrome para obtener un acceso RESTful f\u00e1cil a los datos de la experiencia del usuario real en&#8230;<\/p>","protected":false},"author":1,"featured_media":82982,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-82981","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Uso de la API de informes de UX de Chrome - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Aprenda a utilizar la API de informes de la experiencia de usuario de Chrome para obtener un acceso RESTful f\u00e1cil a los datos de la experiencia del\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/using-the-chrome-ux-reporting-api\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uso de la API de informes de UX de Chrome\" \/>\n<meta property=\"og:description\" content=\"Aprenda a utilizar la API de informes de la experiencia de usuario de Chrome para obtener un acceso RESTful f\u00e1cil a los datos de la experiencia del\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/using-the-chrome-ux-reporting-api\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-20T16:00:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8340950.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Uso de la API de informes de UX de Chrome\",\"datePublished\":\"2022-10-20T16:00:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/\"},\"wordCount\":1846,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8340950.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/\",\"name\":\"Uso de la API de informes de UX de Chrome - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8340950.png\",\"datePublished\":\"2022-10-20T16:00:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Aprenda a utilizar la API de informes de la experiencia de usuario de Chrome para obtener un acceso RESTful f\u00e1cil a los datos de la experiencia del\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/using-the-chrome-ux-reporting-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8340950.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8340950.png\",\"width\":1200,\"height\":360,\"caption\":\"hero-8340950-5824382-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Uso de la API de informes de UX de Chrome - R Marketing Digital","description":"D\u00e9couvrez comment utiliser l&#039;API Chrome UX Reporting pour un acc\u00e8s RESTful facile aux donn\u00e9es d&#039;exp\u00e9rience utilisateur.","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:\/\/rmarketingdigital.com\/fr\/dev\/using-the-chrome-ux-reporting-api\/","og_locale":"fr_FR","og_type":"article","og_title":"Uso de la API de informes de UX de Chrome","og_description":"Aprenda a utilizar la API de informes de la experiencia de usuario de Chrome para obtener un acceso RESTful f\u00e1cil a los datos de la experiencia del","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/using-the-chrome-ux-reporting-api\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-20T16:00:28+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8340950.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Uso de la API de informes de UX de Chrome","datePublished":"2022-10-20T16:00:28+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/"},"wordCount":1846,"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8340950.png","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/","url":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/","name":"Uso de la API de informes de UX de Chrome - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8340950.png","datePublished":"2022-10-20T16:00:28+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"D\u00e9couvrez comment utiliser l&#039;API Chrome UX Reporting pour un acc\u00e8s RESTful facile aux donn\u00e9es d&#039;exp\u00e9rience utilisateur.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/using-the-chrome-ux-reporting-api\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8340950.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8340950.png","width":1200,"height":360,"caption":"hero-8340950-5824382-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/82981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=82981"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/82981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/82982"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=82981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=82981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=82981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}