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

本指南將說明第三方應用程式開發人員如何使用 MerchantSupport敬上 為商家建立應用程式內診斷頁面的服務。

別擔心！您可以使用 這項服務可以建立與 Merchant Center 帳戶類似的 UI 診斷和產品 問題頁面。

MerchantSupport 服務僅適用於第三方 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} 換成 要觸發處理動作的帳戶。

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

    建議你按照退貨順序顯示問題，並使用 title 和 impact.message。我們也建議您顯示 商家將滑鼠遊標懸停在問題上時，這個問題的 impact.breakdowns 標題或說明

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

  5. 您的應用程式會根據country顯示每個問題的詳細 impact。 destination、prerendered_content和按鈕 ，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 內容直接整合到您的 UI 中，以可讀取的文字 格式。

您可能會看到具有 new-element 類別的 HTML 元素。new-element 類別 會套用至 整合完成後新增至 HTML 的元素 使用 MerchantSupport 服務。建議您使用 類別隱藏元素 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 設定及顯示工具提示：

圖片

根據使用者輸入內容實作內建動作

內建動作結合使用者輸入內容，提供複雜的診斷功能 功能，做為應用程式內解決方案使用。建議您導入 並做為對話方塊，讓商家可以提供輸入內容 ，然後確認要求。

每個動作都包含一或多個動作流程。執行某些動作時 超過一項流程比方說 商家對這項決定有異議，因此要求額外審查 也採取了不同的流程。

如要要求資料，以便透過使用者輸入內容執行複雜動作，您必須設定 將 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} 換成 要觸發處理動作的帳戶。

導入作業

以下說明我們如何建議診斷頁面，以滿足使用者要求的情況 輸入的內容看起來應該像這樣：

  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} 換成 要觸發處理動作的帳戶。

    如要存取 BuiltInUserInputAction 的 triggeraction 方法，請提交 使用 表單。

  6. 您的應用程式會顯示從 MerchantSupport 傳回的確認訊息 課程中也會快速介紹 Memorystore 這是 Google Cloud 的全代管 Redis 服務

    • 如果服務傳回含有 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 狀態，應用程式應指示 商家重新載入網頁或稍後再試。