Afficher les problèmes des marchands et leurs solutions

Ce guide explique comment les développeurs d'applications tierces peuvent utiliser le MerchantSupport afin de créer une page de diagnostic intégrée à l'application pour ses marchands.

Vous pouvez utiliser ce service afin de créer des interfaces utilisateur semblables à celles du compte Merchant Center diagnostics et du produit de problèmes.

Le service MerchantSupport est réservé aux interfaces utilisateur tierces. Les requêtes doivent être déclenché lorsqu'un marchand interagit avec l'interface utilisateur de votre application. Pour automatiser les diagnostics de votre propre compte marchand, consultez la page état, produit état et product de filtrage.

Nous vous recommandons de fournir les pages suivantes dans votre application afin que votre pour les marchands:

  • Diagnostics du compte
  • Diagnostic des produits

Différentes options pour implémenter une page "Diagnostic"

Vous pouvez implémenter la page "Diagnostic" de différentes manières. Selon vos besoins, choisissez l'option qui détermine la façon dont les actions de diagnostic complexes sont traitées. Dans à la requête, vous pouvez définir user_input_action_option sur l'une des valeurs suivantes : options:

  • REDIRECT_TO_MERCHANT_CENTER: il s'agit de l'option par défaut. Les actions qui nécessitent d'afficher un contenu supplémentaire ou de recevoir une entrée supplémentaire de la part de marchand ne sont pas entièrement implémentés dans votre application. Pour eux, l'API leur fournit pour rediriger les utilisateurs vers la page correspondante dans Merchant Center, marchand peut effectuer l'action.

  • BUILT_IN_USER_INPUT_ACTIONS: vous pouvez implémenter des actions complexes qui nécessitent les entrées utilisateur en tant que solution intégrée à votre application.

Implémenter une page de diagnostics

Cette section explique comment mettre en œuvre la page "Diagnostic". Il utilise la valeur par défaut (simple) pour gérer des actions complexes comme des redirections vers Merchant Center.

Pour une implémentation plus avancée avec les actions dans l'application, consultez les ressources suivantes et consultez la section Implémenter une action intégrée avec des entrées utilisateur.

Implémentation

Voici comment nous vous suggérons le flux de votre page "Diagnostic" :

  1. Un marchand ouvre une page de diagnostics dans votre application.

  2. Votre application demande des diagnostics en appelant le service MerchantSupport.

    Voici un exemple de requête:

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

    Remplacez {merchantId} par l'identifiant unique du compte pour lequel vous souhaitez déclencher le traitement de l'action.

  3. Votre application affiche les diagnostics et les actions recommandées à partir de la réponse au marchand. Voici un exemple de réponse :

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

    Nous vous recommandons d'afficher les problèmes dans l'ordre de retour, avec title et impact.message. Nous vous recommandons également d'afficher impact.breakdowns du problème lorsque le marchand pointe dessus un titre ou une description.

  4. Le marchand clique sur un problème dans la liste.

  5. Votre application affiche le impact détaillé de chaque problème par country, destination, prerendered_content et boutons pour le actions que le marchand peut utiliser pour résoudre le problème. Il y a différents types d'actions:

    1. Actions externes: pointez vers la page externe, par exemple dans Merchant Center, où le marchand peut résoudre le problème.
    2. Actions simples intégrées: pointez vers la page de votre application où le marchand peut résoudre le problème.
    3. Actions de saisie utilisateur intégrées: ouvre une boîte de dialogue dans laquelle le marchand peut fournir les informations requises et demander une action. Ce type de n'est disponible que si BUILT_IN_USER_INPUT_ACTIONS était demandée.

  6. Le marchand suit les instructions pour résoudre le problème.

  7. Le marchand actualise la page "Diagnostic" de votre application.

  8. Votre application envoie une autre demande au service MerchantSupport, et affiche une liste actualisée des problèmes.

Vous pouvez comparer les informations affichées par votre application finale avec les pages "Diagnostic" de Merchant Center d'assistance pour valider votre la mise en œuvre.

Simulations d'interface utilisateur

Voici un exemple de la façon dont vous pouvez afficher les informations du Réponse renderaccountissues sur la page "Diagnostic" de votre compte. Les objets du L'interface utilisateur est mappée aux champs d'API correspondants dans la simulation. Vous pouvez créer une instance pour les problèmes liés aux produits.

image

