Z tego przewodnika dowiesz się, jak deweloperzy aplikacji innych firm mogą korzystać z
MerchantSupport
stworzy dla sprzedawców stronę diagnostyki w aplikacji.
Za pomocą do tworzenia interfejsów podobnych do interfejsów konta Merchant Center. diagnostyka i usługa .
Usługa MerchantSupport
jest przeznaczona tylko dla interfejsów innych firm. Żądania powinny być
wywoływane, gdy sprzedawca wchodzi w interakcję z interfejsem aplikacji. Automatyczne
swojego konta sprzedawcy, obejrzyj konto
stan, usługa
stan i produkt
filtrowania.
Zalecamy podanie tych stron w aplikacji, by ułatwić sprzedawców, którzy będą rozwiązywać problemy:
- Diagnostyka konta
- Diagnostyka produktów
Różne opcje implementacji strony diagnostyki
Stronę diagnostyki możesz zaimplementować na różne sposoby. W zależności od potrzeb
wybierz opcję określającą sposób obsługi złożonych działań diagnostycznych. W
możesz ustawić w polu user_input_action_option
jedną z tych wartości
opcje:
REDIRECT_TO_MERCHANT_CENTER
: to jest opcja domyślna. Działania, które mogą wymagać wyświetlania dodatkowych treści lub otrzymywania dodatkowych danych od nie zostały w pełni wdrożone w aplikacji. Interfejs API udostępnia im przekierowujący do odpowiedniej strony w Merchant Center, na której sprzedawca może wykonać to działanie.BUILT_IN_USER_INPUT_ACTIONS
: możesz zaimplementować złożone działania, które wymagają danych wejściowych użytkownika jako rozwiązania w aplikacji.
Wdróż stronę diagnostyki
Z tej sekcji dowiesz się, jak wdrożyć stronę Diagnostyka. Wykorzystuje wartość domyślną (prostą) opcję obsługi złożonych działań jako przekierowań do Merchant Center.
Aby przeprowadzić bardziej zaawansowaną implementację z działaniami w aplikacji, zapoznaj się z tymi artykułami i przeczytaj artykuł Wdrażanie wbudowanego działania na podstawie danych wejściowych użytkownika.
Implementacja
Proponowany przez nas układ strony Diagnostyka powinien wyglądać tak:
- Sprzedawca otwiera w Twojej aplikacji stronę diagnostyki.
Aplikacja prosi o diagnostykę, wywołując usługę
MerchantSupport
.Oto przykładowe żądanie:
POST https://shoppingcontent.googleapis.com/content/v2.1/{merchantId}/merchantsupport/renderaccountissues?timeZone=America/Los_Angeles&languageCode=en-GB {}
Zastąp {merchantId} unikalnym identyfikatorem elementu na koncie, dla którego ma być uruchomione przetwarzanie działania.
Aplikacja wyświetli dane diagnostyczne i zalecane działania określone w odpowiedzi do sprzedawcy. Oto przykładowa odpowiedź:
{ "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" } }
Zalecamy wyświetlanie problemów w takiej kolejności, w jakiej są zwracane,
title
iimpact.message
. Zalecamy również wyświetlanie parametruimpact.breakdowns
problemu, gdy sprzedawca najedzie kursorem na problem tytuł lub opis.Sprzedawca klika problem na liście.
Aplikacja wyświetla szczegółowe
impact
każdego problemu wedługcountry
,destination
,prerendered_content
i przyciski zaactions
, które sprzedawca może wykonać, aby rozwiązać ten problem. Istnieją różne typy działań:- Działania zewnętrzne: wskaż stronę zewnętrzną, np. Merchant Center, gdzie sprzedawca może rozwiązać problem.
- Wbudowane proste czynności: najedź kursorem na stronę w aplikacji, na której że sprzedawca może rozwiązać problem.
- Wbudowane działania dotyczące danych wejściowych użytkownika: otwórz okno, w którym sprzedawca może
podać wymagane informacje i poprosić o podjęcie działania; Ten typ
czynność jest dostępna tylko wtedy, gdy
BUILT_IN_USER_INPUT_ACTIONS
był poproszono o dostęp.
Sprzedawca postępuje zgodnie z instrukcjami, aby rozwiązać problem.
Sprzedawca wczyta ponownie stronę diagnostyki w Twojej aplikacji.
Twoja aplikacja prześle kolejne żądanie do usługi
MerchantSupport
, wyświetla zaktualizowaną listę problemów.
Informacje wyświetlane przez ukończoną aplikację możesz porównać z strony diagnostyki w Merchant Center Center, aby zweryfikować implementacji.
Makiety interfejsu
Oto przykład, jak wyświetlić informacje z
renderaccountissues
odpowiedź na stronie diagnostyki konta. Obiekty w
Interfejs użytkownika jest zmapowany na odpowiednie pola interfejsu API w przykładzie. Możesz utworzyć podobny
w przypadku problemów z produktem.
Tak wygląda zapełniona strona diagnostyki konta:
Styl renderowania wstępnie renderowanego kodu HTML
Odpowiedź wywołana usługi MerchantSupport
zawiera element
prerendered_content
, szczegółowe informacje o poszczególnych problemach w kodzie HTML. Możesz umieścić
bezpośrednio w interfejsie, by przedstawić problem
w czytelny sposób
.
Możesz zobaczyć elementy HTML z klasą new-element
. new-element
jest stosowana do elementów, które zostały dodane do kodu HTML po zintegrowaniu
z usługą MerchantSupport
. Zalecamy ukrywanie elementów za pomocą klasy
new-element
, dzięki czemu możesz dostosować styl tych elementów, zanim zostaną wyświetlone
użytkownikom Twojej aplikacji.
Oto przykład wartości pola 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>
Tak to wygląda, gdy umieścisz poprzedni kod HTML
prerendered_content
w Twojej aplikacji bez określania stylu:
Aby dostosować sposób renderowania treści w interfejsie, możesz użyć wielu klas CSS. Oto przykładowy kod CSS, którego możesz użyć:
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;
}
Oto jak wyglądają renderowane treści, jeśli użyjesz poprzedniego kodu CSS:
Możesz też konfigurować i wyświetlać etykietki, korzystając z CSS:
Wdrażanie wbudowanego działania na podstawie danych wejściowych użytkownika
Wbudowane działanie z informacjami od użytkownika umożliwia przeprowadzanie złożonych diagnostyki jako rozwiązanie wbudowane w aplikację. Zalecamy wdrożenie jako okno dialogowe, w którym sprzedawca może wprowadzić informacje, zapoznaj się z dodatkowymi i potwierdź prośbę.
Każda czynność zawiera co najmniej 1 przepływ działań. W przypadku niektórych działań ich dostępność więcej niż jeden proces. Na przykład może to wyglądać inaczej, gdy sprzedawca prosi o dodatkowe sprawdzenie, ponieważ nie zgadza się z decyzją i inny proces, gdy problem został już rozwiązany.
Aby poprosić o dane potrzebne do implementacji złożonych działań wykonywanych za pomocą danych wejściowych użytkownika, musisz ustawić
w polu user_input_action_option
na wartość 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"
}
Zastąp {merchantId} unikalnym identyfikatorem elementu na koncie, dla którego ma być uruchomione przetwarzanie działania.
Implementacja
Proponujemy, aby strona diagnostyczna, która wysyła żądania użytkowników, dane wejściowe powinny wyglądać tak:
Sprzedawca klika przycisk polecenia.
- Jeśli dostępnych jest kilka przepływów, aplikacja oferuje je wszystkie, więc sprzedawca może wybrać jedną z nich w zależności od tego, co chce osiągnąć.
- Sprzedawca wybiera proces.
Aplikacja wyświetli tytuł, wiadomość, objaśnienie i formularz do wprowadzania danych przez użytkownika w ramach wybranego procesu działania. Zalecamy wyświetlanie tych informacji w .
- Objaśnienie zawiera ważne informacje, które mają pomóc sprzedawcy, aby lepiej zrozumieć, jak to działa i co należy zrobić odnieść sukces. Zalecamy wyróżnienie tej wiadomości i wybranie jej stylu. w zależności od wagi objaśnienia.
- Jeśli w przepływie są jakieś pola do wprowadzania danych, trzeba je wyświetlić, by sprzedawca może podać wartości. Jeśli pole do wprowadzania danych jest oznaczone jako wymagane, aplikacja nie powinna pozwalać sprzedawcy na wysłanie prośby, zanim i podać wartość.
Sprzedawca odczytuje informacje i podaje żądane wartości.
Sprzedawca potwierdza prośbę, klikając przycisk.
Aplikacja wywołuje przetwarzanie działania, wywołując metodę
MerchantSupport
. Oto przykładowe żądanie: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 } } ] }
Zastąp {merchantId} unikalnym identyfikatorem elementu na koncie, dla którego ma być uruchomione przetwarzanie działania.
Aby uzyskać dostęp do metody
triggeraction
w przypadku aplikacjiBuiltInUserInputAction
, prześlij użyj tego formularza.W aplikacji wyświetli się komunikat z potwierdzeniem zwrócony z aplikacji
MerchantSupport
posprzedażna.- Jeśli usługa zwraca błąd weryfikacji z parametrem
INVALID_ARGUMENT
, znajdziesz w nim szczegółowe informacje zlokalizowany komunikat o błędzie, który powinien wyświetlić się sprzedawcy. Zalecamy wyświetlając taki błąd w pobliżu pola do wprowadzania danych, którego dotyczy problem. Oto przykład: przykładowej odpowiedzi:
{ "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" } ] } ] } }
- Jeśli usługa zwraca nieprawidłowy stan lub błąd wewnętrzny, oznaczonych symbolem
FAILED_PRECONDITION
iINTERNAL
, aplikacja powinna wysyłać instrukcje aby ponownie załadować stronę lub spróbować później.
- Jeśli usługa zwraca błąd weryfikacji z parametrem