Cómo mostrar problemas y soluciones a los comercios

En esta guía, se explica cómo los desarrolladores de apps de terceros pueden usar el MerchantSupport para crear una página de diagnóstico en la app para sus comercios.

Puedes usar este servicio para crear IU similares a las de la cuenta de Merchant Center diagnósticos y productos problemas de seguridad.

El servicio MerchantSupport es solo para IU de terceros. Las solicitudes deben tener las siguientes características: se activa cuando un comercio interactúa con la IU de tu aplicación. Para automatizar diagnósticos para tu propia cuenta de comerciante, consulta la cuenta estado, producto estado y producto de filtrado.

Te recomendamos que proporciones las siguientes páginas en tu app para ayudar a tu los comercios solucionan problemas:

  • Diagnóstico de la cuenta
  • Diagnóstico de productos

Diferentes opciones para implementar una página de diagnóstico

Puedes implementar la página de diagnóstico de diferentes maneras. Según tus necesidades, Elegir la opción que determina cómo se manejan las acciones de diagnóstico complejas. En En la solicitud, puedes establecer user_input_action_option en una de las siguientes opciones: Opciones:

  • REDIRECT_TO_MERCHANT_CENTER: Esta es la opción predeterminada. Acciones que requerir mostrar contenido adicional o recibir aportes adicionales del comercios no están completamente implementados en tu app. Para ellos, la API proporciona un para redireccionar a la página correspondiente en Merchant Center donde el comercio pueda realizar la acción.

  • BUILT_IN_USER_INPUT_ACTIONS: Puedes implementar acciones complejas que requieran las entradas del usuario como una solución integrada en la app.

Implementa una página de diagnóstico

En esta sección, se explica cómo implementar la página de diagnóstico. Usa la configuración predeterminada (sencilla) para administrar acciones complejas como redireccionamientos a Merchant Center.

Para obtener una implementación más avanzada con acciones en la aplicación, consulta lo siguiente y consulta Cómo implementar una acción integrada con entradas del usuario.

Implementación

