Cette page explique comment les développeurs d'applications tierces peuvent utiliser le service de résolution des problèmes pour créer une page de diagnostic dans leur application.
Vous pouvez utiliser l'API Accounts pour consulter les problèmes ayant un impact sur votre compte d'entreprise et sur tous les comptes auxquels vous avez accès.
Vous êtes tenu de respecter les règles concernant les annonces Shopping et les fiches gratuites. Google Shopping se réserve le droit de faire appliquer ces règles et de prendre les mesures appropriées si nous détectons un contenu ou un comportement qui n'y est pas conforme.
Vous pouvez utiliser ce service pour créer des UI semblables aux pages Diagnostic du compte et Problèmes liés aux produits de Merchant Center.
Le service de résolution des problèmes n'est disponible que pour les UI tierces. Les demandes doivent être déclenchées lorsqu'une entreprise interagit avec l'UI de votre application. Pour automatiser les diagnostics de votre propre compte d'entreprise, consultez le guide sur les problèmes liés à votre compte.
Nous vous recommandons de fournir les pages suivantes dans votre application pour aider votre entreprise à résoudre les problèmes :
- Diagnostics des comptes
- Diagnostic des produits
Différentes options pour implémenter une page de diagnostic
Vous pouvez implémenter la page de diagnostic de différentes manières. En fonction de vos besoins, choisissez l'option qui détermine la complexité des actions de diagnostic. Dans la requête, vous pouvez définir user_input_action_option sur l'une des options suivantes :
REDIRECT_TO_MERCHANT_CENTER: il s'agit de l'option par défaut. Les actions qui nécessitent l'affichage de contenu supplémentaire ou la réception d'informations supplémentaires de la part de l'entreprise ne sont pas entièrement implémentées dans votre application. Pour celles-ci, l'API fournit un lien permettant de rediriger l'utilisateur vers la page correspondante dans Merchant Center, où l'entreprise peut effectuer l'action.BUILT_IN_USER_INPUT_ACTIONS: vous pouvez implémenter des actions complexes qui nécessitent la saisie d'informations par l'utilisateur en tant que solution intégrée à votre application.
Implémenter une page de diagnostic
Cette section explique comment implémenter la page de diagnostic. Il utilise l'option par défaut (simple) pour gérer les actions complexes en tant que redirections vers Merchant Center.
Pour une implémentation plus avancée avec des actions dans l'application, consultez les sections suivantes et Implémenter une action intégrée avec saisie utilisateur.
Implémentation
Voici à quoi devrait ressembler le flux de votre page de diagnostic :
- Une entreprise ouvre une page de diagnostic dans votre application.
- Votre application demande des diagnostics en appelant le service
issueresolution.
Voici un exemple de requête :
POST https://merchantapi.googleapis.com/issueresolution/v1/accounts/{ACCOUNT_ID}:renderaccountissues?timeZone=America/Los_Angeles&languageCode=en-GB { }
Remplacez {ACCOUNT_ID} par l'identifiant unique du compte pour lequel vous souhaitez déclencher le traitement de l'action.
Votre application affiche les diagnostics et les actions recommandées de la réponse à l'entreprise. Voici un exemple de réponse :
{ "renderedIssues": [ { "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 } ], "prerenderedOutOfCourtDisputeSettlement": "\u003cdetails class=\"ods-section\"\u003e\u003csummary\u003eShow additional options available to you\u003c/summary\u003e\u003cp class=\"ods-description\"\u003e\u003cspan class=\"segment\"\u003eYou may have the option to request an external appeal. You'll also be asked to provide your routing and reference IDs.\u003c/span\u003e \u003ca href=\"https://support.google.com/european-union-digital-services-act-redress-options?hl=en-GB\" target=\"_blank\" class=\"segment\"\u003eLearn more about external appeals\u003c/a\u003e\u003c/p\u003e\u003cp class=\"ods-param ods-routing-id\"\u003e\u003cspan class=\"segment ods-param-header\"\u003eRouting ID:\u003c/span\u003e \u003cspan class=\"segment ods-param-value\"\u003eRDAX\u003c/span\u003e\u003c/p\u003e\u003cp class=\"ods-param ods-reference-id\"\u003e\u003cspan class=\"segment ods-param-header\"\u003eReference ID:\u003c/span\u003e \u003cspan class=\"segment ods-param-value\"\u003e672911686\u003c/span\u003e\u003c/p\u003e\u003c/details\u003e" }, { "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 } ] } ] }Nous vous recommandons d'afficher les problèmes dans l'ordre dans lequel ils sont renvoyés, avec
titleetimpact.message. Nous vous recommandons également d'afficher leimpact.breakdownsdu problème lorsque l'utilisateur pointe sur le titre ou la description du problème.L'établissement clique sur un problème dans la liste.
Votre application affiche les
impactdétaillés de chaque problème parcountry,destination,prerendered_content,prerendered_out_of_court_dispute_settlementet les boutons pour lesactionsque l'établissement peut prendre pour résoudre le problème. Il existe différents types d'actions :- Actions externes : pointez vers la page externe, par exemple dans Merchant Center, où l'entreprise peut résoudre le problème.
- Actions simples intégrées : pointez vers la page de votre application où l'entreprise peut résoudre le problème.
- Actions intégrées de saisie par l'utilisateur : ouvrez une boîte de dialogue dans laquelle l'entreprise peut fournir les informations requises et demander l'action. Ce type d'action n'est disponible que si le
BUILT_IN_USER_INPUT_ACTIONSa été demandé.
- L'établissement suit les instructions pour résoudre le problème.
- L'entreprise recharge la page de diagnostic dans votre application.
- Votre application envoie une autre requête au service
IssueResolutionet affiche une liste actualisée des problèmes.
Vous pouvez comparer les informations affichées par votre application terminée aux pages de diagnostic de Merchant Center pour vérifier votre implémentation.
Maquettes de l'UI
Voici un exemple de la façon dont vous pouvez afficher les informations de la réponse renderaccountissues sur la page de diagnostic de votre compte. Les objets de l'interface utilisateur sont mappés aux champs d'API correspondants dans la simulation. Vous pouvez créer une page similaire pour les problèmes liés aux produits.
Voici à quoi ressemble la page de diagnostic du compte une fois remplie :
Styliser le code HTML prérendu
La réponse à l'appel du service de résolution des problèmes inclut le champ prerendered_content, qui contient les détails de chaque problème au format HTML. Vous pouvez intégrer ce contenu HTML directement dans votre UI pour afficher le problème dans un format lisible.
Vous pouvez voir des éléments HTML avec la classe new-element. La classe new-element est appliquée aux éléments ajoutés au code HTML après l'intégration au service IssueResolution. Nous vous recommandons de masquer les éléments avec la classe new-element afin de pouvoir les styliser avant qu'ils ne soient affichés aux 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 à quoi cela ressemble si vous avez intégré le code HTML prerendered_content précédent dans votre application sans aucun style :
Vous pouvez utiliser plusieurs classes CSS pour ajuster la façon dont le contenu s'affiche dans votre UI. Voici un exemple de 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 rendu si vous utilisez le CSS précédent :
Vous pouvez également configurer et afficher des info-bulles avec CSS :
Implémenter une action intégrée avec saisie utilisateur
Une action intégrée avec saisie utilisateur vous permet de fournir une fonctionnalité de diagnostic complexe en tant que solution intégrée à votre application. Nous vous recommandons de l'implémenter sous forme de boîte de dialogue dans laquelle l'établissement peut fournir des informations, lire des informations supplémentaires et confirmer la demande.
Chaque action contient un ou plusieurs flux d'actions. Pour certaines actions, il peut y avoir plusieurs flux. Par exemple, le parcours peut être différent selon que l'établissement demande un nouvel examen parce qu'il n'est pas d'accord avec la décision ou qu'il a déjà résolu le problème.
Pour demander des données afin 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://merchantapi.googleapis.com/issueresolution/v1/accounts/{ACCOUNT_ID}:renderaccountissues?timeZone=America/Los_Angeles&languageCode=en-GB
{
"user_input_action_option": "BUILT_IN_USER_INPUT_ACTIONS"
}
Remplacez {ACCOUNT_ID} par l'identifiant unique du compte pour lequel vous souhaitez déclencher le traitement de l'action.
Implémentation
Voici comment nous vous suggérons de structurer la page de diagnostic qui demande à l'utilisateur de saisir des informations :
L'utilisateur clique sur le bouton d'action.
- Si plusieurs flux sont disponibles, votre application les propose tous afin que l'utilisateur puisse en sélectionner un en fonction de son intention.
- L'utilisateur sélectionne le flux.
Votre application affiche le titre, le message, l'encadré et le formulaire de saisie utilisateur pour le flux d'actions sélectionné. Nous vous recommandons d'afficher ces informations dans une boîte de dialogue.
- L'encadré, le cas échéant, contient des informations importantes visant à aider l'utilisateur à mieux comprendre le fonctionnement de l'action et ce qu'il doit faire pour réussir. Nous vous recommandons de mettre en évidence ce message et de le mettre en forme en fonction de la gravité de l'appel.
- Si le flux contient des champs de saisie, ils doivent être affichés pour que l'utilisateur puisse fournir des valeurs. Si le champ de saisie est marqué comme obligatoire, votre application ne doit pas permettre à l'établissement d'envoyer la demande avant qu'il n'ait fourni la valeur.
L'utilisateur lit les informations et fournit les valeurs demandées.
L'utilisateur confirme sa demande en cliquant sur le bouton.
Votre application déclenche le traitement de l'action en appelant le service de résolution des problèmes. Voici un exemple de requête :
POST https://merchantapi.googleapis.com/issueresolution/v1/accounts/{ACCOUNT_ID}:triggeraction { actionContext: "ActionContextValue=", actionInput: { actionFlowId: "flow1", inputValues: [ { input_field_id: "input1", checkbox_input_value: { value: true } } ] }Remplacez {ACCOUNT_ID} par l'identifiant unique du compte pour lequel vous souhaitez déclencher le traitement de l'action.
Pour accéder à la méthode
triggeractionpourBuiltInUserInputAction, envoyez une demande à l'aide de ce formulaire.Votre application affiche le message de confirmation renvoyé par le service
IssueResolution.- Si le service renvoie une erreur de validation avec l'état
INVALID_ARGUMENT, il contient des informations détaillées et un message d'erreur localisé qui doivent être affichés à l'entreprise. Nous vous recommandons d'afficher cette erreur à proximité du champ de saisie concerné. Voici 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, indiqués par les états
FAILED_PRECONDITIONetINTERNAL, l'application doit demander à l'établissement d'actualiser la page ou de réessayer plus tard.
- Si le service renvoie une erreur de validation avec l'état