向商家顯示問題和解決方案

本指南說明第三方應用程式開發人員如何使用 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。

如要透過應用程式內動作進行更進階的實作,請參閱下列章節,並參閱「實作內建動作並接收使用者輸入內容」。

導入作業

建議診斷頁面的流程如下:

  1. 商家在應用程式中開啟診斷頁面。
  2. 您的應用程式會呼叫 MerchantSupport 服務,要求進行診斷。

    以下是範例要求:

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

    {merchantId} 替換為要觸發動作處理程序的帳戶專屬 ID。

  3. 應用程式會向商家顯示回應中的診斷結果和建議動作。回覆範例如下:

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

    建議您按照系統傳回問題的順序顯示問題,並使用 titleimpact.message。我們也建議在商家將滑鼠游標懸停在問題標題或說明上時,顯示問題的impact.breakdowns

  4. 商家從清單中點選問題。

  5. 應用程式會顯示每個問題的詳細impact,並依countrydestinationprerendered_contentprerendered_out_of_court_dispute_settlement和按鈕分類,方便商家採取actions解決問題。動作類型如下:

    1. 外部動作:指向外部頁面,例如 Merchant Center,商家可以在該處解決問題。
    2. 內建簡易動作:指向應用程式中的頁面,商家可以在該頁面解決問題。
    3. 內建使用者輸入動作:開啟對話方塊,商家可在其中提供必要資訊並要求執行動作。只有在要求 BUILT_IN_USER_INPUT_ACTIONS 時,才能使用這類動作。
  6. 商家按照操作說明解決問題。

  7. 商家重新載入應用程式中的診斷頁面。

  8. 應用程式會向 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。

導入作業

以下是我們建議的診斷頁面流程,要求使用者輸入內容時應如下所示:

  1. 商家點選動作按鈕。

    • 如果有多個流程可用,應用程式會提供所有流程,商家可根據意圖選取其中一個。
    • 商家選取流程。
  2. 應用程式會顯示所選動作流程的標題、訊息、附註和使用者輸入表單。建議您在對話方塊中顯示這些詳細資料。

    • 如有附註,其中會包含重要資訊,協助商家進一步瞭解動作的運作方式,以及如何採取行動來提高成功率。建議您醒目顯示這則訊息,並根據附註的嚴重程度設定樣式。
    • 如果流程中有任何輸入欄位,就必須顯示這些欄位,商家才能提供值。如果輸入欄位標示為「必填」,則商家提供值之前,應用程式不應允許商家傳送要求。
  3. 商家會讀取這項資訊,並提供要求的值。

  4. 商家按一下按鈕確認要求。

  5. 應用程式會呼叫 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。

    如要存取 BuiltInUserInputActiontriggeraction 方法,請使用這份表單提出要求。

  6. 應用程式會顯示服務傳回的確認訊息。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_PRECONDITIONINTERNAL 狀態表示),應用程式應指示商家重新載入頁面或稍後再試。