In diesem Leitfaden wird erläutert, wie Entwickler von Drittanbieter-Apps mit dem Dienst MerchantSupport eine In-App-Diagnoseseite für ihre Händler erstellen können.
Sie können diesen Dienst verwenden, um UIs zu erstellen, die den Merchant Center-Seiten Kontodiagnose und Produktprobleme ähneln.
Der MerchantSupport-Dienst ist nur für Benutzeroberflächen von Drittanbietern verfügbar. Anfragen sollten ausgelöst werden, wenn ein Händler mit der Benutzeroberfläche Ihrer App interagiert. Informationen zum Automatisieren der Diagnose für dein eigenes Händlerkonto findest du in den Leitfäden Kontostatus, Produktstatus und Produktfilterung.
Wir empfehlen dir, die folgenden Seiten in deiner App bereitzustellen, um deine Händler bei der Fehlerbehebung zu unterstützen:
- Kontodiagnose
- Produktdiagnose
Verschiedene Optionen zum Implementieren einer Diagnoseseite
Sie können die Diagnoseseite auf verschiedene Arten implementieren. Wählen Sie je nach Bedarf die Option aus, die bestimmt, wie komplexe Diagnoseaktionen verarbeitet werden. In der Anfrage können Sie für user_input_action_option eine der folgenden Optionen festlegen:
REDIRECT_TO_MERCHANT_CENTER: Das ist die Standardoption. Aktionen, für die zusätzliche Inhalte angezeigt werden müssen oder für die zusätzliche Informationen vom Händler erforderlich sind, werden in deiner App nicht vollständig implementiert. Für diesen Vorgang stellt die API einen Link zur Weiterleitung auf die entsprechende Seite im Merchant Center bereit, auf der der Händler die Aktion ausführen kann.BUILT_IN_USER_INPUT_ACTIONS: Sie können komplexe Aktionen, die eine Nutzereingabe als In-App-Lösung erfordern, in Ihrer Anwendung implementieren.
Diagnoseseite implementieren
In diesem Abschnitt wird beschrieben, wie Sie die Seite „Diagnose“ implementieren. Sie verwendet die einfache Standardoption, um komplexe Aktionen als Weiterleitungen zum Merchant Center zu verarbeiten.
Eine erweiterte Implementierung mit In-App-Aktionen finden Sie in den folgenden Abschnitten unter Integrierte Aktion mit Nutzereingabe implementieren.
Implementierung
Die Diagnoseseite sollte wie folgt aussehen:
- Ein Händler öffnet die Diagnoseseite in Ihrer App.
Deine App fordert durch Aufrufen des Dienstes
MerchantSupporteine Diagnose an.Hier ist eine Beispielanfrage:
POST https://shoppingcontent.googleapis.com/content/v2.1/{merchantId}/merchantsupport/renderaccountissues?timeZone=America/Los_Angeles&languageCode=en-GB {}Ersetzen Sie {merchantId} durch die eindeutige ID des Kontos, für das Sie die Verarbeitung der Aktion auslösen möchten.
Deine App zeigt die Diagnosedaten und die empfohlenen Maßnahmen aus der Antwort an den Händler an. Sie sehen hier ein Beispiel:
{ "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" } }Wir empfehlen dir, die Probleme in der Reihenfolge anzugeben, in der sie zurückgegeben wurden, mit
titleundimpact.message. Wir empfehlen außerdem, dieimpact.breakdownsdes Problems einzublenden, wenn der Händler den Mauszeiger auf den Titel oder die Beschreibung des Problems bewegt.Der Händler klickt in der Liste auf ein Problem.
In deiner App werden die detaillierten
impactjedes Problems procountry,destination,prerendered_contentund Schaltflächen für dieactionsangezeigt, mit denen der Händler das Problem beheben kann. Es gibt verschiedene Arten von Aktionen:- Externe Aktionen: Bewegen Sie den Mauszeiger auf die externe Seite, z. B. im Merchant Center, wo der Händler das Problem beheben kann.
- Integrierte einfache Aktionen: Bewegen Sie den Mauszeiger auf die Seite in Ihrer App, auf der der Händler das Problem beheben kann.
- Integrierte Aktionen für Nutzereingabe: Öffnet ein Dialogfeld, in dem der Händler die erforderlichen Informationen angeben und die Aktion anfordern kann. Diese Art von Aktion ist nur verfügbar, wenn
BUILT_IN_USER_INPUT_ACTIONSangefordert wurde.
Der Händler folgt den Anweisungen, um das Problem zu beheben.
Der Händler aktualisiert die Diagnoseseite in Ihrer App.
Ihre Anwendung sendet eine weitere Anfrage an den Dienst
MerchantSupportund zeigt eine aktualisierte Liste der Probleme an.
Sie können die Informationen, die von der fertigen Anwendung angezeigt werden, mit den Diagnoseseiten im Merchant Center vergleichen, um Ihre Implementierung zu prüfen.
UI-Modelle
Hier sehen Sie ein Beispiel dafür, wie Sie die Informationen aus der renderaccountissues-Antwort auf der Seite „Kontodiagnose“ anzeigen lassen können. Objekte werden auf der Benutzeroberfläche den entsprechenden API-Feldern in der Simulation zugeordnet. Sie können eine ähnliche
Seite für Produktprobleme erstellen.
So sieht die Diagnoseseite des Kontos aus:
Stil für vorgerenderten HTML-Code gestalten
Die Antwort auf den Aufruf des MerchantSupport-Dienstes enthält das Feld prerendered_content und die Details zu jedem Problem in HTML. Sie können diesen HTML-Inhalt direkt in Ihre UI einbetten, um das Problem in einem lesbaren Format darzustellen.
Möglicherweise sehen Sie HTML-Elemente mit der Klasse new-element. Die Klasse new-element wird auf Elemente angewendet, die dem HTML-Code nach der Integration in den MerchantSupport-Dienst hinzugefügt wurden. Wir empfehlen, Elemente mit der Klasse new-element auszublenden. So können Sie diese Elemente gestalten, bevor sie Nutzern in Ihrer App angezeigt werden.
Hier ein Beispiel für den Feldwert 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>
Wenn Sie den vorherigen HTML-Code prerendered_content ohne Stile in Ihre App eingebettet haben, sieht das so aus:
Sie können mehrere CSS-Klassen verwenden, um anzupassen, wie die Inhalte auf Ihrer Benutzeroberfläche gerendert werden. Hier ist ein CSS-Beispiel, das Sie verwenden können:
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;
}
So sieht der gerenderte Inhalt aus, wenn Sie den vorherigen CSS-Code verwenden:
Sie können Kurzinfos auch mit CSS konfigurieren und anzeigen lassen:
Integrierte Aktion mit Nutzereingabe implementieren
Mit einer integrierten Aktion mit Nutzereingabe können Sie in Ihrer App eine komplexe Diagnosefunktion als In-App-Lösung bereitstellen. Wir empfehlen, sie als Dialogfeld zu implementieren, in dem der Händler seine Angaben machen, zusätzliche Informationen lesen und die Anfrage bestätigen kann.
Jede Aktion enthält einen oder mehrere Aktionsabläufe. Bei einigen Aktionen kann es mehr als einen Ablauf geben. Es kann beispielsweise ein anderer Ablauf geben, wenn der Händler um eine weitere Überprüfung bittet, weil er mit der Entscheidung nicht einverstanden ist, und einen anderen Ablauf, wenn er das Problem bereits behoben hat.
Wenn Sie Daten anfordern möchten, um komplexe Aktionen mit Nutzereingaben zu implementieren, müssen Sie das Feld user_input_action_option auf den Wert BUILT_IN_USER_INPUT_ACTIONS setzen.
POST https://shoppingcontent.googleapis.com/content/v2.1/{merchantId}/merchantsupport/renderaccountissues
{
"user_input_action_option": "BUILT_IN_USER_INPUT_ACTIONS"
}
Ersetzen Sie {merchantId} durch die eindeutige ID des Kontos, für das Sie die Verarbeitung der Aktion auslösen möchten.
Implementierung
Der Ablauf auf der Diagnoseseite, mit der Nutzereingaben angefordert werden, sollte wie folgt aussehen:
Der Händler klickt auf die Aktionsschaltfläche.
- Wenn mehrere Abläufe verfügbar sind, werden in deiner App alle angeboten, sodass der Händler je nach Absicht einen auswählen kann.
- Der Händler wählt den Vorgang aus.
In Ihrer App werden der Titel, die Nachricht, die Zusatzinformationen und das Nutzereingabeformular für den ausgewählten Aktionsablauf angezeigt. Wir empfehlen, diese Details in einem Dialogfeld anzuzeigen.
- Der Callout enthält wichtige Informationen, die dem Händler helfen sollen, besser zu verstehen, wie die Aktion funktioniert und wie er erfolgreich sein kann. Wir empfehlen, diese Mitteilung hervorzuheben und entsprechend der Wichtigkeit des Callouts zu gestalten.
- Wenn der Ablauf Eingabefelder enthält, müssen diese angezeigt werden, damit der Händler Werte angeben kann. Wenn das Eingabefeld als erforderlich gekennzeichnet ist, sollte der Händler in Ihrer App die Anfrage erst senden können, bevor der Wert angegeben wird.
Der Händler liest die Informationen und stellt die angeforderten Werte bereit.
Der Händler bestätigt seine Anfrage, indem er auf die Schaltfläche klickt.
Die App löst die Verarbeitung der Aktion durch Aufrufen des Dienstes
MerchantSupportaus. Hier ist eine Beispielanfrage: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 } } ] }Ersetzen Sie {merchantId} durch die eindeutige ID des Kontos, für das Sie die Verarbeitung der Aktion auslösen möchten.
Wenn Sie auf die Methode
triggeractionfürBuiltInUserInputActionzugreifen möchten, verwenden Sie dieses Formular.In der Anwendung wird die vom Dienst
MerchantSupportzurückgegebene Bestätigungsnachricht angezeigt.- Wenn der Dienst einen Validierungsfehler mit dem Status
INVALID_ARGUMENTzurückgibt, enthält er detaillierte Informationen und eine lokalisierte Fehlermeldung, die dem Händler angezeigt werden sollten. Wir empfehlen, einen solchen Fehler in der Nähe des betroffenen Eingabefelds anzuzeigen. Hier ist ein Beispiel für eine Beispielantwort:
{ "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" } ] } ] } }- Wenn der Dienst einen ungültigen Status oder einen internen Fehler zurückgibt (durch die Status
FAILED_PRECONDITIONundINTERNALgekennzeichnet), sollte die App den Händler anweisen, die Seite zu aktualisieren oder es später zu versuchen.
- Wenn der Dienst einen Validierungsfehler mit dem Status