A continuación, te sugerimos cómo debería verse el flujo de tu página de diagnóstico:

  1. Un comercio abre una página de diagnóstico en tu app.

  2. Tu app solicita un diagnóstico llamando al servicio MerchantSupport.

    A continuación, se incluye una solicitud de ejemplo:

    POST https://shoppingcontent.googleapis.com/content/v2.1/{merchantId}/merchantsupport/renderaccountissues?timeZone=America/Los_Angeles&languageCode=en-GB {}

    Reemplaza {merchantId} por el identificador único del cuenta para la que deseas activar el procesamiento de la acción.

  3. Tu app muestra el diagnóstico y las acciones recomendadas de la respuesta al comercio. Esta es una respuesta de ejemplo:

    {
  "issues": [
    {
      "title": "Misrepresentation",
      "impact": {
        "message": "Prevents all products from showing in all countries",
        "severity": "ERROR",
        "breakdowns": [
          {
            "regions": [
              {
                "code": "001",
                "name": "All countries"
              }
            ],
            "details": [
              "Products not showing organically"
            ]
          }
        ]
      },
      "prerenderedContent": "\u003cdiv class=\"issue-detail\"\u003e\u003cdiv class=\"issue-content\"\u003e\u003cp class=\"content-element\"\u003e\u003cspan class=\"segment\"\u003eBased on the information available about your business, there is reason to believe that customers are being misled on Google. Review the Misrepresentation policy and make changes to your Merchant Center and/or online store.u003c/span\u003e\u003c/p\u003e\u003cp class=\"content-element root-causes-intro\"\u003e\u003cspan class=\"segment\"\u003eMake sure your Merchant Center and online store follow the following best practices / guidelines\u003c/span\u003e\u003c/p\u003e\u003cul class=\"content-element root-causes\"\u003e\u003cli\u003e\u003cp\u003e\u003cspan class=\"segment\"\u003eProvide transparency about your business identity, business model, policies and how your customers can interact with you\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003cli\u003e\u003cp\u003e\u003cspan class=\"segment\"\u003ePromote your online reputation by showing reviews or highlighting any badges or seals of approval\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003cli\u003e\u003cp class=\"tooltip tooltip-style-info\"\u003e\u003cspan class=\"segment\"\u003eUse a professional design for your online store that includes an SSL certificate\u003c/span\u003e\u003cspan class=\"tooltip-icon\"\u003e\u003cbr\u003e\u003c/span\u003e\u003cspan class=\"tooltip-text\"\u003e\u003cspan class=\"segment\"\u003eMake sure it's accessible for all users without any redirects and doesn't have any placeholders for text and images.u003c/span\u003e\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003cli\u003e\u003cp class=\"tooltip tooltip-style-info\"\u003e\u003cspan class=\"segment\"\u003eProvide information in the business information settings in your Merchant Center\u003c/span\u003e\u003cspan class=\"tooltip-icon\"\u003e\u003cbr\u003e\u003c/span\u003e\u003cspan class=\"tooltip-text\"\u003e\u003cspan class=\"segment\"\u003eLink any relevant third-party platforms to your Merchant Center and create a Google Business Profile.u003c/span\u003e\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003cli\u003e\u003cp\u003e\u003cspan class=\"segment\"\u003eFollow SEO guidelines, improve your eligibility for seller ratings and match your product data in your Merchant Center with your online store\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003c/ul\u003e\u003ca href=\"https://support.google.com/merchants/answer/6150127?hl=en-US\" class=\"content-element\"\u003eLearn more about the Misrepresentation policy\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e",
      "actions": [
        {
          "externalAction": {
            "type": "REVIEW_ACCOUNT_ISSUE_IN_MERCHANT_CENTER",
            "uri": "https://merchants.google.com/mc/products/diagnostics/accountissues?a=672911686&hl=en-US"
          },
          "buttonLabel": "Request review",
          "isAvailable": true
        }
      ]
    },
    {
      "title": "Adult-oriented content",
      "impact": {
        "message": "Prevents all products from showing in all countries",
        "severity": "ERROR",
        "breakdowns": [
          {
            "regions": [
              {
                "code": "001",
                "name": "All countries"
              }
            ],
            "details": [
              "Products not showing organically"
            ]
          }
        ]
      },
      "prerenderedContent": "\u003cdiv class=\"issue-detail\"\u003e\u003cdiv class=\"callout-banners\"\u003e\u003cdiv class=\"callout-banner callout-banner-info\"\u003e\u003cp\u003e\u003cspan class=\"segment\"\u003eReview requested on Aug 9, 2023. It can take a few days to complete.u003c/span\u003e\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"issue-content\"\u003e\u003cp class=\"content-element\"\u003e\u003cspan class=\"segment\"\u003eThere was a problem identified with the sale of prohibited adult products on your online store. In the case that you are intentionally selling adult items, enable Adult content in Settings in your Merchant Center. In your product file, use the \u003c/span\u003e\u003cspan class=\"segment segment-attribute\"\u003eadult\u003c/span\u003e\u003cspan class=\"segment\"\u003e attribute for specific products.u003c/span\u003e\u003c/p\u003e\u003cp class=\"content-element root-causes-intro\"\u003e\u003cspan class=\"segment\"\u003eMake sure the products meet the policy requirements\u003c/span\u003e\u003c/p\u003e\u003cul class=\"content-element root-causes\"\u003e\u003cli\u003e\u003cp class=\"tooltip tooltip-style-info\"\u003e\u003cspan class=\"segment\"\u003eAdult oriented content may be prohibited or restricted depending on the product sold and the country it is sold\u003c/span\u003e\u003cspan class=\"tooltip-icon\"\u003e\u003cbr\u003e\u003c/span\u003e\u003cspan class=\"tooltip-text\"\u003e\u003cspan class=\"segment\"\u003eSee a full list of countries in the HelpCenter\u003c/span\u003e\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003cli\u003e\u003cp class=\"tooltip tooltip-style-info\"\u003e\u003cspan class=\"segment\"\u003eDon't list sexually explicit content that is intended to arouse or includes content such as text, image, audio, or video of graphic sexual acts intended to arouse\u003c/span\u003e\u003cspan class=\"tooltip-icon\"\u003e\u003cbr\u003e\u003c/span\u003e\u003cspan class=\"tooltip-text\"\u003e\u003cspan class=\"segment\"\u003eExamples: Graphic depictions of sexual acts in progress, including hardcore pornography, any type of genital, anal, or oral sexual activity; graphic depictions of masturbation or genital arousal and language explicitly referencing arousal, masturbation, cartoon porn, or hentai\u003c/span\u003e\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003c/ul\u003e\u003ca href=\"https://support.google.com/merchants/answer/6150138?hl=en-US#wycd-restricted-adult-content\" class=\"content-element\"\u003eLearn more about the Adult-oriented content policy\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e"
    },
    {
      "title": "Missing return and refund policy",
      "impact": {
        "message": "Limits visibility of all products in all countries",
        "severity": "ERROR",
        "breakdowns": [
          {
            "regions": [
              {
                "code": "001",
                "name": "All countries"
              }
            ],
            "details": [
              "Limited visibility for products showing organically"
            ]
          }
        ]
      },
      "prerenderedContent": "\u003cdiv class=\"issue-detail\"\u003e\u003cdiv class=\"issue-content\"\u003e\u003cp class=\"content-element\"\u003e\u003cspan class=\"segment\"\u003eThere was a problem identified with the return and/or refund policy of your online store. Update your return or refund policy to provide customers a transparent shopping experience.u003c/span\u003e\u003c/p\u003e\u003cp class=\"content-element root-causes-intro\"\u003e\u003cspan class=\"segment\"\u003eMake sure your products meet the Shopping policy requirements\u003c/span\u003e\u003c/p\u003e\u003cul class=\"content-element root-causes\"\u003e\u003cli\u003e\u003cp class=\"tooltip tooltip-style-info\"\u003e\u003cspan class=\"segment\"\u003eIt's available on your online store\u003c/span\u003e\u003cspan class=\"tooltip-icon\"\u003e\u003cbr\u003e\u003c/span\u003e\u003cspan class=\"tooltip-text\"\u003e\u003cspan class=\"segment\"\u003eWe recommend that you have a separate landing page for your policy and link to it from the other pages on your online store, so that it's easy to find.u003c/span\u003e\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003cli\u003e\u003cp class=\"tooltip tooltip-style-info\"\u003e\u003cspan class=\"segment\"\u003eIt's available in the language of the country you're selling in or in English\u003c/span\u003e\u003cspan class=\"tooltip-icon\"\u003e\u003cbr\u003e\u003c/span\u003e\u003cspan class=\"tooltip-text\"\u003e\u003cspan class=\"segment\"\u003eMake sure that the return and/or refund policy is available in the target language or in English. Ideally, users should be given the option to select the return and/or refund policy in their own language.u003c/span\u003e\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003cli\u003e\u003cp\u003e\u003cspan class=\"segment\"\u003eIt's accessible to everyone visiting your online store, without having to log in, sign up or enter any personal information\u003c/span\u003e\u003c/p\u003e\u003c/li\u003e\u003c/ul\u003e\u003ca href=\"https://support.google.com/merchants/answer/9158778?hl=en-US\" class=\"content-element\"\u003eLearn more about Missing return and refund policy\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e",
      "actions": [
        {
          "externalAction": {
            "type": "REVIEW_ACCOUNT_ISSUE_IN_MERCHANT_CENTER",
            "uri": "https://merchants.google.com/mc/products/diagnostics/accountissues?a=672911686&hl=en-US"
          },
         "buttonLabel": "Request review",
         "isAvailable": true
        }
      ]
    }
  ],
  "alternateDisputeResolution": {
    "uri": "https://support.google.com/european-union-digital-services-act-redress-options?hl=en-US",
    "label": "Additional options available to you"
  }
}

    Te recomendamos que muestres los problemas en el orden en que se devuelven, con title y impact.message. También te recomendamos que muestres el impact.breakdowns del problema cuando el comercio coloca el cursor sobre él un título o una descripción.

  4. El comercio hace clic en un problema de la lista.

  5. Tu app muestra el impact detallado de cada edición según la country, destination, prerendered_content y botones para la actions que puede usar el comercio para resolver el problema. Existen diferentes tipos de acciones:

    1. Acciones externas: Apunta a la página externa, por ejemplo, en Merchant Center, donde el comercio puede resolver el problema
    2. Acciones sencillas integradas: Selecciona la página de tu aplicación en la que el comercio puede resolver el problema.
    3. Acciones integradas de entrada del usuario: Abre un diálogo en el que el comercio puede proporcionar la información requerida y solicitar la acción. Este tipo de acción solo está disponible si el elemento BUILT_IN_USER_INPUT_ACTIONS se solicitado.

  6. El comercio sigue las instrucciones para resolver el problema.

  7. El comercio vuelve a cargar la página de diagnóstico en tu app.

  8. Tu app envía otra solicitud al servicio MerchantSupport. muestra una lista actualizada de los problemas.

