Отображение проблем и решений продавцам

В этом руководстве объясняется, как сторонние разработчики приложений могут использовать службу MerchantSupport для создания страницы диагностики в приложении для своих продавцов.

Вы можете использовать этот сервис для создания пользовательских интерфейсов, аналогичных страницам диагностики аккаунта Merchant Center и страницам проблем с продуктами .

Служба MerchantSupport предназначена только для сторонних интерфейсов. Запросы должны инициироваться, когда продавец взаимодействует с пользовательским интерфейсом вашего приложения. Чтобы автоматизировать диагностику своей собственной учетной записи продавца, ознакомьтесь с руководствами по статусу учетной записи , статусу продукта и фильтрации продуктов .

Мы рекомендуем вам предоставить следующие страницы в вашем приложении, чтобы помочь вашим продавцам устранять неполадки:

  • Диагностика аккаунта
  • Диагностика продукта

Различные варианты реализации страницы диагностики

Страницу диагностики можно реализовать разными способами. В зависимости от ваших потребностей выберите вариант, который определяет, как будут выполняться сложные диагностические действия. В запросе вы можете установить для 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. В вашем приложении отображается подробное impact каждой проблемы по country , destination , prerendered_content и кнопкам actions продавец может предпринять для решения проблемы. Существуют разные виды действий:

    1. Внешние действия : укажите на внешнюю страницу, например, в Merchant Center, где продавец сможет решить проблему.
    2. Встроенные простые действия : укажите страницу в вашем приложении, где продавец может решить проблему.
    3. Встроенные действия, вводимые пользователем : откройте диалоговое окно, в котором продавец может предоставить необходимую информацию и запросить действие. Этот тип действия доступен только в том случае, если было запрошено BUILT_IN_USER_INPUT_ACTIONS .

  6. Продавец следует инструкциям, чтобы решить проблему.

  7. Продавец перезагружает страницу диагностики в вашем приложении.

  8. Ваше приложение отправляет еще один запрос в службу MerchantSupport и отображает обновленный список проблем.

Вы можете сравнить информацию, отображаемую готовым приложением, со страницами диагностики в Merchant Center, чтобы проверить правильность реализации.

Пользовательский интерфейс издевается

Вот пример того, как вы можете отобразить информацию из ответа renderaccountissues на странице диагностики вашей учетной записи. Объекты пользовательского интерфейса сопоставляются с соответствующими полями API в макете. Вы можете создать аналогичную страницу для проблем с продуктом.

изображение

Вот как выглядит заполненная страница диагностики учетной записи:

изображение

Стиль предварительно обработанного HTML

Ответ на вызов службы MerchantSupport включает поле prerendered_content , сведения о каждой проблеме в HTML. Вы можете встроить этот HTML-контент непосредственно в свой пользовательский интерфейс, чтобы отобразить проблему в читаемом формате.

Вы можете увидеть элементы HTML с классом new-element . Класс 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, чтобы настроить отображение контента в вашем пользовательском интерфейсе. Вот пример 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} уникальным идентификатором учетной записи, для которой вы хотите инициировать обработку действия.

    Чтобы получить доступ к методу triggeraction для BuiltInUserInputAction , отправьте запрос, используя эту форму .

  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 , приложение должно дать указание продавцу перезагрузить страницу или повторить попытку позже.