Voici à quoi ressemble la page de diagnostic du compte qui s'affiche:

image

Appliquer un style au code HTML prérendu

La réponse à l'appel du service MerchantSupport inclut prerendered_content, les détails de chaque problème au format HTML. Vous pouvez intégrer directement dans votre interface utilisateur pour afficher le problème dans un format .

Vous verrez peut-être des éléments HTML avec la classe new-element. new-element est appliquée aux éléments qui sont ajoutés au code HTML après l'intégration avec le service MerchantSupport. Nous vous recommandons de masquer les éléments avec la classe new-element, afin de pouvoir appliquer un style à ces éléments avant qu'ils ne soient affichés sur d'utilisateurs dans votre application.

Voici un exemple de valeur du champ 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>

Voici comment cela se présente si vous avez intégré le code HTML précédent prerendered_content dans votre application sans style:

image

Vous pouvez utiliser plusieurs classes CSS pour ajuster la façon dont le contenu s'affiche dans votre interface utilisateur. Voici un exemple CSS que vous pouvez utiliser:

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

Voici à quoi ressemble le contenu affiché avec le CSS précédent:

image

Vous pouvez également configurer et afficher des info-bulles avec CSS:

image

Implémenter une action intégrée avec entrée utilisateur

Une action intégrée avec entrée utilisateur vous permet de fournir un diagnostic complexe en tant que solution intégrée à votre application. Nous vous recommandons d'implémenter comme une boîte de dialogue dans laquelle le marchand peut donner son avis, lire plus les informations requises, puis confirmez la demande.

Chaque action contient un ou plusieurs flux d'actions. Pour certaines actions, il peut y avoir plusieurs flux. Par exemple, il peut y avoir un flux différent lorsque le marchand demande un nouvel examen, car il n'est pas d'accord avec la décision et un flux différent lorsqu'ils ont déjà résolu le problème.

Pour demander des données en vue d'implémenter des actions complexes avec des entrées utilisateur, vous devez définir le champ user_input_action_option sur la valeur 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"
}

Remplacez {merchantId} par l'identifiant unique du compte pour lequel vous souhaitez déclencher le traitement de l'action.

Implémentation

Voici comment nous suggérons le flux de votre page "Diagnostic" qui demande l'accès l'entrée doit se présenter comme suit:

  1. Le marchand clique sur le bouton d'action.

    • Si plusieurs flux sont disponibles, votre application les propose tous. le marchand peut en sélectionner un en fonction de son intention.
    • Le marchand sélectionne le flux.

  2. Votre application affiche le titre, le message, l'accroche et le formulaire de saisie utilisateur pour le le flux d'action sélectionné. Nous vous recommandons d'afficher ces informations .

    • S'il est présent, l'accroche contient des informations importantes visant à aider au marchand de mieux comprendre le fonctionnement de l'action et ce qu'il doit faire pour réussir. Nous vous recommandons de mettre en surbrillance ce message et de lui appliquer un style. en fonction de la gravité de l'appel.
    • S'il existe des champs de saisie dans le flux, ils doivent être affichés pour que marchand peut fournir des valeurs. Si le champ de saisie est marqué comme obligatoire, votre application ne doit pas autoriser le marchand à envoyer la demande à fournir la valeur.

  3. Le marchand lit les informations et fournit les valeurs demandées.

  4. Le marchand confirme sa demande en cliquant sur le bouton.

  5. Votre application déclenche le traitement de l'action en appelant la méthode Service MerchantSupport. Voici un exemple de requête:

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

    Remplacez {merchantId} par l'identifiant unique du compte pour lequel vous souhaitez déclencher le traitement de l'action.

    Afin d'accéder à la méthode triggeraction pour BuiltInUserInputAction, envoyez une à l'aide de ce .

  6. Votre application affiche le message de confirmation renvoyé par MerchantSupport Google Cloud.

    • Si le service renvoie une erreur de validation avec l'adresse e-mail INVALID_ARGUMENT l'état, il contient des informations détaillées et message d'erreur localisé qui doit s'afficher pour le marchand. Nous vous recommandons affichant une telle erreur à proximité du champ de saisie concerné. Voici un exemple : d'un exemple de réponse:
    {
  "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 le service renvoie un état non valide ou une erreur interne, signalé par le les états FAILED_PRECONDITION et INTERNAL, l'application doit indiquer au marchand pour actualiser la page ou réessayer plus tard.