Puedes comparar la información que muestra la app terminada con las páginas de diagnóstico Center para verificar tu para implementarlos.

Simulaciones de IU

Este es un ejemplo de cómo puedes mostrar la información del renderaccountissues respuesta en la página de diagnóstico de tu cuenta. Los objetos en la La IU se asigna a los campos de la API correspondientes en la simulación. Puedes crear un proyecto similar para ver los problemas del producto.

imagen

Así se ve la página de diagnóstico de la cuenta completada:

imagen

Estilo HTML renderizado previamente

La respuesta de la llamada al servicio MerchantSupport incluye lo siguiente: prerendered_content, los detalles de cada problema en HTML. Puedes incorporar este contenido HTML directamente en la IU para mostrar el problema de forma de un conjunto de datos tengan un formato común.

Es posible que veas elementos HTML con la clase new-element. El new-element se aplica a los elementos que se agregan al HTML después de la integración con el servicio MerchantSupport. Recomendamos ocultar elementos con la clase new-element, para que puedas diseñar estos elementos antes de que se muestren usuarios en tu app.

Este es un ejemplo del valor del campo prerendered_content:

<div class="issue-detail">
  <div class="callout-banners">
    <div class="callout-banner callout-banner-info"><p><span class="segment">Review requested on Aug 9, 2023. It can take a few days to complete.</span>
    </p></div>
  </div>
  <div class="issue-content"><p class="content-element"><span class="segment">There was a problem identified with the sale of prohibited adult products on your online store. In the case that you are intentionally selling adult items, enable Adult content in Settings in your Merchant Center. In your product file, use the </span><span
      class="segment segment-attribute">adult</span><span class="segment"> attribute for specific products.</span>
  </p>
    <p class="content-element root-causes-intro"><span class="segment">Make sure the products meet the policy requirements</span>
    </p>
    <ul class="content-element root-causes">
      <li><p class="tooltip tooltip-style-info"><span class="segment">Adult oriented content may be prohibited or restricted depending on the product sold and the country it is sold</span><span
          class="tooltip-icon"><br></span><span class="tooltip-text"><span class="segment">See a full list of countries in the HelpCenter</span></span>
      </p></li>
      <li><p class="tooltip tooltip-style-info"><span class="segment">Don't list sexually explicit content that is intended to arouse or includes content such as text, image, audio, or video of graphic sexual acts intended to arouse</span><span
          class="tooltip-icon"><br></span><span class="tooltip-text"><span class="segment">Examples: Graphic depictions of sexual acts in progress, including hardcore pornography, any type of genital, anal, or oral sexual activity; graphic depictions of masturbation or genital arousal and language explicitly referencing arousal, masturbation, cartoon porn, or hentai</span></span>
      </p></li>
    </ul>
    <a href="https://support.google.com/merchants/answer/6150138?hl=en-US#wycd-restricted-adult-content"
       class="content-element">Learn more about the Adult-oriented content policy</a></div>
