本指南說明第三方應用程式開發人員如何使用 MerchantSupport 服務，為商家建立應用程式內診斷頁面。
您可以使用這項服務，建立類似 Merchant Center 帳戶診斷和產品問題頁面的 UI。
MerchantSupport 服務僅適用於第三方 UI。商家與應用程式 UI 互動時，應觸發要求。如要為自家商家帳戶自動執行診斷作業，請參閱「帳戶狀態」、「產品狀態」和「產品篩選器」指南。
建議您在應用程式中提供下列頁面，協助商家排解問題：
- 帳戶診斷
- 產品診斷
實作診斷頁面的不同選項
您可以透過不同方式實作診斷頁面。根據您的需求，選擇決定如何處理複雜的診斷動作的選項。您可以在要求中將 user_input_action_option 設為下列其中一個選項：
REDIRECT_TO_MERCHANT_CENTER：這是預設選項。需要顯示額外內容或接收商家額外輸入內容的動作，並未在應用程式中完整實作。針對這類動作，API 會提供連結，將商家導向 Merchant Center 中的對應頁面，讓商家執行該動作。BUILT_IN_USER_INPUT_ACTIONS：您可以在應用程式中，將需要使用者輸入的複雜動作，做為應用程式內解決方案來實作。
實作診斷頁面
本節將說明如何導入診斷頁面。這個選項會使用預設 (簡單) 選項，處理將複雜動作重新導向至 Merchant Center 的情況。
如要進一步瞭解如何在應用程式內實作動作，請參閱下列章節和「實作內建動作，並接受使用者輸入」一文。
實作
以下是我們建議的診斷頁面流程：
- 商家在應用程式中開啟診斷頁面。
應用程式會呼叫
MerchantSupport服務，要求診斷資訊。以下是範例要求：
POST https://shoppingcontent.googleapis.com/content/v2.1/{merchantId}/merchantsupport/renderaccountissues?timeZone=America/Los_Angeles&languageCode=en-GB {}將 {merchantId} 替換為您要觸發處理動作的帳戶專屬 ID。
應用程式會顯示商家回應中的診斷資訊和建議動作。以下是回覆範例：
{ "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 } ], "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 } ] } ] }建議您依照問題傳回的順序，使用
title和impact.message顯示問題。此外，當商家將滑鼠游標懸停在問題標題或說明上時，建議您一併顯示問題的impact.breakdowns。商家點選清單中的某個問題。
您的應用程式會針對每個
country、destination、prerendered_content、prerendered_out_of_court_dispute_settlement和商家可採取的actions按鈕，顯示每個問題的詳細impact。行動分為以下幾種類型：- 外部動作：指向外部頁面，例如 Merchant Center，讓商家解決問題。
- 內建簡單動作：將使用者導向應用程式中的頁面，讓商家解決問題。
- 內建使用者輸入動作：開啟對話方塊，讓商家提供必要資訊並要求執行動作。只有在要求
BUILT_IN_USER_INPUT_ACTIONS時，才能使用這類動作。
商家按照操作說明解決問題。
商家會重新載入應用程式中的診斷頁面。
應用程式會向
MerchantSupport服務提交另一項要求，並顯示更新後的問題清單。
您可以將完成的應用程式顯示的資訊，與 Merchant Center 中的診斷頁面進行比較，以驗證導入方式。
UI 模擬
以下範例說明如何在帳戶診斷頁面中顯示 renderaccountissues 回應中的資訊。在模擬資料中，UI 中的物件會對應至相應的 API 欄位。您可以為產品問題建立類似的頁面。
填入資料後的帳戶診斷頁面如下所示：
設定預先轉譯的 HTML 樣式
呼叫 MerchantSupport 服務的回應包含 prerendered_content 欄位，也就是每個問題的 HTML 詳細資料。回應中也可以包含 prerendered_out_of_court_dispute_settlement 欄位，這是一組 HTML 指示，說明如何在庭外解決爭議。您可以直接將此 HTML 內容嵌入 UI，以可讀格式顯示問題。
設定預先轉譯的 HTML 內容樣式
您可能會看到具有 new-element 類別的 HTML 元素。整合 MerchantSupport 服務後，new-element 類別會套用至新增至 HTML 的元素。建議您使用 new-element 類別隱藏元素，這樣就能在這些元素顯示在應用程式中之前，為其設定樣式。
以下是 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>
如果您在應用程式中嵌入上述 HTML prerendered_content 而未設定任何樣式，結果會如下所示：
您可以使用多個 CSS 類別，調整內容在 UI 中顯示的方式。以下是可用的 CSS 範例：
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;
}
以下是使用上述 CSS 後，轉譯後的內容外觀：
您也可以使用 CSS 設定及顯示工具提示：
為庭外爭議調解提供預先轉譯的 HTML 樣式
以下是 prerendered_out_of_court_dispute_settlement 欄位值的範例：
<details class="ods-section" open="">
<summary>Show additional options available to you</summary>
<p class="ods-description">
<span class="segment">You may have the option to request an external appeal. You'll also be asked to provide your routing and reference IDs.</span>
<a href="https://support.google.com/european-union-digital-services-act-redress-options?hl=en-US"
target="_blank" class="segment">Learn more about external appeals</a>
</p>
<p class="ods-param ods-routing-id">
<span class="segment ods-param-header">Routing ID:</span>
<span class="segment ods-param-value">RDAX</span>
</p>
<p class="ods-param ods-reference-id">
<span class="segment ods-param-header">Reference ID:</span>
<span class="segment ods-param-value">672911686</span>
</p>
</details>
如果您在應用程式中嵌入上述 HTML prerendered_out_of_court_dispute_settlement 而未設定任何樣式，結果會如下所示：
您可以使用多個 CSS 類別，調整這個部分在 UI 中顯示的方式。以下是可用的 CSS 範例：
.ods-param-value {
background: #dee1e37d;
font-family: monospace, monospace;
padding: 3px;
}
.ods-param-header {
font-size: .75rem;
}
.ods-section summary {
font-size: .75rem;
}
以下是使用上述 CSS 後，轉譯後的內容外觀：
使用使用者輸入內容實作內建動作
內建動作可搭配使用者輸入內容，讓您在應用程式中提供複雜的診斷功能，做為應用程式內解決方案。建議您將其做為對話方塊導入，讓商家提供輸入內容、閱讀其他資訊，並確認要求。
每個動作都包含一或多個動作流程。某些動作可能會有多個流程。舉例來說，如果商家不同意決定，要求進行額外審查，流程可能會有所不同；如果商家已修正問題，流程也可能有所不同。
如要要求資料，以便透過使用者輸入內容執行複雜動作，您必須將 user_input_action_option 欄位設為 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"
}
將 {merchantId} 替換為您要觸發處理動作的帳戶專屬 ID。
實作
以下是建議的診斷頁面流程，要求使用者輸入資料：
商家點選動作按鈕。
- 如果有多個可用流程，應用程式會提供所有流程，讓商家根據意圖選取其中一個。
- 商家選取流程。
應用程式會針對所選動作流程顯示標題、訊息、說明文字和使用者輸入表單。建議您在對話方塊中顯示這些詳細資料。
- 若有附註，其中會包含重要資訊，協助商家進一步瞭解動作的運作方式，以及如何成功完成動作。建議您根據提示的嚴重程度，醒目顯示這則訊息並設定樣式。
- 如果流程中有任何輸入欄位，則必須顯示這些欄位，以便商家提供值。如果輸入欄位標示為「必要」，則應用程式不應在商家提供值之前，就讓商家傳送要求。
商家會讀取資訊並提供要求的值。
商家按一下按鈕確認要求。
應用程式會呼叫
MerchantSupport服務，觸發動作的處理程序。以下是範例要求：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 } } ] }將 {merchantId} 替換為您要觸發處理動作的帳戶專屬 ID。
如要存取
BuiltInUserInputAction的triggeraction方法，請使用這份表單提交要求。應用程式會顯示
MerchantSupport服務傳回的確認訊息。- 如果服務傳回驗證錯誤，並顯示
INVALID_ARGUMENT狀態，則會包含詳細資訊和應顯示給商家的本地化錯誤訊息。建議您將這類錯誤訊息顯示在受影響的輸入欄位附近。以下是範例回應：
{ "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" } ] } ] } }- 如果服務傳回無效狀態或內部錯誤 (以
FAILED_PRECONDITION和INTERNAL狀態表示)，應用程式應指示商家重新載入網頁，或稍後再試一次。
- 如果服務傳回驗證錯誤，並顯示