このガイドでは、サードパーティ製アプリのデベロッパーが MerchantSupport サービスを使用して販売者向けのアプリ内診断ページを作成する方法について説明します。
このサービスを使用すると、Merchant Center のアカウント診断ページと商品の問題ページに似た UI を作成できます。
MerchantSupport サービスはサードパーティの UI 専用です。販売者がアプリケーションの UI を操作したときにリクエストがトリガーされる必要があります。独自の販売アカウントの診断を自動化するには、アカウントのステータス、商品のステータス、商品のフィルタリングのガイドをご覧ください。
販売者が問題を解決できるように、アプリで次のページを用意することをおすすめします。
- アカウント診断
- 商品の診断
診断ページを実装するためのさまざまなオプション
診断ページはさまざまな方法で実装できます。必要に応じて、複雑な診断アクションの処理方法を決定するオプションを選択します。このリクエストでは、user_input_action_option を次のいずれかのオプションに設定できます。
REDIRECT_TO_MERCHANT_CENTER: これはデフォルトのオプションです。追加コンテンツの表示を必要とするアクションや、販売者から追加の入力を受け取るアクションが、アプリに完全に実装されていません。そのようなアクションに対しては、Merchant Center の対応するページにリダイレクトするリンクが API によって提供され、そのページで販売者がアクションを実行できます。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} は、アクションの処理をトリガーするアカウントの一意の識別子に置き換えます。
販売者へのレスポンスからの診断と推奨される対応がアプリに表示されます。レスポンスの例を次に示します。
{ "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を表示することをおすすめします。販売者がリスト内の問題をクリックします。
アプリでは、
country、destination、prerendered_contentごとの各問題の詳細なimpactと、販売者が問題を解決するために使用できるactionsのボタンが表示されます。アクションにはさまざまなタイプがあります。- 外部アクション: 販売者が問題を解決できる外部ページ（Merchant Center など）を指します。
- 組み込みのシンプル アクション: 販売者が問題を解決できるアプリ内のページにカーソルを合わせます。
- 組み込みのユーザー入力アクション: 販売者が必要な情報を入力してアクションをリクエストできるダイアログを開きます。このタイプのアクションは、
BUILT_IN_USER_INPUT_ACTIONSがリクエストされた場合にのみ使用できます。
販売者は手順に沿って問題を解決します。
販売者がアプリの診断ページを再読み込みします。
アプリが
MerchantSupportサービスに別のリクエストを送信し、更新された問題リストを表示します。
完成したアプリで表示される情報を Merchant Center の診断ページと比較することで、実装を確認できます。
UI モック
以下は、renderaccountissues レスポンスの情報をアカウントの診断ページに表示する方法の例です。UI のオブジェクトは、モック内の対応する API フィールドにマッピングされます。商品の問題についても同様のページを作成できます。
入力されたアカウント診断ページは次のように表示されます。
プリレンダリングされた HTML のスタイルを設定する
MerchantSupport サービスの呼び出しからのレスポンスには、prerendered_content フィールド（各問題の詳細を HTML で記述）が含まれます。この HTML コンテンツを UI に直接埋め込むと、読みやすい形式で問題を表示できます。
new-element クラスの HTML 要素が表示される場合があります。new-element クラスは、MerchantSupport サービスとの統合後に 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 でツールチップを設定して表示することもできます。
ユーザー入力で組み込みアクションを実装する
ユーザー入力のある組み込みアクションを使用すると、アプリのアプリ内ソリューションとして複雑な診断機能を提供できます。販売者が入力を提供し、追加情報を読み取り、リクエストを確認できるダイアログとして実装することをおすすめします。
各アクションには 1 つ以上のアクション フローが含まれます。一部のアクションでは複数のフローが存在する場合があります。たとえば、販売者が追加審査を求める場合は別のフローが考えられます。販売者が決定に同意できないため、すでに問題を修正しているときは別のフローになります。
ユーザー入力による複雑なアクションを実装するためにデータをリクエストするには、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 つ選択できます。
- 販売者がフローを選択します。
選択したアクション フローのタイトル、メッセージ、コールアウト、ユーザー入力フォームがアプリに表示されます。これらの詳細をダイアログで表示することをおすすめします。
- コールアウト（存在する場合）には、販売者が操作の仕組みと手順を適切に把握できるようにする重要な情報が含まれています。このメッセージをハイライト表示し、コールアウトの重大度に応じたスタイルを設定することをおすすめします。
- フローに入力フィールドがある場合は、販売者が値を提供できるように、それらを表示する必要があります。入力フィールドが required とマークされている場合は、販売者が値を入力する前にリクエストを送信してはいけません。
販売者が情報を読み取り、リクエストされた値を指定します。
販売者はボタンをクリックしてリクエストを確定します。
アプリは
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メソッドにアクセスするには、こちらのフォームを使用してリクエストを送信します。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ステータスで示される）を返した場合、アプリは販売者にページを再読み込みするか、後で再試行するように指示する必要があります。
- サービスが