</div>

Así se verá si incorporaste el HTML anterior prerendered_content en tu app sin ningún estilo:

imagen

Puedes usar varias clases de CSS para ajustar la forma en que se renderiza el contenido en tu IU. A continuación, se muestra un ejemplo de CSS que puedes usar:

issue-detail {
  text-align: left;
  width: 700px;
  border-radius: 8px;
  background: white;
  margin: 16px;
  padding: 16px;
}

.content-element {
  margin: 8px 0 8px 0;
  display: block;
}

/* callout banners */
.callout-banners {
  margin: 0 0 16px 0;
}

.callout-banner {
  display: block;
  padding: 16px 16px 6px 16px;
  margin: 0 0 8px 0;
  border-radius: 8px;
}

.callout-banner-info {
  background: #e8f0fe;
}

.callout-banner-warning {
  background: #fef7e0;
}

.callout-banner-error {
  background: #fce8e6;
}

/* add an icon to the callout banner */
.callout-banner p {
  background-repeat: no-repeat;
  padding-left: 32px;
}

.callout-banner-error p {
  background-image: url("https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/error/default/20px.svg");
}

.callout-banner-warning p {
  background-image: url("https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/warning/default/20px.svg");
}

.callout-banner-info p {
  background-image: url("https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/search/default/20px.svg");
}

/* segments with style */
.segment-attribute {
  color: #198639;
  font-family: monospace, monospace;
}

.segment-bold {
  font-weight: bold;
}

.segment-italic {
  font-style: italic;
}

/* tooltip */
.tooltip {
  position: relative;
}

.tooltip-style-info .tooltip-icon:before {
  content: '(i)';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin-left: 5px;
}

.tooltip-style-question .tooltip-icon:before {
  content: '(?)';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin-left: 5px;
}

.tooltip .tooltip-text {
  visibility: hidden;
  text-align: left;
  background: white;
  border-radius: 8px;
  padding: 5px 0;
  border: 1px solid;
  padding: 10px;
  box-shadow: 3px 7px 12px #c1c1c1;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
}

