Mostra problemi e soluzioni ai commercianti

Questa guida spiega in che modo gli sviluppatori di app di terze parti possono utilizzare i MerchantSupport per creare una pagina di diagnostica in-app per i commercianti.

Puoi utilizzare questo servizio per creare UI simili all'account Merchant Center diagnostica e prodotto pagine relative ai problemi.

Il servizio MerchantSupport è solo per UI di terze parti. Le richieste devono essere attivata quando un commerciante interagisce con l'interfaccia utente della tua applicazione. Per automatizzare per la diagnostica del tuo account commerciante, consulta l'account status, prodotto stato e prodotto guide ai filtri.

Ti consigliamo di fornire le seguenti pagine nella tua app per aiutare i tuoi risolvere i problemi dei commercianti:

  • Diagnostica account
  • Diagnostica prodotto

Diverse opzioni per l'implementazione di una pagina di diagnostica

Puoi implementare la pagina di diagnostica in diversi modi. In base alle tue esigenze, scegli l'opzione che determina la modalità di gestione delle azioni diagnostiche complesse. Nella la richiesta puoi impostare user_input_action_option su una delle seguenti opzioni opzioni:

  • REDIRECT_TO_MERCHANT_CENTER: questa è l'opzione predefinita. Azioni che richiedono di mostrare contenuti aggiuntivi o di ricevere input aggiuntivi i commercianti non sono completamente implementati nella tua app. Per loro, l'API fornisce per reindirizzare gli utenti alla pagina corrispondente in Merchant Center in cui il commerciante può eseguire l'azione.

  • BUILT_IN_USER_INPUT_ACTIONS: puoi implementare azioni complesse che richiedono l'input utente come soluzione in-app nella tua applicazione.

Implementa una pagina di diagnostica

Questa sezione illustra come implementare la pagina Diagnostica. Utilizza il valore predefinito (semplice) per gestire azioni complesse come reindirizzamenti a Merchant Center.

Per un'implementazione più avanzata con le azioni in-app, consulta quanto segue: e vedi Implementare le azioni integrate con input dell'utente.

Implementazione

Consigliamo di utilizzare il flusso della pagina di diagnostica nel seguente modo:

  1. Un commerciante apre una pagina di diagnostica nella tua app.

  2. La tua app richiede la diagnostica chiamando il servizio MerchantSupport.

    Ecco una richiesta di esempio:

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

    Sostituisci {merchantId} con l'identificatore univoco del l'account per il quale vuoi attivare l'elaborazione dell'azione.

  3. L'app mostra la diagnostica e le azioni consigliate dalla risposta al commerciante. Ecco un esempio di risposta:

    {
  "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"
  }
}

    Ti consigliamo di mostrare i problemi nell'ordine di restituzione, con title e impact.message. Ti consigliamo inoltre di visualizzare impact.breakdowns del problema quando il commerciante passa il mouse sopra il problema titolo o descrizione.

  4. Il commerciante fa clic su un problema nell'elenco.

  5. La tua app mostra i impact dettagliati di ogni problema per country, destination, prerendered_content e pulsanti per i actions che il commerciante può adottare per risolvere il problema. Esistono diversi tipi di azioni:

    1. Azioni esterne: passa alla pagina esterna, ad esempio nella Merchant Center, dove il commerciante può risolvere il problema.
    2. Azioni semplici integrate: posiziona il puntatore del mouse sulla pagina dell'applicazione in cui il commerciante può risolvere il problema.
    3. Azioni di input dell'utente integrate: apri una finestra di dialogo in cui il commerciante può fornisci le informazioni richieste e richiedi l'azione. Questo tipo di è disponibile solo se BUILT_IN_USER_INPUT_ACTIONS era richiesto.

  6. Il commerciante segue le istruzioni per risolvere il problema.

  7. Il commerciante ricarica la pagina di diagnostica nella tua app.

  8. L'app invia un'altra richiesta al servizio MerchantSupport e mostra un elenco aggiornato dei problemi.

di Gemini Advanced.

Puoi confrontare le informazioni visualizzate dall'app finita con le pagine di diagnostica in Merchant Center assistenza per verificare implementazione.

Simulazioni di UI

Ecco un esempio di come visualizzare le informazioni Risposta renderaccountissues nella pagina di diagnostica dell'account. Gli oggetti in Le UI sono mappate ai campi dell'API corrispondenti nella simulazione. Puoi creare un modello per i problemi relativi ai prodotti.

immagine

