판매자를 위한 디스플레이 문제 및 해결책

이 가이드에서는 서드 파티 앱 개발자가 MerchantSupport 드림 서비스를 사용하여 판매자를 위한 인앱 진단 페이지를 만듭니다.

이때 판매자 센터 계정과 유사한 UI를 만들 수 있습니다. 진단 및 제품 문제 페이지를 참조하세요.

MerchantSupport 서비스는 서드 파티 UI 전용입니다. 요청은 판매자가 애플리케이션의 UI와 상호작용할 때 트리거됩니다. 자동화하기 위해 자세한 내용은 계정 상태, 제품 제품 상태 및 제품 상태 필터링 가이드를 참고하세요.

앱에 다음 페이지를 제공하여 판매자 문제 해결:

• 계정 진단
• 제품 진단

진단 페이지 구현을 위한 다양한 옵션

진단 페이지는 다양한 방법으로 구현할 수 있습니다. 필요에 따라 복잡한 진단 작업을 처리하는 방법을 결정하는 옵션을 선택합니다. 포함 요청은 user_input_action_option를 다음 중 하나로 설정할 수 있습니다. 옵션:

• REDIRECT_TO_MERCHANT_CENTER: 기본 옵션입니다. 사용자가 추가 콘텐츠를 표시해야 하거나 판매자가 앱에 완전히 구현되지 않았습니다. 이를 위해 API는 링크를 클릭하면 판매자 센터의 해당 페이지로 리디렉션되며 판매자가 작업을 수행할 수 있습니다

• BUILT_IN_USER_INPUT_ACTIONS: 코드가 필요한 복잡한 작업을 사용자 입력을 애플리케이션의 인앱 솔루션으로 사용할 수 있습니다.

진단 페이지 구현

이 섹션에서는 진단 페이지를 구현하는 방법을 설명합니다. 이는 기본 (단순) 옵션을 사용하여 복잡한 작업을 판매자 센터로 리디렉션할 때 처리할 수 있습니다.

인앱 액션을 사용한 고급 구현에 관한 내용은 다음을 검토하세요. 섹션을 확인하고 사용자 입력으로 기본 제공 작업 구현을 참고하세요.

구현

진단 페이지의 흐름은 다음과 같습니다.

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. 외부 작업: 외부 페이지(예: 판매자 센터: 판매자가 문제를 해결할 수 있습니다.
   2. 기본 제공되는 간단한 작업: 애플리케이션에서 판매자가 문제를 해결할 수 있습니다.
   3. 내장된 사용자 입력 작업: 판매자가 직접 입력할 수 있는 대화상자를 엽니다. 필요한 정보를 제공하고 작업을 요청합니다. 이러한 유형의 작업은 BUILT_IN_USER_INPUT_ACTIONS가 다음과 같은 경우에만 사용할 수 있습니다. 있습니다.

6. 판매자는 안내에 따라 문제를 해결합니다.

7. 판매자가 앱의 진단 페이지를 새로고침합니다.

8. 앱이 MerchantSupport 서비스에 또 다른 요청을 제출합니다. 업데이트된 문제 목록이 표시됩니다.

완성된 앱이 표시하는 정보를 다음과 비교할 수 있습니다. 판매자 진단 페이지의 센터를 방문하여 있습니다.

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로 도움말을 구성하고 표시할 수도 있습니다.

사용자 입력으로 기본 제공 작업 구현

사용자 입력이 포함된 내장 작업을 통해 복잡한 진단 결과를 제공할 수 있음 기능을 인앱 솔루션으로 사용할 수 있습니다. Google 모바일 광고 SDK를 판매자가 직접 입력할 수 있는 대화상자로 사용합니다. 자세한 내용은 정보를 검토하고 요청을 확인합니다

각 작업에는 하나 이상의 작업 흐름이 포함됩니다. 일부 작업의 경우 두 개 이상의 흐름을 만들 수 있습니다. 예를 들어 판매자가 결정에 동의하지 않아 추가 검토를 요청함 다른 흐름으로 진행될 수 있습니다

사용자 입력으로 복잡한 작업을 구현하기 위해 데이터를 요청하려면 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 메서드에 액세스하려면 다음을 제출하세요. 이 API를 사용하여 양식을 작성해 주세요.

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_PRECONDITION 및 INTERNAL 상태인 경우 앱에서 페이지를 새로고침하거나 나중에 다시 시도해 보세요.