index
title: Publisher JavaScript Plugin excerpt: フロントエンドの変更のみで、求人サイトまたはpublisher siteにIndeedの機能を統合します。 sidebar_position: 5
Publisher JavaScript Pluginによって、フロントエンドの変更のみで、 求人検索機能を貴社の求人サイトやメディアサイトに連携できるようになります。
対応機能
このプラグインはjob search featureをサポートしており、IndeedおよびIndeed PLUS job boardsの求人をサイトに表示します。
求人検索機能を利用すると、指定したクエリに基づく求人のリストを貴社サイトで求職者が閲覧できるようになります。 各求人には固有の求人カードがあり、求人に関する情報や Indeed の求人へのリンクが記載されています。
Indeed は、Indeed PLUSの全求人のプールから、貴社のサイトで表示できる一部の求人を提供します。 詳細については、Indeed の担当者にお問い合わせください。
対応ブラウザー
HTTPSページですべてのプラグインUIをレンダリングします。HTTPには対応していません。
このプラグインは次のブラウザーに対応しています。
| Chrome | Firefox | Safari | Edge (Chromium) | |
|---|---|---|---|---|
| Linux | ✅ | ✅ | N/A | ✅ |
| macOS | ✅ | ✅ | ✅ | ✅ |
| Windows | ✅ | ✅ | N/A | ✅ |
| Android | ✅ | ❌ | N/A | ❌ |
| iOS | ✅ | ❌ | ✅ | ❌ |
始める前に
プラグインを使用するには、Indeed partnerである必要があります。Indeed partnerになった後、Indeedの担当者へ連絡してプラグインへのアクセスを取得してください。
プラグインスクリプトを読み込む
求人サイトまたはpublisher siteにプラグインスクリプトを読み込むには、プラグインUIを表示するページへ<script>タグを追加します。
<!DOCTYPE html><html> <head> ... // Load the plugin script <script src="https://plugins.indeed.com/publisher-plugin/main.js" crossorigin defer ></script> ... </head> ...</html>次に、job search featureを有効にします。
プラグインをテストする
セットアップ中に、プラグインを統合するサイトのdomain nameを指定します。
次の両方についてdomain nameを指定できます。
- production environment
- test environment
プラグインをテストするには、プラグインがtest domainで読み込まれているかどうかを自動的に検知し、test modeで動作します。test modeでは、プラグインはproduction modeとほぼ同じように動作しますが、View jobボタンは無効になります。
求人検索の有効化
サイトでjob search featureを有効にするには、プラグインスクリプトを読み込み、適切な属性を持つHTML要素を追加してUIを表示します。
この例は、job search UIの表示方法を示しています。
<!DOCTYPE html><html> <head> ... // Step 1: Load the plugin script <script src="https://plugins.indeed.com/publisher-plugin/main.js" crossorigin defer ></script> ... </head> <body> ... // Step 2: Specify where to display the job search UI <div data-indeed-plugin-type="<PLUGIN-TYPE>" data-indeed-partner-app-id="<PARTNER-APP-ID>" data-indeed-placement-id="<PLACEMENT-ID>" data-indeed-search-limit="<SEARCH-LIMIT>" data-indeed-search-what="<SEARCH-WHAT>" data-indeed-search-where="<SEARCH-WHERE>" data-indeed-search-job-types="<SEARCH-JOB-TYPES>" data-indeed-search-occupations="<SEARCH-OCCUPATIONS>" ></div> ... </body></html>コードスニペット内の山括弧（<>）のパラメーターを、実際の値に置き換えてください。
次の表は、data-indeed-*属性を説明しています。
| Attribute | Type | Required | Description |
|---|---|---|---|
data-indeed-plugin-type | String | Required | この要素で有効にするfeatureです。 |
data-indeed-partner-app-id | String | Required | websiteの識別子です。Indeedがこの値を提供します。 |
data-indeed-placement-id | String | Required | website上のプラグイン配置を表す識別子です。Indeedがこの値を提供します。 |
data-indeed-search-limit | Integer | Optional | job search UIに表示する求人の最大件数です。 1から20の間である必要があります。デフォルトは10です。 |
data-indeed-search-what | String | Optional* | queryで使用する検索語です。 Example: この文字列には、スペース区切りで複数の語を含めることができます。その場合、 Example: この文字列に *次の属性のうち少なくとも1つを指定する必要があります。
|
data-indeed-search-where | String | Optional* | queryで使用するlocationです。 Example: *次の属性のうち少なくとも1つを指定する必要があります。
|
data-indeed-search-job-types | String | Optional | SUIDで指定するjob type filterのカンマ区切りリストです。 省略した場合、site に表示できる求人のsubsetを作るためにIndeedが適用するもの以外のjob type filterは適用されません。 Example: 複数の値を指定した場合、 |
data-indeed-search-occupations | String | Optional* | SUIDで指定するoccupation filterのカンマ区切りリストです。 省略した場合、siteに表示できる求人のsubsetを作るためにIndeedが適用するもの以外のoccupation filterは適用されません。 Example: 複数の値を指定した場合、 *occupation filter用のSUID値は将来変更される可能性があります。 |
次のいずれかに該当する場合、プラグインはjob search UIを表示しません。
- parameterが無効である
- 求人検索で結果が返らない
求人検索UIを表示する
求職者にとって有益な場所にjob search UIを表示します。
ページ上のコンテンツとjob search UIを結び付けるために、UIの上にheaderを表示します。なぜこれらの求人を提案しているのかをユーザーが理解できるようにしてください。
UIは次のページに表示できます。
| Page | Header example | Description |
|---|---|---|
| Search results page | More related jobs | siteの検索結果の後に、Indeed PLUSの追加の関連求人を表示します。 検索で結果が返らない場合は、代わりにIndeed PLUSの関連求人を表示します。 |
| Article page | Jobs related to this article | 記事の後に関連求人を表示します。 |
1つのページで2か所以上にjob search UIを表示した場合、プラグインは最初の場所にのみ表示します。
求人検索UIのレイアウト
job search UIはcontainerの幅に合わせて調整されます。 モバイルレイアウトとデスクトップレイアウトの両方で適切に表示されます。UIの最大幅は700pxです。
job search UIをカスタマイズする
job search UIでは、次のコンポーネントをカスタマイズできます。
- header sectionのtext color
- list bodyのbackground color
- 求人card上のView jobボタンのbackground colorとtext color
この画像は、デフォルトのjob search UIと、カスタマイズしたjob search UIの例を示しています。
これらの要素をカスタマイズするには、Indeedの担当者へ連絡してください。色は16進数で指定してください。たとえば、白は#FFFFFFです。
ユーザーがコンテンツを見づらくなる色の組み合わせは使用しないでください。たとえば、白い背景に白いフォント色を使用しないでください。
test期間中にjob search UIのデザインを確認し、必要な変更を加えてください。
ベストプラクティス
job search UIを表示する際は、次のガイドラインに従ってください。
適切な検索条件の設定
ページのコンテンツに関連するjob search criteriaを設定してください。
コントラストカラーの使用
コンテンツと背景が十分にコントラストする色を選択してください。たとえば、白い背景に白いフォント色を使用しないでください。
レイアウトの柔軟性を確認する
job search UIの高さは、求人cardの数と高さによって決まります。site layoutが異なる高さのUIに対応できることを確認してください。
余白の追加
job search UIの上下に最低16pxの余白を確保してください。
適切なヘッダーの表示
job search UIの上に説明用headerを表示し、ユーザーがこれらの求人を見る理由を理解できるようにしてください。収益化を目的に、ユーザーを求人のクリックへ誘導しないでください。
プラグインが求人検索UIを表示することを確認する
次の場合、プラグインは求人を表示しません。
- 求人検索で結果が返らなかった場合
- API callが失敗した場合
- 月間revenue capに達した場合
Indeedは各publisherに対し、プラグインが表示する求人のクリックから得られるrevenueの上限を設定します。上限に達すると、プラグインは求人の表示を停止します。詳細はIndeedの担当者へ連絡してください。
プラグインがjob search UIを正常に表示したかどうかを確認してください。プラグインはindeed-plugin-event typeのeventをプラグインのroot elementへ送信します。detail fieldにはeventのtypeとeventのpayloadが含まれます。payloadのsuccess fieldは、プラグインがUIを正常に表示したかどうかを示します。
たとえば、spinnerなどのloading indicatorを表示し、プラグインがUIを正常に表示 した場合にheader textを表示できます。
このコードスニペットは、これらのAPI実装の一部を示しています。このコードをそのまま自社コードへコピーしないでください。
type IndeedPluginEventDetail = { type: "load"; payload: { success: boolean; }}
// When the plugin rendering succeedsconst eventDetail: IndeedPluginEventDetail = { type: "load", payload: { success: true }};// When the plugin rendering failsconst eventDetail: IndeedPluginEventDetail = { type: "load", payload: { success: false }};
const indeedPluginEvent = new CustomEvent("indeed-plugin-event", { detail: eventDetail});この例は、プラグインがUIを正常に表示したかどうかを確認する方法を示しています。
const pluginRoot = document.getElementById("<plugin-root-id>");
pluginRoot.addEventListener("indeed-plugin-event", (event) => { const { type, payload } = event.detail;
if (type === "load") { const success = payload.success; if (success) { // When the rendering succeeds } else { // When the rendering fails } }});