Ecco come appare la pagina di diagnostica dell'account compilata:

immagine

Definisci lo stile dell'HTML prerendering

La risposta alla chiamata al servizio MerchantSupport include il parametro prerendered_content, i dettagli di ogni problema in HTML. Puoi incorporare questi contenuti HTML direttamente nell'interfaccia utente per visualizzare il problema in un file leggibile formato.

Potresti vedere elementi HTML con la classe new-element. new-element viene applicata agli elementi aggiunti al codice HTML dopo l'integrazione con il servizio MerchantSupport. Ti consigliamo di nascondere gli elementi con il corso new-element, per poter definire uno stile per questi elementi prima che vengano mostrati utenti della tua app.

Ecco un esempio del valore 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>

Ecco come funziona se hai incorporato il codice HTML precedente prerendered_content nella tua app senza alcuno stile:

immagine

Puoi utilizzare più classi CSS per regolare il modo in cui i contenuti vengono visualizzati nell'interfaccia utente. Ecco un esempio di CSS che puoi utilizzare:

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;
}

Ecco come appaiono i contenuti visualizzati utilizzando il codice CSS precedente:

immagine

Puoi anche configurare e mostrare le descrizioni comando con CSS:

immagine

Implementare l'azione integrata con l'input dell'utente

Un'azione integrata con input utente ti consente di fornire una diagnostica complessa funzionalità come soluzione in-app nella tua applicazione. Consigliamo di implementare come una finestra di dialogo in cui il commerciante può fornire la sua opinione, leggi ulteriori informazioni e conferma la richiesta.

Ogni azione contiene uno o più flussi di azioni. Per alcune azioni, è possibile in più di un flusso. Ad esempio, potrebbe esserci un flusso diverso quando il commerciante chiede una revisione aggiuntiva perché non è d'accordo con la decisione e una procedura diversa quando hanno già risolto il problema.

Per richiedere dati per implementare azioni complesse con l'input utente, devi impostare il campo user_input_action_option al valore 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"
}

Sostituisci {merchantId} con l'identificatore univoco del l'account per il quale vuoi attivare l'elaborazione dell'azione.

Implementazione

Ecco come suggeriamo il flusso della pagina di diagnostica che richiede all'utente l'input dovrebbe avere il seguente aspetto:

  1. Il commerciante fa clic sul pulsante di azione.

    • Se sono disponibili più flussi, l'app li offre tutti, in modo che il commerciante può selezionarne uno in base alle sue intenzioni.
    • Il commerciante seleziona il flusso.

  2. Nella tua app vengono visualizzati il titolo, il messaggio, il callout e il modulo di immissione dell'utente per flusso di azioni selezionato. Ti consigliamo di mostrare questi dettagli in un .

    • Il callout, se presente, contiene informazioni importanti che aiutano a al commerciante per capire meglio come funziona l'azione e cosa fare per successo. Ti consigliamo di evidenziare questo messaggio e applicarne uno stile in base alla gravità del callout.
    • Se il flusso contiene campi di input, questi devono essere visualizzati in modo che il commerciante può fornire valori. Se il campo di immissione è contrassegnato come obbligatorio: la tua app non deve consentire al commerciante di inviare la richiesta prima forniscono il valore.

  3. Il commerciante legge le informazioni e fornisce i valori richiesti.

  4. Il commerciante conferma la richiesta facendo clic sul pulsante.

  5. L'app attiva l'elaborazione dell'azione chiamando il metodo Servizio MerchantSupport. Ecco una richiesta di esempio:

    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 } }
  ]
}

    Sostituisci {merchantId} con l'identificatore univoco del l'account per il quale vuoi attivare l'elaborazione dell'azione.

    Per accedere al metodo triggeraction per BuiltInUserInputAction, invia un usa questo .

  6. La tua app mostra il messaggio di conferma restituito da MerchantSupport completamente gestito di Google Cloud.

    • Se il servizio restituisce un errore di convalida con il metodo INVALID_ARGUMENT , contiene informazioni dettagliate messaggio di errore localizzato da mostrare al commerciante. I nostri suggerimenti che mostra questo errore vicino al campo di immissione interessato. Ecco un esempio di una risposta di esempio:
    {
  "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"
          }
        ]
      }
    ]
  }
}
    • Se il servizio restituisce uno stato non valido o un errore interno, indicato dal Stati FAILED_PRECONDITION e INTERNAL, l'app deve indicare al commerciante di ricaricare la pagina o a riprovare in un secondo momento.