/* table */
table.content-element {
  margin: 16px 0 16px 0;
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 1em 0;
}

table.content-element th {
  background-color: #eee;
}

table.content-element th, table td {
  border: 1px solid #ddd;
  font-size: 0.9em;
  padding: 0.3em 1em;
}

/* hidde elements added in future, until they are supported in your application */
.new-element {
  visibility: hidden;
}

Si usas el CSS anterior, el contenido renderizado se verá de la siguiente manera:

imagen

También puedes configurar y mostrar información sobre la herramienta con CSS:

imagen

Cómo implementar una acción integrada con entradas del usuario

Una acción integrada con entradas del usuario te permite brindar una solución de diagnóstico como una solución integrada en la aplicación. Recomendamos implementar como un diálogo en el que el comercio puede ingresar y confirma la solicitud.

Cada acción contiene uno o más flujos de acción. Para algunas acciones, puede haber a más de un flujo. Por ejemplo, podría haber un flujo diferente cuando El comercio solicita una revisión adicional porque no está de acuerdo con la decisión. y un flujo diferente cuando ya se solucionó el problema.

Si quieres solicitar datos para implementar acciones complejas con entradas del usuario, debes establecer el campo user_input_action_option al valor BUILT_IN_USER_INPUT_ACTIONS.

POST https://shoppingcontent.googleapis.com/content/v2.1/{merchantId}/merchantsupport/renderaccountissues

{
  "user_input_action_option": "BUILT_IN_USER_INPUT_ACTIONS"
}

Reemplaza {merchantId} por el identificador único del cuenta para la que deseas activar el procesamiento de la acción.

Implementación

Así es como sugerimos el flujo de la página de diagnóstico que solicita al usuario la entrada debería verse de la siguiente manera:

  1. El comercio hace clic en el botón de acción.

    • Si hay varios flujos disponibles, tu app los ofrece todos para que el comercio puede seleccionar una, según su intención.
    • El comercio selecciona el flujo.

  2. Tu app muestra el título, el mensaje, el texto destacado y el formulario de entrada del usuario para la el flujo de acción seleccionado. Te recomendamos que muestres estos detalles en un .

    • El texto destacado, si está presente, contiene información importante que tiene como objetivo ayudar el comercio para entender mejor cómo funciona la acción y qué hacer para tener éxito. Te recomendamos que destaques este mensaje y le pongas estilo. según la gravedad del texto destacado.
    • Si hay campos de entrada en el flujo, se deben mostrar para que el comercio puede proporcionar valores. Si el campo de entrada está marcado como obligatorio, tu app no debería permitir que el comercio envíe la solicitud proporcionan el valor.

  3. El comercio lee la información y proporciona los valores solicitados.

  4. El comercio confirma su solicitud haciendo clic en el botón.

  5. Tu app activa el procesamiento de la acción llamando al Servicio de MerchantSupport. A continuación, se incluye una solicitud de ejemplo:

    POST https://shoppingcontent.googleapis.com/content/v2.1/{merchantId}/merchantsupport/triggeraction

{
  actionContext: "ActionContextValue=",
  actionInput: { actionFlowId: "flow1",
  inputValues: [
  { input_field_id: "input1", checkbox_input_value: { value: true } }
  ]
}

    Reemplaza {merchantId} por el identificador único del cuenta para la que deseas activar el procesamiento de la acción.

    Para acceder al método triggeraction para BuiltInUserInputAction, envía un para la solicitud con este formulario.

  6. Tu app muestra el mensaje de confirmación que muestra MerchantSupport. servicio.

    • Si el servicio devuelve un error de validación con el INVALID_ARGUMENT de estado, contiene información detallada y mensaje de error localizado que se debe mostrar al comercio. Recomendaciones y se muestra el error cerca del campo de entrada afectado. Aquí hay un ejemplo de una respuesta de muestra:
    {
  "error":
    {
      "code": 400,
      "message": "[actionInput.inputValues] Invalid user input",
      "status": "INVALID_ARGUMENT",
      "details": [
      {
        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
        "reason": "invalid",
        "domain": "global"
      },
      {
        "@type": "type.googleapis.com/google.rpc.BadRequest",
        "fieldViolations": [
          {
            "field": "actionInput.inputValues.input",
            "description": "The field is required"
          }
        ]
      }
    ]
  }
}
    • Si el servicio devuelve un estado no válido o un error interno, indicado por el estados FAILED_PRECONDITION y INTERNAL, la app debe indicarle al para volver a cargar la página o intentarlo más tarde.